ext学习之fckeditor的使用

1.[color=red]下载fckeditor的包[/color]。[url]http://ckeditor.com[/url] 官网. 我就直接进入下载与java关联的一个项目. [url]https://sourceforge.net/projects/fckeditor/files/FCKeditor.Java/2.6/[/url] [img]http://dl.iteye.com/upload/attachment/199394/7ed9ea1e-b240-306b-9e28-2fd8eff42917.jpg[/img] 直接将其一个demo下载下来.. 2.打开[color=red]fckeditor-java-demo-2.6.war.zip[/color]这个包.使用eclipse建立一个[color=red]项目叫做fckeditordemo[/color].然后将其文件夹下的所有数据都复制到WebContent下面 [img]http://dl.iteye.com/upload/attachment/199396/b2013898-95b0-30cf-b10a-3e3cb8dd7cb9.jpg[/img] 3[color=red].将项目部署入tomcat访问[/color]..[url]http://localhost:8080/fckeditordemo/index.jsp[/url] 将会出现一个demo。你可以点击图片上传进行图片的管理.. [img]http://dl.iteye.com/upload/attachment/199398/5aee8580-0da1-3f13-bc85-e39273d2e9bf.jpg[/img] 4.确认了fckeditor可以使用了之后.我们就要使用到ext来调用了.首先在eclipse下面建立一个js文件.把ext2或者3存放到下面.然后建立KnowledgeManager文件夹.下面就是建立自己的js [color=red]KnowlegeForm.js。使用晚上的demo修改的.下面也是网上搜到最多的例子.个人觉得有点麻烦.[/color] var KnowledgeForm = function(_title) { return this.setup();};KnowledgeForm.prototype.setup = function() {//内容初始化.var fckeditorFormPanel = new Ext.FormPanel({ labelWidth: 75, url:'', frame:true, title: 'fckeditorForm', bodyStyle:'padding:5px 5px 0', width: 950, height:450, defaultType: 'textfield', items:[ { fieldLabel:'知识标题', name:'knowledgeTitle', blankText: '知识标题为必填!', id:'knowledgeTitle' }, { fieldLabel:'知识内容', xtype:'textarea', name:'knowledgeContent', blankText: '知识内容为必填!', id:'knowledgeContent' } ], buttons: [{ text: 'Save', type:'submit', handler: function() { Ext.get('knowledgeContent').dom.value=editorInstance.GetXHTML( true );//获取fckeditor内容赋给textarea alert(Ext.get('knowledgeContent').dom.value); if(fckeditorFormPanel.form.isValid()){//验证通过 fckeditorFormPanel.form.doAction('submit',{ url:'submit.do', method:'post', waitMsg:'正在提交,请稍等...', success:function(form,action){//成功返回 }, failure:function(form,action){//失败返回 } }); } } },{ text: 'Cancel' }] }); fckeditorFormPanel.render(document.body); /** * 以下创建在线编辑器 */ //knowledgeContent为你要取代的textarea的id名字 var oFCKeditor = new FCKeditor( 'knowledgeContent',810,350 ) ; oFCKeditor.BasePath = "/fckeditordemo/fckeditor/" ; //:项目的名字/fckeditor存放的路径 oFCKeditor.ToolbarSet = 'Default';//使用默认的工具栏 oFCKeditor.ReplaceTextarea() ;//取代textarea}var editorInstance;/** * FCKEditor初始化完成将调用此方法 * @param {Object} editorInstance */function FCKeditor_OnComplete( instance ) { editorInstance=instance;}; [color=red]demo.jsp[/color] <link rel="stylesheet" type="text/css" href="js/ext2/resources/css/ext-all.css" /> <script type="text/javascript" src="js/ext2/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="js/ext2/ext-all.js"></script> <script type="text/javascript" src="js/ext2/build/locale/ext-lang-zh_CN.js"></script> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <script type="text/javascript" src="fckeditor/fckeditor.js"></script><!-- 上线编辑工具 --> <script type="text/javascript" src="js/KnowledgeManager/KnowlegeForm.js"></script> <script type="text/javascript"> Ext.onReady(function(){ new KnowledgeForm("部门添加"); }); </script> [color=red]下面是一个在ext官网的一个例子[/color] [url]http://www.extjs.com/forum/showthread.php?t=17423[/url] [color=red]他封装了一个ext.FCKeditor.js[/color]. Ext.form.FCKeditor = function(config){ Ext.form.FCKeditor.superclass.constructor.call(this, config); this.FCKid=0; this.MyisLoaded=false; this.MyValue='';};Ext.extend(Ext.form.FCKeditor, Ext.form.TextArea, { onRender : function(ct, position){ if(!this.el){ this.defaultAutoCreate = { tag: "textarea", style:"width:100px;height:60px;", autocomplete: "off" }; } Ext.form.TextArea.superclass.onRender.call(this, ct, position); if(this.grow){ this.textSizeEl = Ext.DomHelper.append(document.body, { tag: "pre", cls: "x-form-grow-sizer" }); if(this.preventScrollbars){ this.el.setStyle("overflow", "hidden"); } this.el.setHeight(this.growMin); } if (this.FCKid==0) this.FCKid=get_FCKeditor_id_value() setTimeout("loadFCKeditor('"+this.name+"');",100); }, setValue : function(value){ this.MyValue=value; if (this.FCKid==0) this.FCKid=get_FCKeditor_id_value() FCKeditorSetValue(this.FCKid,this.name,value) Ext.form.TextArea.superclass.setValue.apply(this,[value]); }, getValue : function(){ if (this.MyisLoaded){ value=FCKeditorGetValue(this.name); Ext.form.TextArea.superclass.setValue.apply(this,[value]); return Ext.form.TextArea.superclass.getValue(this); }else{ return this.MyValue; } }, getRawValue : function(){ if (this.MyisLoaded){ value=FCKeditorGetValue(this.name); Ext.form.TextArea.superclass.setRawValue.apply(this,[value]); return Ext.form.TextArea.superclass.getRawValue(this); }else{ return this.MyValue; } }});Ext.reg('fckeditor', Ext.form.FCKeditor);function loadFCKeditor(element){ oFCKeditor = new FCKeditor( element ) ; oFCKeditor.ToolbarSet = sFCKeditorToolbar ; oFCKeditor.Config['SkinPath'] = sFCKeditorSkinPath ; oFCKeditor.Config['PreloadImages'] = sFCKeditorSkinPath + 'images/toolbar.start.gif' + ';' + sFCKeditorSkinPath + 'images/toolbar.end.gif' + ';' + sFCKeditorSkinPath + 'images/toolbar.bg.gif' + ';' + sFCKeditorSkinPath + 'images/toolbar.buttonarrow.gif' ; oFCKeditor.BasePath = sFCKeditorBasePath ; oFCKeditor.Config['BaseHref'] = sFCKeditorBaseHref ; oFCKeditor.Height = 260 ; oFCKeditor.ReplaceTextarea() ;}function FCKeditor_OnComplete(editorInstance){ Ext.getCmp(editorInstance.Name).MyisLoaded=true; editorInstance.Events.AttachEvent('OnStatusChange', function(){ Ext.getCmp(editorInstance.Name).setValue(); })}var FCKeditor_value=new Array();function FCKeditorSetValue(id,name,value){ if ((id!=undefined)&&(name!=undefined)){ if (value!=undefined) FCKeditor_value[id]=value; else if (FCKeditor_value[id]==undefined) FCKeditor_value[id]=''; var oEditor = FCKeditorAPI.GetInstance(name) ; if(oEditor!=undefined) oEditor.SetData(FCKeditor_value[id]) }}function FCKeditorGetValue(name){ if ((id!=undefined)&&(name!=undefined)){ var oEditor = FCKeditorAPI.GetInstance(name) ; data=''; if(oEditor!=undefined) data=oEditor.GetData() return data; }}var FCKeditor_id_value;function get_FCKeditor_id_value(){ if (!FCKeditor_id_value){ FCKeditor_id_value=0; } FCKeditor_id_value=FCKeditor_id_value+1; return FCKeditor_id_value; 可以直接使用 { xtype:'fckeditor', name:'content_1', id:'content_1', fieldLabel:'Content', height:270} [color=red]KnowlegeForm2.js[/color] var KnowledgeForm = function(_title) { return this.setup();};KnowledgeForm.prototype.setup = function() {//内容初始化.var fckeditorFormPanel = new Ext.FormPanel({ labelWidth: 75, url:'', frame:true, title: 'fckeditorForm', bodyStyle:'padding:5px 5px 0', width: 950, height:450, defaultType: 'textfield', reader: new Ext.data.JsonReader( { root:'data' }, [ {name:'knowledgeId',mapping:'knowledgeId'} ,{name:'knowledgeTitle',mapping:'knowledgeTitle'} ,{name:'knowledgeContent',mapping:'knowledgeContent'} ] ), defaults: { anchor: '95%,95%', allowBlank: false, selectOnFocus: true, msgTarget: 'side', width: 150 }, items:[{ xtype:'hidden' ,name:'knowledgeId' ,id:'knowledgeId' }, { fieldLabel:'知识标题', name:'knowledgeTitle', blankText: '知识标题为必填!', id:'knowledgeTitle' }, { fieldLabel:'知识内容', xtype:'fckeditor', name:'knowledgeContent', blankText: '知识内容为必填!', id:'knowledgeContent' } ], buttons: [{ text: 'Save', type:'submit', handler: function() { alert(Ext.get('knowledgeContent').dom.value); if(fckeditorFormPanel.form.isValid()){//验证通过 fckeditorFormPanel.form.doAction('submit',{ url:'submit.do', method:'post', waitMsg:'正在提交,请稍等...', success:function(form,action){//成功返回 }, failure:function(form,action){//失败返回 } }); } } },{ text: 'Cancel' }] }); return fckeditorFormPanel; } [color=red]demo2.jsp[/color] <link rel="stylesheet" type="text/css" href="js/ext2/resources/css/ext-all.css" /> <script type="text/javascript" src="js/ext2/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="js/ext2/ext-all.js"></script> <script type="text/javascript" src="js/ext2/build/locale/ext-lang-zh_CN.js"></script> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <script type="text/javascript" src="fckeditor/fckeditor.js"></script><!-- 上线编辑工具 --> <script type="text/javascript" src="js/KnowledgeManager/ext.FCKeditor.js"></script> <script type="text/javascript" src="js/KnowledgeManager/KnowlegeForm2.js"></script> <script type="text/javascript"> Ext.onReady(function(){ new KnowledgeForm("部门添加"); }); </script> 如果想使用的fckeditor比较符合ext风格.可以修改feckeditor里面的fckconfig.js. 将FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/' ;该我为FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/office2003/' ;.这里它显示将是office2003的风格 相关资源：微信小程序源码-合集1.rar