CKEditor and Ckfinder integrated JSP pages

Source: Internet
Author: User

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





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,, and 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/ &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/ </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--- 



Set the first child label enabled under the Config label to True


The default configuration is to change the file storage path to our address.


Complete operation run

CKEditor and Ckfinder integrated JSP pages

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.