CKEditor是新一代的FCKeditor,是一个重新开发的版本。CKEditor是全球最优秀的网页在线文字编辑器之一,因其惊人的性能与可扩展性而广泛的被运用于各大网站。
本篇文章主要介绍ckeditor_3.6.4+ckfinder_java_2.3
CKEditor下载地址:http://ckeditor.com/download 在线演示地址:http://ckeditor.com/demo
ckeditor-java-core-3.5.3.zip 下载地址:http://ckeditor.com/download
CKFinder下载地址: http://cksource.com/ckfinder/trial
1、解压ckeditor_3.6.4.zip,然后打开ckeditor文件夹,只需保留:images、lang、plugins、 skins、themes、ckeditor_basic.js、ckeditor.js、config.js、contents.css即可
其他的文件可以删除。然后将整个ckeditor放在web工程下,与WEB-INF处于同一级目录。
2、将ckeditor-java-core-3.5.3.zip解压,然后将ckeditor-java-core-3.5.3.jar包拷贝至web项目的lib下。
3、将ckfinder_java_2.3.zip解压,然后将CKFinderJava.war解压后,将WEB-INF里面的lib下面所有的 jar包拷贝至web项目的lib下,将ckfinder\_sources\CKFinder for Java\WebApp\src\main\webapp下的ckfinder文件夹拷贝至web工程下,与ckeditor保持同级,将其下的WEB- INF下面的config.xml文件拷贝至web项目的WEB-INF下,并根据自己的项目稍作调整即可,如下:
<config> <enabled>true</enabled> <!--注意:这里默认为false,必须修改为true--> <baseDir></baseDir> <!--此处空着,不建议填写任何值--> <baseURL>http://127.0.0.1:8088/sitenav/uploadFiles/</baseURL> <!---注意:必须改成自己项目的,不然上传图片找不到具体的网络路径--> <licenseKey></licenseKey> <licenseName></licenseName> <imgWidth>1600</imgWidth> <imgHeight>1200</imgHeight> <imgQuality>80</imgQuality> <uriEncoding>UTF-8</uriEncoding> ...... ...... </config>
4、然后在web.xml下添加上传用的配置如下:
<!-- ckfinder文件上传配置 start --> <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>2</load-on-startup> </servlet> <servlet-mapping> <servlet-name>ConnectorServlet</servlet-name> <url-pattern> /ckfinder/core/connector/java/connector.java </url-pattern> </servlet-mapping> <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> <!-- ckfinder文件上传配置 end -->
5、然后修改ckeditor下面的config.js,如下:
CKEDITOR.editorConfig = function( config ) { config.filebrowserBrowseUrl = '../ckfinder/ckfinder.html'; config.filebrowserImageBrowseUrl = '../ckfinder/ckfinder.html?type=Images'; config.filebrowserFlashBrowseUrl = '../ckfinder/ckfinder.html?type=Flash'; config.filebrowserUploadUrl = '/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files'; config.filebrowserImageUploadUrl = '/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images'; config.filebrowserFlashUploadUrl = '/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash' ; config.language = "zh-cn"; config.image_previewText=' '; //预览区域显示内容 config.skin = 'kama';//默认皮肤 //config.skin = 'v2'; //config.skin = 'office2003'; config.toolbar = 'Full'; config.toolbar_Full = [ ['Source','-','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','Blockquote'], ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'], ['Link','Unlink','Anchor'], ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'], '/', ['Styles','Format','Font','FontSize'], ['TextColor','BGColor'], ['Maximize', 'ShowBlocks','-','About'] ]; config.toolbar_Basic = [ ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About'] ]; };
6、然后就是CKEditor+CKFinder在jsp页面中应用,如下
a、在jsp文件中加入:
<%@ taglib uri = "http://ckfinder.com" prefix="ckf" %>
<%@ taglib uri="http://ckeditor.com" prefix="ck" %>
b、需要添加编辑组件如下编写
<s:textarea id="txt" name="company.txt" rows="5" cols="120"></s:textarea>
<ckf:setupCKEditor basePath="/sitenav/ckfinder/" editor="txt"/>
<!---注意:这里的sitenav为我的项目名称,请换成自己的项目名--->
<ck:replace replace="txt" basePath="${path}/ckeditor"></ck:replace>
<!---注意:这里的${path}需要自己定义一个,如:pageContext.setAttribute("path",request.getContextPath());--->
相关推荐
Ckeditor + ckfinder整合for JAVA(支持文件上传)
在jsp中整合ckeditor+ckfinder
jsp中ckeditor+ckfinder整合 希望大家一起学习一下。
CKEditor+CKFinder的jsp实例
jsp中ckeditor+ckfinder整合,
jsp实现ckeditor+ckfinder完成上传图片, 上传后出现图片路径/NewsImages/...请删除前面第一个/否则无法插入图片
JSP中CKEditor+CKFinder的整合 笔者找了很多资料 最后整理出来一个最简洁的方法来和大家分享 已经经过测试 可以运行 成功实现文件上传和浏览
ckfinder 版本为2.0,2 ckeditor 版本为3.6 最新版本,jsp整合,后台servlet,javabean,编辑器带上传图片功能。 不足之处:如果上传的资源是中文,前端引用会乱码。 开发环境,myeclipse,数据库 mysql
这是myeclipse工程,直接新建工程,导入工程就能运行。 默认配置:myeclipse默认编码方式+myeclipse自带tomcat 图片上传:点击“图片”按钮,然后选择”上传“,选择图片文件之后,... ... PS:其他功能请自己发现亮点。
整合了最新的ckeditor和ckfinder,实现文件的上传,这个是个例子,你可以在此基础上进行拓展,仅仅是jsp的。
ckfinder和ckeditor的整合,ckfinder没有批量上传图片,我加了一个小图标,实现批量上传。网上很少java版的两个整合,自己写了个。不过有个小问题,忙着也没时间去看下,IE下上传图片报找不到路径,大家看看改下哪就...
ckeditor与ckfinder(java版)整合详细流程 实现了图片的上传功能
JSP使用ckeditor和ckfinder实现富文本及文件上传,以及文本判空处理。
我到网上找了ckeditor和ckfinder实现上传的 都是出问题的 要么都是文档 也出问题 一大批乱七八糟的文档 让自己配 看着头疼,想想以后自己也用 所以就研究了一个星期 终于把他们集成在一起 实现编辑器 全部功能完美...
jsp环境下 ckEditor3.6.2集成ckFinder2.1
Eclipse下配置CKEditor3.5.3+CKFinder2.0.2 FCKeditor 使用详解 Ckeditor与ckfinder整合forJAVA(支持文件上传) jsp ckeditor使用 很全面哦!值得收藏
使用JSP实现在线编辑器,内容包括开发文档,配套源代码,ckeditor_4.1.1_full.zip和ckfinder_java_2.3.1.zip开发包。从如何下载开发包到实现CKeditor Ckfinder融合实现在线编辑器(代码已解决中文图片传输问题),...
jsp项目中使用了ckfinder+ckeditor,包括图片居中,视频上传等内容