网站整合CKEditor和CKFinder(Java版)

来源：互联网发布：js给div设置id 编辑：程序博客网时间：2024/05/24 05:29

准备文件

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>

0 0