最近项目需要做富文本编辑器，采用ckeditor+ckfinder，由于这是国外开源工具，英语太菜，看不懂文档，最终查了很多博客和资料才勉强搞定，做个记录。
一、CKEditor配置
1、下载
http://ckeditor.com/download
这里使用了当前最新版ckeditor4.4.0 Full Package
2、安装
将压缩包解压后的整过ckeditor文件夹copy到项目WebContent目录下(可根据自己需要自定义下级目录，我的是WebContent/plugins/ckeditor)
3、去除多余文件
为了项目的纯净，可将ckeditor的多余文件去掉，也可不去
删除ckeditor下的samples文件夹、CHANGES.md、LICENSE.md、README.md、lang目录下只保留en.js和zh-cn.js
4、使用
1)、在需要用到ckeditor的jsp页面head导入js
<script type="text/javascript" src="/plugins/ckeditor/ckeditor.js"></script>
2)、 实例化
这里可以有三种方式：
定位可用name属性，也可用id
(1)、<textarea rows="30" cols="50" name="editor"></textarea>
<script type="text/javascript">CKEDITOR.replace('editor');</script>
(2)、<textarea rows="30" cols="50" name="content"></textarea>
//js放到head
<script type="text/javascript">
window.onload = function()
{
CKEDITOR.replace( 'content ' );
};
</script>
(3)、 <div id="editor"></div>
CKEDITOR.appendTo( 'editor' );
这样一个完整的ckeditor就可以用了，但这样得到的ckeditor是一个默认状态的，可根据自己需求进行配置。
5、ckeditor属性配置
1)、 ckeditor的属性可在ckeditor目录下的config.js中进行配置
config.language = 'zh-cn';//中文
config.uiColor = '#AADC6E'; //皮肤
....
//自定义工具栏--默认情况下页面ckeditor的工具栏会全部显示，可根据自己需求自定义
config.toolbar_Mine =
[
{ name: 'document', items: ['Source', '-', 'Save', 'NewPage', 'DocProps', 'Preview', 'Print', '-', 'Templates'] },
'/',
{ name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat'] },
'/',
{ name: 'tools', items: ['Maximize', 'ShowBlocks', '-', 'About'] }
];
config.toolbar = 'Mine';
但并不是每个功能都需要用到这些的工具，可在使用ckeditor时再次设置。
2) 、 IN-PAGE配置方式 ，在实例化editor时设置
CKEDITOR.replace( 'editor',
{
toolbar : 'Basic',//基本工具
uiColor : '#9AB8F3'
}
);
3)、自定义属性文件配置方式
CKEDITOR.replace( 'editor', { customConfig : '/plugins/ckeditor/ckeditor_config.js'});
6、自定义ckeditor工具(插件）
ckeditor除了自带的工具外，还可以根据需求自定义工具
例：自定义一个工具，点击后弹出一个可填写内容的弹出框，填写内容确定后写入编辑器中。
1)、在ckeditor/plugins/下新建一个Folder（mytool），在mytool包下新建两个Folder（dialogs，icons）和plugin.js，在dialogs下新建mytool.js
2)、 在plugin.js中定义工具
CKEDITOR.plugins.add( 'mytool', {
//工具初始化方法
init: function( editor ) {
//定义打开对话框的命令
editor.addCommand( 'mytool', new CKEDITOR.dialogCommand( 'mytool' ) );
//创建一个工具栏按钮，它会执行我们上面定义的命令
editor.ui.addButton( 'mytool', {
icon: this.path+'icons/mycoin.gif',//工具栏显示的图标（文件放在icons中）
//按钮（如果是有效的话）的文本显示，以及鼠标悬停提示
label: '我的工具',
//单击按钮所执行的命令
command: 'mytool'
});
//注册我们的mytool.js
CKEDITOR.dialog.add( 'mytool', this.path + 'dialogs/mytool.js' );
}
});
3)、 mytool.js中定义弹出框和返回内容
CKEDITOR.dialog.add('mytool', function(editor) {
return {
title : '请输入',//弹出框标题
minWidth : 350,
minHeight : 100,
contents : [ {
id : 'controlModal',
elements : [ {
id : 'controlName',
type : 'text',
label : '请输入内容',
maxSize : '20'
},
{
id : 'msg',
type : 'button',
label : '输入1-20个字符！'
}
]
}],
onOk : function() {
var name = this.getValueOf('controlModal', 'controlName').replace(/\s/ig,'');//获取输入的内容，并去除所有空格
if (name.length == 0) {
return;
}
if (name.length > 20) {
alert("请输入小于20个字符！");
return;
}
editor.insertHtml("{#"+ name + "#}");
}
};
});
7、获取ckeditor内容
editor.document.getBody().getText(); //取得纯文本
editor.document.getBody().getHtml(); //取得html文本
8、 去掉点击ckeditor的图片上传空间后弹出框中预览框中的信息"Lorem ipsum dolor sit amet, ......."
这段文字在plugins\image\dialogs\image.js 中 ，找到删除就ok
二、ckeditor整合ckfinder配置
ckfinder结合ckeditor完成文件(图片、flash)上传和浏览的工具，但是收费的，但还是可以用的、
1、下载
http://cksource.com/ckfinder/download
我下载的是ckfinder_java_2.3.1
2、安装
将下载的ckfinder_java_2.3.1.zip解压，再解压后的文件夹里CKFinderJava.war文件的后缀改为.rar(CKFinderJava.rar或CKFinderJava.zip)，得到ckfinder的演示项目
1)、将ckfinder文件夹copy到自己项目WebContent目录下(可根据自己需要自定义下级目录，我的是WebContent/plugins/ckfinder)
为了工程的纯洁，可去掉一些文件:文件夹_samples、help，文件changelog.txt，ckfinder.html，install.txt， license.txt，translations.txt，lang目录下只保留en.js和zh-cn.js
2)、将这个工程里的jar包(ckfinder\WEB-INF\lib)copy到你自己的工程中。
3)、 将config.xml(ckfinder\WEB-INF)文件copy到你自己的工程对应的位置(WEB-INF下)，文件名可修改
config.xml 中定义了文件上传路径：<baseURL>/CKFinderJava/userfiles/</baseURL>，根据自己需求修改
4)、打开web.xml( ckfinder\WEB-INF)，将其中的如下配置copy到你自己工程的web.xml中
<servlet>
<servlet-name>ConnectorServlet</servlet-name>
<servlet-class>com.ckfinder.connector.ConnectorServlet</servlet-class>
<init-param>
<param-name>XMLConfig</param-name>
<param-value>/WEB-INF/config.xml</param-value><!-- 这里为3中文件对应的路径-->
</init-param>
<init-param>
<param-name>debug</param-name>
<param-value>false</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>ConnectorServlet</servlet-name>
<url-pattern>
/ckfinder/core/connector/java/connector.java
<!--这里根据自己ckfinder文件夹存放路径，我的是/plugins/ckfinder/core/connector/java/connector.java -->
</url-pattern>
</servlet-mapping>
5)、在ckeditor的config.js中加入如下配置
config.filebrowserBrowseUrl = '/项目名/plugins/ckfinder/ckfinder.html',
config.filebrowserImageBrowseUrl = '/项目名/plugins/ckfinder/ckfinder.html?type=Images',
config.filebrowserFlashBrowseUrl = '/项目名/plugins/ckfinder/ckfinder.html?type=Flash',
config.filebrowserUploadUrl = '/项目名/plugins/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files',
config.filebrowserImageUploadUrl = '/项目名/plugins/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images',
config.filebrowserFlashUploadUrl = '/项目名/plugins/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash',
config.filebrowserWindowWidth = '1000',
config.filebrowserWindowHeight = '700';
到此ckfinder就可以实现文件上传和浏览功能了。在ckeditor的工具栏中的图片上传就可以实现了。
3、ckfinder破解
下载的ckfinder包含了一些ckfinder自动的标记，可以将其去掉，这个有很多博客都有说，我照博客写的去修改
以下修改都是在在ckfinder/ckfinder.js中
1)、去掉图片可遇到其他文件夹
删除
if(a.bF&&1==a.bs.indexOf(a.bF.substr(1,1))%5&&a.lS(J)!=a.lS(a.ed)||a.bF&&a.bF.substr(3,1)!=a.bs.substr((a.bs.indexOf(a.bF.substr(0,1))+a.bs.indexOf(a.bF.substr(2,1)))*9%(a.bs.length-1),1))x.app.msgDialog('',"\124\x68\x69\x73\040\x66\165\156\143\164\x69\157\x6e\040\x69\163\x20\x64\x69\163\141\142\x6c\x65\x64\x20\x69\156\040\x74\x68\x65\x20\144\145\x6d\x6f\x20\x76\145\x72\x73\x69\157\156\040\x6f\146\x20\103\113\x46\x69\156\x64\145\162\x2e\x3c\x62\162\x20\057\x3e\x50\x6c\145\x61\x73\x65\040\x76\x69\163\151\164\x20\x74\150\145\x20\x3c\x61\x20\150\x72\x65\x66\x3d\x27\x68\x74\x74\x70\x3a\x2f\057\x63\153\x66\x69\x6e\x64\x65\162\056\143\157\155\047\076\103\113\106\x69\x6e\144\x65\x72\x20\167\145\142\x20\163\x69\x74\x65\074\x2f\141\076\x20\x74\x6f\040\x6f\x62\x74\141\151\156\x20\x61\x20\x76\x61\x6c\x69\144\040\154\x69\x63\145\x6e\163\145\056");else
2)、去除文件目录下的信息
if((T.eu&& !Y||X)&&T.mj){V.addClass('files_message');this.tools.of().setHtml(T.mj);}
改成：
if((T.eu&&!Y||X)&&T.mj){V.addClass('files_message');if(T.mj==M)this.tools.of().hide();else{this.tools.of().setHtml(T.mj);this.tools.of().show()}}
3)、去掉文件列表上面的“This is the DEMO.....”
if((T.eu&& !Y||X)&&T.mj){V.addClass('files_message');this.tools.of().setHtml(T.mj);}
改成：
if((T.eu&&!Y||X)&&T.mj){V.addClass('files_message');if(T.mj==M)this.tools.of().hide();else{this.tools.of().setHtml(T.mj);this.tools.of().show()}}
4、实现ckfinder不同用户上传文件到不同的文件夹（动态定义上传路径）
这个问题困扰了我一天，网上一直没找到一个很好的处理，后面自己就去看配置文件和源码，终于找到了解决办法。
ckfinder图片上传路径是在config.xml中定义的：<baseURL>/CKFinderJava/userfiles/</baseURL>
在“浏览服务器”或上传图片时，会自动生成定义的这个目录，并在目录下生成4个文件夹_thumbs、files、flash、images
这里路径的读取就在config.xml中的最后一个标签<basePathBuilderImpl>com.ckfinder.connector.configuration.ConfigurationPathBuilder</basePathBuilderImpl>
是通过这里定义的这个类去读取的，这个类在ckfinder的jar包中，不过可以在下载的ckfinder_java_2.3.1.zip压缩包解压文件夹中找到(_sources\CKFinder for Java\CKFinder\src\main\java\com\ckfinder\connector\configuration\ConfigurationPathBuilder.java)
1)、将ConfigurationPathBuilder.java文件copy到自己项目里(例：utils/ConfigurationPathBuilder.java )
在ConfigurationPathBuilder.java类中，有个public String getBaseUrl(final HttpServletRequest request) {...}方法，其中就定义了路径的获取String baseURL = conf.getBaseURL();，这里的baseURL就是config.xml中配置的路径，你就可以在这里进行动态修改了。
（例String baseURL = conf.getBaseURL()+user.getId()+"/";在文件上传路径中加了一层用户id命令的路径）
2)、将config.xml中的<basePathBuilderImpl>com.ckfinder.connector.configuration.ConfigurationPathBuilder</basePathBuilderImpl> 改为1)中你修改的文件路径(例：.....utils.CKFinderConfigurationPathBuilder)
CKEditor+CKFinder+jsp配置
猜你喜欢
转载自lzl.iteye.com/blog/2073014
今日推荐
周排行