Ckeditor+Ckfinder+Ext4 整合
@author:杨虹昌
原文地址:http://blog.csdn.net/yanghongchang_/article/details/12778695
时间:2013年10月15日
CSDN讨论组:https://code.csdn.net/groups/16406 期待你的加入.
各框架版本信息描述:
Ckeditor:
官网首页: http://ckeditor.com/
下载页面: http://ckeditor.com/download
框架压缩包下载地址:
http://download.cksource.com/CKEditor/CKEditor%20for%20Java/CKEditor%20for%20Java%203.6.4/ckeditor-java-3.6.4.war
Ckfinder:
官网首页: http://cksource.com/ckfinder
下载页面: http://cksource.com/ckfinder/download
框架压缩包下载地址:
http://download.cksource.com/CKFinder/CKFinder%20for%20Java/2.4/ckfinder_java_2.4.zip
Ext4版本: extjs-4.1.0 下载地址就不再描述.
一. 解压与部署
在这里用tomcat作为示例进行描述,其他服务器,按照自己的情况具体操作.
对应tomcat的安装以及使用就不再描述.
1.1 Ckeditor部署到tomcat
1.1.1 将下载的ckeditor-java-3.6.4.war文件放置到${tomcat_home}/webapps目录下.
1.1 Ckfinder部署到tomcat
1.1.1 将下载的ckfinder_java_2.4.zip文件加压,复制(ckfinder_java_2.4\ckfinder\
1.1.2 CKFinderJava-2.4.war)文件放置到${tomcat_home}/webapps目录下.
1.1 启动tomcat,对应的war包进行自解压.
一. 创建Web project 项目进行整合.
2.1创建初始Web Project,项目结构图如下:
二.整合ckeditor
2.2.1从tomcat webapps目录下找到解压后的文件夹”ckeditor-java-3.6.4”,复制
“ckeditor-java-3.6.4/ckeditor”文件夹到integration/WebContent 目录下.
2.2.2从tomcat webapps目录下找到解压后的文件夹”ckeditor-java-3.6.4”,复制
“ckeditor-java-3.6.4/ckeditor/WEB-INF/ lib/ ckeditor-java-core-3.5.3.jar”文件到
Integration/WebContent/WEB-INF/lib目录下:
2.3整合ckfinder
2.3.1 从tomcat webapps目录下找到解压后的文件夹”CKFinderJava-2.4”,复制
“CKFinderJava-2.4/ckfinder”文件夹到integration/ WebContent 目录下.
2.3.2从tomcat webapps目录下找到解压后的文件夹”CKFinderJava-2.4”,复制
“CKFinderJava-2.4\WEB-INF\lib”下所有jar包文件到Integration/WebContent/WEB-INF/lib目录下:
2.3.3从tomcat webapps目录下找到解压后的文件夹”CKFinderJava-2.4”,复制
“CKFinderJava-2.4\WEB-INF”目录下的”config.xml”和“web.xml”文件到Integration/WebContent/WEB-INF目录下 :
2.4整合好的项目结构:
三. 整合ckeditor与Ext4
示例文件:integration/WebContent/ckeditor_ckfinder.jsp
3.1注意:需要引入ckeditor.js
<script type="text/javascript"src="ckeditor/ckeditor.js"></script>
所有需要引入的js文件都在”util.jsp”
integration/WebContent/util.jsp 文件中包括Ext4,Ckfinder,Ckeditor对应js文件.
3.2代码片段:
Ext.onReady(function() {
var editForm = Ext.create('Ext.form.Panel', {
frame : true,
border : true,
region:'center',
height:500,
renderTo:document.body,
defaultType : 'textfield',
defaults : {
anchor : '100%'
},
items : [
{ //
xtype :'textareafield',
inputId:'editor',//这个这个是html中的id属性
name:'editor'
}
]
});
//替换textarea 文本框为 ckeditor
var editor = CKEDITOR.replace( 'editor' );
});
注意:不要重复替换,特别是在Ext的window中多次弹出窗体(新增,修改),不要每次进行都进行替换,
代码最终效果图如下:
四. 整合Ckfinder 与 Ckeditor
4.1配置服务器相关参数:
4.1.1 配置integration/WebContent/WEB-INF/config.xml
“<enabled>false</enabled>”标签值修改为“<enabled>true</enabled>”
“<baseURL>/CKFinderJava/userfiles/</baseURL>”修改为:
<baseURL>/integration/CKFinderJava/userfiles/</baseURL>
注意:此处的baseURL标签中的路径一定要带项目路径开头,否则在页面选择图片不能进行预览.
4.1.2配置integration/WebContent/WEB-INF/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>
</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
</url-pattern>
</servlet-mapping>
<!--ckfinder 文件上传配置 -->
<filter>
<filter-name>FileUploadFilter</filter-name>
<filter-class>com.ckfinder.connector.FileUploadFilter</filter-class>
<init-param>
<param-name>sessionCookieName</param-name>
<param-value>JSESSIONID</param-value>
</init-param>
<init-param>
<param-name>sessionParameterName</param-name>
<param-value>jsessionid</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>FileUploadFilter</filter-name>
<url-pattern>
/ckfinder/core/connector/java/connector.java
</url-pattern>
</filter-mapping>
4.1.3 导入ckfinder.js
注意:需要导入ckfinder.js
<scripttype="text/javascript"src="ckfinder/ckfinder.js"></script>
所有需要引入的js文件都在”util.jsp”
integration/WebContent/util.jsp 文件中包括Ext4,Ckfinder,Ckeditor对应js文件.
4.1.4 修改integration/WebContent/ckeditor_ckfinder.jsp 文件
代码片段如下所示:
Ext.onReady(function() {
var editForm = Ext.create('Ext.form.Panel', {
frame : true,
border : true,
region:'center',
height:500,
width:500,
renderTo:document.body,
defaultType : 'textfield',
defaults : {
anchor : '100%'
},
items : [
{ //
xtype :'textareafield',
inputId:'editor',//这个这个是html中的id属性
name:'editor'
}
]
});
//替换textarea 文本框为 ckeditor
var editor = CKEDITOR.replace( 'editor' );
//设置ckfinder与ckeditor整合
//参数1 为Ckeditor对象
//参数2 为设置ckfinder.html对应所存在的目录
CKFinder.setupCKEditor(editor, 'ckfinder/');
});
到此为止基础的ckeditor与ckfinder的整合就完成了.
4.1.5 效果示意图:
五. 与Ext4的一些相关问题设置
1. 将ckeditor替换到Ext.form.Panel放置到Ext.Window 的modal:true模态窗口下时选择图片被Ext.Window 遮住?
配置: integration\WebContent\ckeditor\config.js(示例文件)
添加 config.baseFloatZIndex = 19900; 代码到config函数中,设置z-index
integration\WebContent\ckeditor\config.js文件:
CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
//工具栏是否可以被收缩
config.toolbarCanCollapse = false;
// 取消 “拖拽以改变尺寸”功能 plugins/resize/plugin.js
config.resize_enabled = false;
//是否强制复制来的内容去除格式plugins/pastetext/plugin.js
config.forcePasteAsPlainText =false//不去除
//改变大小的最大高度
config.height = 280;
//改变大小的最大宽度
config.width=550;
config.baseFloatZIndex = 19900;
config.toolbar = 'Full';
config.toolbar_Full = [
['-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print','SpellChecker', 'Scayt'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select','Button', 'ImageButton', 'HiddenField'],
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
['TextColor','BGColor','Source','Blockquote'],
['Styles','Format','Font','FontSize']
];
};
源代码地址(CSDN代码托管平台):https://code.csdn.net/yhc13429826359/ckeditorplusckfinderplusext4/tree/master