ckeditor自定义图片上传，结合EXT JS

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='<img src="'+SMF.base+'/images/htmlEditor/'+result.filename+'"/>'
                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数据。