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

           }

}