1.在config.js中使用自定义的工具条，加上自定义的按钮"addpic",和插件定义
CKEDITOR.editorConfig = function( config ){ // Define changes to default configuration here. For example: // config.language = 'fr'; // config.uiColor = '#AADC6E'; config.toolbar = [ ['Source', '-', 'Preview', '-'], ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord'], ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'], '/', ['Bold', 'Italic', 'Underline'], ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent'], ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'], ['Link', 'Unlink', 'Anchor'], ['addpic', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'], '/', ['Styles', 'Format', 'Font', 'FontSize'], ['TextColor', 'BGColor'] ]; config.extraPlugins = 'addpic';}; 2.在ckeditor/plugins/下新建文件夹addpic,文件夹下有自己找来的图片(14px*13px)作为按钮的图标，和自己写的plugin.js文件，内容如下：
(function () { //Section 1 : 按下自定义按钮时执行的代码 var a = { exec: function (editor) { editor.show(); } }, b = 'addpic'; CKEDITOR.plugins.add(b, { init: function (editor) { editor.addCommand(b, a); editor.ui.addButton('addpic', { label: '添加图片', icon: this.path + 'addpic.png', command: b }); } });})(); 其中editor.show为在定义editor时加上的自定义方法。
3.自定义的show方法
/*html编辑器图片上传*/SMF.show=function(editorId){ var _items=[{ xtype:'panel', width:270, border:false, bodyStyle:'font-size:12px;color:red;', html:'文件名中含有特殊字符或文件名过长都会导致上传失败！' }]; var ff=function(){ var f=new Ext.form.TextField({ inputType:'file', width:210, hideLabel:true }); var p=new Ext.Panel({ layout:'form', width:280, border:false, items:[f] }); return p; } _items.push(ff()); //按钮 var _buttons=[]; _buttons.push({ text:'确定插入', handler:function(){ if(uploadForm.form.isValid()){ uploadForm.form.doAction('submit',{ waitTitle:'上传文件', waitMsg:'正在上传文件……', url:'自己写的上传处理url', method:'post', success:function(form,action){ //插入图片 var result=action.result; if(result.error){ //Java程序中返回的json串中自定义的属性error,这个地方要根据自己的需要判断出错 alert('图片插入失败，请检查文件名！'); return; }//SMF.base为预定义的根路径，result.filename也是返回的json串中自定义的属性。我把上传的文件都放到images/htmlEditor目录下了，所以只需要返回文件名就行。 var img='
' InsertHTML(img); win.close(); },failure:function(form,action){ alert('图片插入失败，请检查文件名！'); } }); } } },{ text:'取消', handler:function(){ win.close(); } }); var uploadForm=new Ext.form.FormPanel({ fileUpload :true, items:_items, buttons:_buttons, bodyStyle:'padding:5px;', autoScroll:true }) var win=new Ext.Window({ title:'插入图片', width:330, height:300, layout:'fit', modal:true, items:uploadForm }); win.show(); var InsertHTML=function(value){ // Get the editor instance that we want to interact with. var oEditor = CKEDITOR.instances[editorId]; // Check the active editing mode. if ( oEditor.mode == 'wysiwyg' ){ oEditor.insertHtml( value ); } } } 4.使用ckeditor的地方。
预先有了一个id为description(id名称自己取)的textarea,EXT中为Ext.form.TextArea。
然后在适当的地方执行。
var editor=CKEDITOR.replace('description');
editor.show=function(){
SMF.show('description'); }//ckeditor初始化时editor.setData('');或有数据editor.setData(record.get("description"));//EXT里的record
//ckeditor只读editor.setReadOnly(true);
5.EXT中使用ckeditor
弹出的Window的show，close事件中：
var win=new Ext.Window({ width:1000, height:500, layout:'fit', closeAction:'close', maximizable:true, modal:true, items:[popForm], title:title, listeners:{ show:function(){ var editor=CKEDITOR.replace('description'); if(type=='create') { editor.setData(''); }else{ editor.setData(record.get("description")); } editor.show=function(){ SMF.show('description'); } if(type=='detail'){ Ext.each(popForm.form.items.items,function(field){ field.setReadOnly(true); }); editor.setReadOnly(true); editor.show=''; } popForm.editor=editor; }, close:function(){ var editor=CKEDITOR.instances.description; CKEDITOR.remove(editor); } } }); 其中的popForm为FormPanel对象，其中含有一个id为description的TextArea对象，如果在close时不处理，则下一次创建的时候会出错，报的错是id为description的editor实例已经存在。
在提交表单数据时
var editor=popForm.editor;
var html=editor.getData();html就是所要的html数据。