读书人
栏目▼

Ckeditor+Ckfinder+Ext4 调整

发布时间： 2013-10-17 17:26:17 作者： rapoo

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

Ckeditor+Ckfinder+Ext4 调整

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

Ckeditor+Ckfinder+Ext4 调整

Ext4版本: extjs-4.1.0 下载地址就不再描述.

一. 解压与部署

在这里用tomcat作为示例进行描述,其他服务器,按照自己的情况具体操作.

对应tomcat的安装以及使用就不再描述.

1.1 Ckeditor部署到tomcat

1.1.1 将下载的ckeditor-java-3.6.4.war文件放置到${tomcat_home}/webapps目录下.

Ckeditor+Ckfinder+Ext4 调整

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目录下.

Ckeditor+Ckfinder+Ext4 调整

1.1 启动tomcat,对应的war包进行自解压.

一. 创建Web project 项目进行整合.

2.1创建初始Web Project,项目结构图如下:

Ckeditor+Ckfinder+Ext4 调整

二.整合ckeditor

2.2.1从tomcat webapps目录下找到解压后的文件夹”ckeditor-java-3.6.4”,复制

“ckeditor-java-3.6.4/ckeditor”文件夹到integration/WebContent 目录下.

Ckeditor+Ckfinder+Ext4 调整

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目录下:

Ckeditor+Ckfinder+Ext4 调整

2.3整合ckfinder

2.3.1 从tomcat webapps目录下找到解压后的文件夹”CKFinderJava-2.4”,复制

“CKFinderJava-2.4/ckfinder”文件夹到integration/ WebContent 目录下.

Ckeditor+Ckfinder+Ext4 调整

2.3.2从tomcat webapps目录下找到解压后的文件夹”CKFinderJava-2.4”,复制

“CKFinderJava-2.4\WEB-INF\lib”下所有jar包文件到Integration/WebContent/WEB-INF/lib目录下:

Ckeditor+Ckfinder+Ext4 调整

2.3.3从tomcat webapps目录下找到解压后的文件夹”CKFinderJava-2.4”,复制

“CKFinderJava-2.4\WEB-INF”目录下的”config.xml”和“web.xml”文件到Integration/WebContent/WEB-INF目录下 :

Ckeditor+Ckfinder+Ext4 调整

2.4整合好的项目结构:

Ckeditor+Ckfinder+Ext4 调整

三. 整合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中多次弹出窗体(新增,修改),不要每次进行都进行替换,

代码最终效果图如下:

Ckeditor+Ckfinder+Ext4 调整

四. 整合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 效果示意图:

Ckeditor+Ckfinder+Ext4 调整

五. 与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

读书人网 >编程

热点推荐

触屏版 | 电脑版

读书人网 m.reader8.net