准备文件
- 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>