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

所有需要引入的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 文本框为 ckeditorvar 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 文本框为 ckeditorvar editor = CKEDITOR.replace( 'editor' );//设置ckfinder与ckeditor整合//参数1 为Ckeditor对象//参数2 为设置ckfinder.html对应所存在的目录CKFinder.setupCKEditor(editor, 'ckfinder/');
});

4.1.5 效果示意图:到此为止基础的ckeditor与ckfinder的整合就完成了.

五. 与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.jsconfig.resize_enabled = false;//是否强制复制来的内容去除格式plugins/pastetext/plugin.jsconfig.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

Ckeditor+Ckfinder+Ext4 整合相关推荐

ckfinder php 配置,PHP中Ckeditor+Ckfinder配置图片上传功能_PHP教程
从标题来看我们知道Ckeditor不支持图片上传功能,它是需要一个组件Ckfinder才可以支持上传图片, 本文章就来详细的介绍了如何配置Ckeditor+Ckfinder实现图片上传的功能. 第一: ...
网络编辑器插件ckeditor+ckfinder配置
原帖地址另外一个去掉编辑器的下边栏在config.js中加入: config.removePlugins = 'elementspath'; config.resize_enabled = fa ...
ckeditor+ckfinder配置用法
ckeditor+ckfinder配置用法一.使用方法:1.在页面<head>中引入ckeditor核心文件ckeditor.js <script type="te ...
ckeditor+ckfinder配置
ckeditor+ckfinder配置用法一.使用方法: 1.在页面<head>中引入ckeditor核心文件ckeditor.js <script type=&q ...
使用Ckeditor+Ckfinder完成图片上传
在介绍CKEditor之前,首先要了解Fckeditor.FCKeditor是一个专门使用在网页上属于开放源代码的所见即所得文字编辑器,具有轻量化,安装配置的特点,能够和PHP.JavaScript. ...
ckeditor finder php,CKEDITOR CKFINDER的图片上传配置(C#/asp.net/php)
CKEDITOR+CKFINDER的图片上传配置(C#/asp教程.net/php教程) php keditor的代码全部重写,但里面没有了上传功能,只是一个纯粹的文件在线编辑器,如果需要上传图片,还 ...
CKEditor+CKFinder配置学习
CKEditor+CKFinder配置学习基于dotNetFramework环境, 解决方案部署在VS2010 + dotNetFramework4.0 [下载源码] 富文本编辑器学习,常见富文本编 ...
在ASP.NET项目中使用CKEditor +CKFinder实现图片上传功能
前言之前的项目中一直使用的是FCKeditor,昨天突然有个想法:为什么不试一下新的CKEditor呢?于是花了大半天的时间去学习它的用法,现在把我的学习过程与大家分享一下. 谈起FCKeditor ...
ckfinder java 源码_Ckeditor与Ckfinder(java)整合实现富媒体内容编辑(支持文件上传)
先来看一下最终的效果图一.编辑器界面二.上传图片界面一.安装包下载,我使用的安装包是ckfinder_java_2.3.zip和ckeditor_3.6.3.zip,这两个文件可以分别到 htt ...

Ckeditor+Ckfinder+Ext4 整合

Ckeditor+Ckfinder+Ext4 整合相关推荐

最新文章

热门文章