一、 配置所需文件及jar包
1、 ckeditor.zip，解压后放入web项目WebRoot目录中（可自定义子目录）
2、 ckeditor-java-core.jar，放入web项目WebRoot/WEB-INF/lib目录中
下载地址：
3、 其他所需资源jar包已集成在struts2-core.jar中
二、 简单的使用
1、 导入ckeditor.js
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
2、 一般是使用一个”<textarea>”来显示内容，然后替换成CKEditor编辑器
<textarea cols="80" id="content" name="fileUpload"> </textarea>
<script type="text/javascript">
CKEDITOR.replace('content'); //content为textarea的id
</script>
三、 项目中的使用
1、 在WebRoot/ckeditor/config.js中使用自定义的工具条，加上自定义的按钮"addpic"和插件定义：CKEDITOR.editorConfig = function( config )
{
config.toolbar = […,
['addpic'],
…];
};
config.extraPlugins = 'addpic';
2、 在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
});
}
});
})();
3、 自定义的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 );
}
}
}
4、 ExtCkeditorAction：
execute() {
imagePath//服务器上物理地址
pagePath//服务器上web地址(前端调用该地址供客户端访问)
}
copy(myFile, imageFile){
//读入myFile写到imageFile
//myFile为上传的文件
//imageFile为服务器上物理文件
}
5、 使用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
6、 销毁当前组件时需移除editor，否则下次加载时会失败：
listeners : {
'beforedestroy' : function(v) {
if(editor!=null) {
CKEDITOR.remove(editor);
}
editorPanel.destroy();
}
}