最近项目需要做富文本编辑器,采用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的整理
### 关于JSP中ckeditor+ckfinder的知识点详解 #### 一、ckeditor与ckfinder简介 ckeditor是一款非常流行的开源富文本编辑器,广泛应用于各种Web应用程序中,它提供了丰富的文本编辑功能,如字体格式化、颜色选择、...
jsp实现ckeditor+ckfinder完成上传图片, 上传后出现图片路径/NewsImages/...请删除前面第一个/否则无法插入图片
### jsp中ckeditor+ckfinder整合详解 #### 一、背景与需求 在进行Web开发时,经常需要处理用户输入的富文本编辑器中的内容,包括但不限于文本编辑、图片上传、文档上传等功能。传统的FCKeditor虽能满足部分需求,...
3. **集成CKFinder**:配置CKFinder以连接到CKEditor。这通常涉及创建一个CKFinder的配置对象,并将其作为CKEditor的filebrowserBrowseUrl和filebrowserUploadUrl属性: ```javascript CKEDITOR.config....
2. **配置CKEditor**:在JSP页面中,通过JavaScript代码初始化CKEditor实例,指定编辑器的ID和配置项。例如,你可以设置CKEditor的宽度、高度,以及是否启用CKFinder。 3. **集成CKFinder**:在CKEditor的配置中,...
### jsp中ckeditor+ckfinder整合详解 #### 一、前言 在现代网页开发中,富文本编辑器因其强大的编辑功能而被广泛应用于各种场景之中。其中,ckeditor是一款非常流行的开源富文本编辑器,而ckfinder则是一款优秀的...
4. 在JSP页面中插入CKEditor,并配置CKFinder的路径,以便在编辑器中唤起文件管理器。 5. 在服务器端编写处理文件上传、删除等操作的代码,确保与CKFinder的接口匹配。 6. 测试编辑器功能,包括文本编辑、图片上传、...
在Ckeditor的配置文件(通常是`config.js`)中,设置图片浏览器和文件浏览器的URL为ckFinder的URL,例如: ```javascript CKEDITOR.editorConfig = function( config ) { config.filebrowserBrowseUrl = '...
百分百最简单配置,无垃圾污染代码 ckfinder 版本为2.0,2 ckeditor 版本为3.6 最新版本,jsp整合,后台servlet,javabean,编辑器带上传图片功能。 不足之处:如果上传的资源是中文,前端引用会乱码。 开发环境,...
默认配置:myeclipse默认编码方式+myeclipse自带tomcat 图片上传:点击“图片”按钮,然后选择”上传“,选择图片文件之后,再点击“上传到服务器”,即可在“图像”标签栏显示预览图像,可以在此调整尺寸大小等...
3. **配置CKFinder与CKEditor**:在CKEditor的配置中,设置CKFinder的路径,使编辑器能够调用CKFinder的文件选择接口。 4. **测试与调试**:完成配置后,通过CKEditor中的“插入图像”或“媒体”按钮,检查是否能...
ckfinder和ckeditor的整合,ckfinder没有批量上传图片,我加了一个小图标,实现批量上传。网上很少java版的两个整合,自己写了个。不过有个小问题,忙着也没时间去看下,IE下上传图片报找不到路径,大家看看改下哪就...
- **启动服务器**,并访问包含CKEditor与CKFinder的JSP页面。 - **尝试上传图片**,检查图片是否能够成功上传并显示在CKEditor编辑区域中。 - **检查日志文件**,查看是否有错误或异常信息,以便定位问题。 #### 5....
接着,在JSP页面中通过JavaScript代码实例化ckeditor,并配置ckfinder为其文件浏览器。这样,当用户在ckeditor中点击“插入图片”或“插入链接”时,ckfinder会弹出,用户可以选择本地文件进行上传。 文件上传功能...
完成上述配置后,就可以在JSP页面中调用ckeditor与ckfinder了。通常的做法是在JSP页面中引入ckeditor相关的JavaScript和CSS文件,并设置好必要的参数,例如指定ckfinder的路径等。这样就可以实现在JSP页面中使用...
#### 知识点二:整合CKEditor与CKFinder for Java环境配置 - **开发工具**:Eclipse 3.7.0,这是一种流行的Java集成开发环境(IDE),支持多种插件扩展,便于开发人员进行Java项目的开发和调试。 - **服务器**:...
我到网上找了ckeditor和ckfinder实现上传的 都是出问题的 要么都是文档 也出问题 一大批乱七八糟的文档 让自己配 看着头疼,想想以后自己也用 所以就研究了一个星期 终于把他们集成在一起 实现编辑器 全部功能完美...
在本文中,我们将深入探讨如何配置`ckeditor_java_3.5.3`和`ckfinder_java_2.0.2`这两个工具,以便在Java Web应用程序中实现富文本编辑功能和图片、文件管理。`CKEditor`是一款强大的JavaScript富文本编辑器,而`...