How to integrate Ckeditor+ckfinder to implement file upload in JSP

Source: Internet
Author: User

Recently I made a news release platform, gave up the previous FCKeditor editor, using the Ckeditor+ckfinder, although the free Ckfinder is the demo version, but the function is complete, and users are more focused on the spirit of the news people, will not care about this. The author uses the version is: ckeditor3.5.3+ckfinder2.0.2, today I tidied up the configuration CKEditor and Ckfinder process, and need to pay attention to some of the issues, I hope to help you.

First: Download CKEditor and Ckfinder related installation files

1, on the CKEditor official website http://ckeditor.com/download download CKEditor for Java 3.5.3 War package, which contains the relevant jar, script and examples.

2, in Ckfinder official website http://ckfinder.com/download Download Ckfinder_java_2.0.2.zip Compressed package (Note Select the compression package under the Java platform).

3, decompression CKEditor for Java 3.5.3 War, the extracted directory CKEditor completely copied to the site root directory, that is, and web-inf sibling. You can add a version number to this directory, that is, ckeditor3.5.3. The ckeditor3.5.3/samples completely deleted, the Ckeditor3.5.3/lang inside except En.js and zh-cn.js outside the document deleted, ckeditor3.5.3 under the readme.md, changes.md deleted. Put the Ckeditor-java-core-3.5.3.jar under the project/web-inf/lib.

4, decompression ckfinder_java_2.3.1.zip, get Ckfinder directory. Copy the Ckfinder/ckfinderjava/ckfinder directory completely to the root of the Web site, that is, web-inf sibling. You can add a version number to this directory, that is, ckfinder2.0.2. Refer to the configuration in the Ckfinderjava, add the Ckfinder config file under the Web-inf path (config. config files in the Ckfinderjava folder directly to the project, you can modify it slightly).

Second: Configure CKEditor

You can change the default configuration of CKEditor by editing config.js under the CKEditor folder, or you can create an instance of Ckeditorconfig on the page to add or overwrite the configuration in Config.js.

Config.js

Page Configuration ckeditor.jsp:

Third: Integrating CKEditor and Ckfinder

has just been configured to CKEditor, but there is a problem is to support the version of JSP CKEditor general default does not have the image upload function, now need to just ckfinder to implement the image upload function.

1. Add the configuration of reference Ckfinder in CKEditor configuration file config.js.

2. Modify the CONFIG. ckfinder file

3. Add a servlet that supports Ckfinder in Web. xml

4. Reference example Create page ckfinder.jsp

Effect

At this point, ckeditor3.5.3+ckfinder2.0.2 integration success, engineering structure

Source code: Source Download

How to integrate Ckeditor+ckfinder to implement file upload in JSP

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: info-contact@alibabacloud.com 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.