Ckeditor在Java项目中与Extjs结合使用

1、              配置所需文件及jar包

一、  ckeditor.zip，解压后放入web项目WebRoot目录中（可自定义子目录）

二、  ckeditor-java-core.jar，放入web项目WebRoot/WEB-INF/lib目录中

下载地址：http://ckeditor.com/download

三、  其余所需资源jar包已集成在struts2-core.jar中

2、              简单的使用

一、  导入ckeditor.js

<script type="text/javascript" src="ckeditor/ckeditor.js"></script>

二、  通常是使用一个”<textarea>”来显示内容，而后替换成CKEditor编辑器

<textarea cols="80" id="content" name="fileUpload"> </textarea>

<script type="text/javascript">

CKEDITOR.replace('content'); //content为textarea的id

</script>

3、              项目中的使用

一、  在WebRoot/ckeditor/config.js中使用自定义的工具条，加上自定义的按钮"addpic"和插件定义：CKEDITOR.editorConfig = function( config )

{

config.toolbar = […,

['addpic'],

…];

};

config.extraPlugins = 'addpic';

二、  在WebRoot/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

            });

        }

    });

})();

三、  自定义的show方法：(WebRoot/scripts/comm/extCkeditorFun.js)

/*html编辑器图片上传*/

SMFshow=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:'../ckeditor/fileUploadAction.action',//自定义后台处理上传文件Action(配置映射到com.fun.ExtCkeditorAction)

                  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 );

        }

    }       

}

四、  ExtCkeditorAction：

execute() {

           imagePath//服务器上物理地址

    pagePath//服务器上web地址(前端调用该地址供客户端访问)

}

copy(myFile, imageFile){

           //读入myFile写到imageFile

           //myFile为上传的文件

           //imageFile为服务器上物理文件

}

五、  使用ckeditor：(dc16.js)

(1)新建id为description(id名称本身取)的textarea,EXT中为Ext.form.TextArea

var dtl = new Ext.form.TextArea({

id : 'description',

           name : 'DETAIL',

           allowBlank : false,

           blankText : '详细内容不能为空',

           disabled : false,

           autoWidth : true

});

(2)而后在适当的地方执行

var editor=CKEDITOR.replace('description');

editor.show=function(){
　　SMFshow('description');
}//注意：Ext组件的加载延迟

//ckeditor初始化时editor.setData('');

//或加载数据时editor.setData(result.data['description']);//Ext里的result

六、  销毁当前组件时需移除editor，不然下次加载时会失败：

listeners : {

         'beforedestroy' : function(v) {

                    if(editor!=null) {

                             CKEDITOR.remove(editor);

                    }

                    editorPanel.destroy();

           }

}