【学习笔记】Struts2整合CKeditor插件

一、配置环境

    环境：Eclipse Jee Oxygen，Tomcat9，jdk1.8，struts-2.3.34， ckeditor_4.9.2_full

二、创建项目

1.新建Dynamic Web Project
2.导入struts2的相关jar包
3.配置web.xml

<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>
<!-- 映射*.action而不是/* -->
<url-pattern>*.action</url-pattern>
</filter-mapping>

4.创建struts2.xml

三、配置CKeditor

（配置CKeditor由CKeditor和CKFinder两个模块四相互独立的，CKeditor是富文本编辑器的UI，CKFinder是处理CKeditor的文件上传）

1.解压ckeditor_4.9.2_full.zip到ckeditor_4.9.2_full

2.打开ckeditor_4.9.2_full，解压里面的ckfinder_java_2.6.2.1.zip到当前文件夹，解压【ckfinder】下的CKFinderJava-2.6.2.1.war

 

3.复制ckeditor到项目的WebContent目录下，复制ckfinder到项目WebContent下

         

4.导入ckfinder中的jar包

把ckeditor_4.9.2_full\ckfinder\CKFinderJava-2.6.2.1\WEB-INF\lib目录下的jar包（除去【commons-fileupload-1.2.2.jar】和【commons-io-2.0.1.jar】，因为struts2中已包含该jar包），最终项目的结构如下：

5.在web.xml中添加ckfinder的映射，直接复制ckfinder中的web.xml中的servlet到项目的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>
<session-config>
<session-timeout>10</session-timeout>
</session-config>

6.删除掉无关的内容

    

7.修改ckeditor的配置文件（在WebContent->ckeditor->config.js）

/**
 * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.html or http://ckeditor.com/license
 */
CKEDITOR.editorConfig = function( config ) {
 config.language = "zh-cn" ; 
 config.toolbar = 'Full';
    config.height = 300;
    config.image_previewText = " ";
 config.toolbarGroups = [
  { name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
  { name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] },
  { name: 'links' },
  { name: 'insert' },
  { name: 'forms' },
  { name: 'tools' },
  { name: 'document',	groups: [ 'mode', 'document', 'doctools' ] },
  { name: 'others' },
  '/',
  { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
  { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
  { name: 'styles' },
  { name: 'colors' },
  { name: 'about' }
 ];
 // Remove some buttons provided by the standard plugins, which are
 // not needed in the Standard(s) toolbar.
 config.removeButtons = 'Underline,Subscript,Superscript';
 // Set the most common block elements.
 config.format_tags = 'p;h1;h2;h3;pre';
 // Simplify the dialog windows.
 config.removeDialogTabs = 'image:advanced;link:advanced';
 // Struts2NCKeditor是项目名
    config.filebrowserBrowseUrl = '/Struts2NCKeditor/ckfinder/ckfinder.html' ;  
    config.filebrowserImageBrowseUrl = '/Struts2NCKeditor/ckfinder/ckfinder.html?type=Images' ;  
    config.filebrowserFlashBrowseUrl = '/Struts2NCKeditor/ckfinder/ckfinder.html?type=Flash' ;  
    config.filebrowserUploadUrl = '/Struts2NCKeditor/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files' ;  
    config.filebrowserImageUploadUrl = '/Struts2NCKeditor/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images' ;  
    config.filebrowserFlashUploadUrl = '/Struts2NCKeditor/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash' ;  
    config.filebrowserWindowWidth = '1000';  
    config.filebrowserWindowHeight = '700';  
    config.language = "zh-cn" ;  

};

8.把ckeditor_4.9.2_full\ckfinder\CKFinderJava-2.6.2.1\WEB-INF下的config.xml复制到项目的WebContent->WEB-INF目录下面，并且修改config.xml的内容

25行设置为true
28行baseURL设置为/项目名/userfiles/，也可以设置为其他的，这个属性设置富文本编辑器上传文件到所在的目录
设置好之后如下

四、通过以上配置已经可以使用ckeditor了，直接在HTML的<testarea>中class

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%  
String path = request.getContextPath();  
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<script type="text/javascript" src="<%=path %>/ckeditor/ckeditor.js"></script>
	<script type="text/javascript" src="<%=path %>/ckfinder/ckfinder.js"></script>
<title>富文本编辑器使用</title>
</head>
<body>
	<h3>富文本编辑器使用</h3>
	<hr>
	<form action="" method="post">
   		<textarea rows="10" cols="80" id="editor" name="editor"
   			class="ckeditor">请输入...</textarea>
   		<input type="submit" value="保存">	
   	</form>
</body>
</html>

（上面只是简单的富文本编辑器，并没有把数据提交到后台，等有空再写后面的了。如果想看后面的，可以去慕课网学习课程《Java中的文件上传下载》）

大功告成！！！