CKEditor and Ckfinder integrated JSP pages

The first contact with the Rich Text editor is a very old version of CKEditor later contacted the Baidu Ueditor used for a period of time and later used the Wangeditor (easy to use) This period of time to see others source code when found Ckfinder from yesterday Find articles online Compare 5 6 articles each time is stuck in the Ckfinder view file error Today, I looked at the relevant information on the Internet to solve this problem first look at

Preparatory work:

1. Download CKEditor and Ckfinder

CKEditor

Http://ckeditor.com/download

Ckfinder

Https://cksource.com/ckfinder/download

2. Create a project

3.1 will download after decompression CKEditor Introduction project

3.2 will download after decompression Ckfinder Introduction Project

Renaming the CKEditor and Ckfinder folders is not recommended. can be ckeditor samples directory and changes.md,readme.md, and License.md deleted, will ckfinder _samples directory, Changelog.txt,install.txt and License.txt deleted.

4.2 Introduction of CKEditor js file

<script type= "Text/javascript" src= "${ctxp}ckeditor/ckeditor.js" ></script>

4.2.1 Create a textarea

<form><!--a textarea--><textarea name= "Editor1" id= "Editor1" rows= "ten" cols= "" "> This is                my TextArea to is replaced with CKEditor.        </textarea></form>

4.2.2 through CKEditor to operate the textarea

<script type= "Text/javascript" >ckeditor.replace (' editor1 ');</script>

4.1 Introduction of Ckfinder js file

<script type= "Text/javascript" src= "${ctxp}ckfinder/ckfinder.js" ></script>

4.1.2 using CKEditor to operate editor

<span style= "FONT-FAMILY:SIMHEI;FONT-SIZE:14PX;" ><script type= "Text/javascript" >var editor = ckeditor.replace (' editor1 '); Ckfinder.setupckeditor (editor, ' ${ctxp}ckfinder/');</script></span>

JSP full code

<%@ page language= "java" contenttype= "text/html; Charset=utf-8 "pageencoding=" UTF-8 "%><%@ include file="/web-inf/include/taglib.jsp "%>


Integrating CKEditor and Ckfinder

Modify CONFIG. xml into Project Web-inf name to Ckfinder.xml at the end of Web. config with the following configuration
<!--=================ckeditor+ckfinder image upload function ===================--><!--ckfinder--><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/ckfinder.xml< /param-value></init-param><init-param><param-name>debug</param-name><param-value >true</param-value></init-param><load-on-startup>1</load-on-startup></servlet ><servlet-mapping><servlet-name>ConnectorServlet</servlet-name><url-pattern>/static /plugins/ckfinder/core/connector/java/connector.java &LT;/URL-PATTERN&GT;&LT;/SERVLET-MAPPING&GT;<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>/static/plugins/ckfinder/core/connector/java/connector.java </url-pattern ></filter-mapping>


note the corresponding relationship


Import the required jar packages into the project using MAVEN here
<!--CKEditor--><dependency><groupid>com.ckeditor</groupid><artifactid> ckeditor-java-core</artifactid><version>3.5.3</version></dependency><!--CKFinder Begin--><dependency><groupid>net.coobird</groupid><artifactid>thumbnailator</ Artifactid><version>0.4.2</version></dependency><dependency><groupid> Com.ckfinder</groupid><artifactid>apache-ant-zip</artifactid><version>2.3</version ></dependency><dependency><groupid>com.ckfinder</groupid><artifactid>ckfinder </artifactId><version>2.3</version></dependency><dependency><groupId> com.ckfinder</groupid><artifactid>ckfinderplugin-fileeditor</artifactid><version>2.3 </version></dependency><dependency><groupid>com.ckfinder</groupid><artifactid >ckfinderplugin-imageresize</artifactid><version>2.3</version></dependency><!--Ckfinder End--- 


Precautions
Ckfinder.xml
Set the first child label enabled under the Config label to True
<enabled>true</enabled>


The default configuration is to change the file storage path to our address.
<baseURL>/userfiles/</baseURL>


Complete operation run

CKEditor and Ckfinder integrated JSP pages