您的位置：首页 > 运维架构 > 网站架构

网站整合CKEditor和CKFinder(Java版)

2015-12-04 23:42 537 查看

准备文件

CKEditor: 在 http://ckeditor.com/download ，可以下载到各种版本的CKEditor，包括完整版full、标准版standard、基础版basic等。同时也可定制的下载，可以选择Toolbar类型、插件、语言等。



CKEditor for java: 在http://ckeditor.com/download 页面右侧下部，可以下载到用于服务器端的工具，记得选择for java版本。



CKFinder: 在 http://cksource.com/ckfinder/trial 页面，可以下载到各种版本的CKFinder。仍然选择java版。这里我们下载的是2.3.1版本，下载后得到CKFinder_java_2.3.1.zip。



下载文件地址

下载ckeditor

下载ckfinder、

你也可以在我的百度云上下载。

链接：百度云盘下载 密码：5nmy

下载完资源后，你需要有如下资源



其中前三个是ckeditor，你只有一个就行，第一个是基础版(base)，第二个是完整版，第三个是标准版(standard)。

后面的那个ckeditor-java-core这个里面解压出来是jar文件，引入我们的web项目就行了。

最后一个是ckfinder，这个是涉及文件上传的。如果不需要文件上传功能，可以不需要这个。

整合ckeditor

首先做的是整合ckeditor。解压下载的ckeditor_4.5.5_standard，当然你也可以选择其他的版本。如full或者basic。这里我就讲标准版。

解压后的目录结构是:

ckeditor_4.4.5_standard
|--ckeditor
|--一大堆文件




注意啦！把ckeditor4.5.5_starnard文件夹下的ckeditor复制到你的web项目根目录，即MyEclipse的WebRoot文件下面

如图所示



现在可以测试一下ckeditor是否整合成功了。没错就是这么简单。

http://localhost:8080/项目名称/ckeditor/samples/index.html

不过盲目拷贝我的url测试的话，可能失败。在ckeditor文件夹下有samples文件夹，里面都是测试页面。下面是访问url后显示的页面，可以看到，Congratulation，说明成功了。



接下来，怎么将编辑器整合到我的文本编辑器里。这个其实也很简单。

首先，我在index.jsp中操作，在里面添加一个textarea

<body>
<h1>整合ckeditor+ckfinder</h1>
文本框:<br/>
<textarea rows="5" cols="30" ></textarea>
</body>


页面效果是这样的。丑到不行。



好啦，引入ckeditor.js这个重要的文件。

<script type="text/javascript" src="ckeditor/ckeditor.js"></script>


引入之后，在jsp页面，添加一段脚本

<body>
<h1>整合ckeditor+ckfinder</h1>
文本框:<br/>
<textarea name="myeditor" rows="5" cols="30" ></textarea>
<!--替换-->
<script type="text/javascript">
CKEDITOR.replace('myeditor');
</script>
</body>


只不过我这样做不是很好，建议像下面这样做

<script type="text/javascript">
window.onload=function(){
CKEDITOR.replace('myeditor');
}
</script>


下面这里是效果图。



可是当我们点击上传图片却是没有上传图片的按钮。



上传图片需要小米这个ckfinder

整合ckfinder

引入ckeditor-java-core-3.5.3.jar

解压ckeditor-java-core-3.5.3.zip得到ckeditor-java-core-3.5.3.jar文件，版本号不一样没关系。将ckeditor-java-core-3.5.3.jar放到WEB-INF文件夹下的lib，也就是在项目中引入这个jar文件，这个jia文件是ckeditor与ckfinder的中间文件。引入即可。

引入ckfinder

解压ckfinder_java_2.5.1，在文件夹中找到CKFinderJava-2.5.1.war这个war包，解压得到



把ckfinder复制到你的webroot，项目根目录下



打开解压的CKFinderJava-2.5.1.war的目录，打开WEB-INF



看到很多重要的文件，这里我们需要config.xml，直接复制到项目的web-inf下。然后打开config.xml

修改下面这个为true，还有BaseURL要改成像我提供的这种格式。

<enabled>true</enabled>

<baseURL>http://localhost:8080/CKProject/userfiles/</baseURL>


把lib文件夹下的jar包复制到你的项目的lib文件夹下

打开上一步文件夹中的web.xml

复制里面的这一段到你的项目的web.xml下

<servlet>
<servlet-name>ConnectorServlet</servlet-name>
<servlet-class>com.ckfinder.connector.ConnectorServlet</servlet-class>
<init-param>
<description>
Path to configuration file can be relative path inside application,
absolute path on local file system or UNC path.
</description>
<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>
<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>
<session-config>
<session-timeout>10</session-timeout>
</session-config>


6.配置到了这里基本OK了，测试一下。按照我给你的url

http://localhost:8080/CKProject/ckfinder/_samples/standalone_v1.html,

自己找一下你自己的url怎么制定。如果直接拷贝我的代码，除非你的的项目名为CKProject而且端口是8080,才能够访问到。

如果你能够看到这个，并且没有报错，而且可以上传文件。恭喜你，前面的配置没有出错。



最终配置

打开ckeditor下的config.js文件的function(config{})里面，记住，一定不能错。

CKEDITOR.editorConfig = function( config ) {
/**....*/
}


写上这部分内容，当然url需要按照需求修改。后面3个的url参照web.xml中指定监听器映射的URL，因为其指定的java是在文件系统中找不到的

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';




至此，我们已经完成了所有配置。

常见问题

如果说没有办法上传图片，但是可以上传zip压缩文件，那么很可能是Struts2也把.jpg结尾的文件给拦截了。解决办法是将映射路径改成
*
.do和 
*
.jsp

<filter>
<filter-name>struts2</filter-name>
<filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>*.do</url-pattern>
<url-pattern>*.jsp</url-pattern>
</filter-mapping>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航