ckeditor4.5.11+ckfinder_java2.6.2 Configuration

http://blog.csdn.net/skyman1942/article/details/52537100

1. Environment Description:

Date: 2016-09-14

Tool: ckeditor_4.5.11+ckfinder_java_2.6.2

Environment: i5-3210m,8g DDR3,WIN10 x64,jdk1.8 x64

Development tools: Eclipse Neon x64 (the Web plugin that may be used is not mentioned here)

2. Tool Pack:

Ckeditor_4.5.11_full.zip,ckfinder_java_2.6.2.zip,ckeditor-java-core-3.5.3.zip, three compressed packages can be downloaded to the official website.

3. Introduction of tools to Web Engineering (1) CKEditor

Ckeditor_4.5.11_full.zip Extract the CKEditor directory, which is structured as follows: Copy the CKEditor to the Web project WebContent directory

(4) Ckfinder

Ckfinder_java_2.6.2.zip Decompression, get the directory there is a Ckfinderjava-2.6.2.war, unzip the war into a directory, its structure is as follows: Copy the Ckfinder directory to the Web project WEBC ontent directory, copy CONFIG. xml under the Web-inf directory into the webcontent/web-inf/directory under the WEB project and rename it to Ckfinder.xml to differentiate between the others

(5) Jar Package Introduction

1) in step (4) in the War decompression directory, all jar packages under the Web-inf/lib directory are copied to the Webcontent/web-inf/lib directory of the WEB project; 2) Ckeditor-java-core-3.5.3.zip Unzip to get a directory that Ckeditor-java-core-3.5.3.jar copied to the WEB project's Webcontent/web-inf/lib directory. Here, Web engineering webcontent directory structure such as:

(6) Toolkit refinement (in engineering)

CKEditor:

The lang directory holds internationalized files, usually only en.js and zh-cn.js;

Samples directory is the instance, delete the directory;

3 md suffix for file deletion.

Ckfinder:

_samples directory deletion;

Help directory deletion;

Lang language files, reserved en.js and zh-cn.js;

4 txt text deleted.

(Note: Further refinement is possible, please refer to other tutorials)

4, Configuration CKEditor config.js file (in the project)

Open the Config.js in the CKEditor directory;

Here is a reference, where the configuration of the Ckfinder is required

[HTML]View Plain Copy

2. Ckeditor.editorconfig = Function (config) {
4. Define changes to the default configuration here. For example:
6. config.language = ' fr ';
8. Config.uicolor = ' #FF0000 ';
12. /*
14. config.toolbar_full = [
16. [' Source ', '-', ' Save ', ' NewPage ', ' Preview ', '-', ' Templates '],
18. [' Cut ', ' Copy ', ' Paste ', ' pastetext ', ' Pastefromword ', '-', ' Print ', ' spellchecker ', ' Scayt '],
20. [' Undo ', ' Redo ', '-', ' Find ', ' Replace ', '-', ' selectall ', ' Removeformat '],
22. [' Form ', ' Checkbox ', ' Radio ', ' TextField ', ' Textarea ', ' Select ', ' Button ', ' ImageButton ', ' HiddenField '],
24. ‘/‘,
26. [' Bold ', ' Italic ', ' underline ', ' Strike ', '-', ' subscript ', ' superscript '],
28. [' Numberedlist ', ' BulletedList ', '-', ' outdent ', ' Indent ', ' Blockquote '],
30. [' Justifyleft ', ' justifycenter ', ' justifyright ', ' Justifyblock '],
32. [' Link ', ' Unlink ', ' Anchor '],
34. [' Image ', ' Flash ', ' Table ', ' horizontalrule ', ' Smiley ', ' Specialchar ', ' pagebreak '],
36. ‘/‘,
38. [' Styles ', ' Format ', ' Font ', ' FontSize '],
40. [' TextColor ', ' BGColor ']
42. ];
44. */
46. Cancel edit box drag and Drop zoom
48. config.resize_enabled=false;
50. Filebrowserbrowseurl = '/ckfinder/ckfinder.html ';
52. Filebrowserimagebrowseurl = '/ckfinder/ckfinder.html?type=images ';
54. Filebrowserflashbrowseurl = '/ckfinder/ckfinder.html?type=flash ';
56. Filebrowseruploadurl = '/ckfinder/core/connector/java/connector.java?command=quickupload&type=files '  ;
58. Filebrowserimageuploadurl = '/ckfinder/core/connector/java/connector.java?command=quickupload&type=  Images ';
60. Filebrowserflashuploadurl = '/ckfinder/core/connector/java/connector.java?command=quickupload&type=  Flash ';
62. };

5, configuration Ckfinder.xml

Open the Ckfinder.xml in the Web-inf directory.

1) <enabled>true</enabled>,true means open cfinder.

2) <baseurl>http://localhost:8080/model2message/upload/</baseurl>, this tag specifies the directory where the file is uploaded,

Tomcat Server access address + project name + Receive folder + "/", I created a upload directory under the project's publishing path, so this is the access path.

3) User access rights are set under the Accesscontrols tab,

[HTML]View Plain Copy

2. <accesscontrols>
4. <AccessControl>
6. <role>*</role>
8. <resourcetype>*</resourcetype>
10. <folder>/</folder>
12. <folderview>true</folderview>
14. <foldercreate>true</foldercreate>
16. <folderrename>true</folderrename>
18. <folderdelete>false</folderdelete>
20. <fileview>true</fileview>
22. <fileUpload>true</fileUpload>
24. <filerename>true</filerename>
26. <filedelete>false</filedelete>
28. </AccessControl>
30. </accesscontrols>

6. Configure Web. xml

you can refer to Web. XML under the Web-inf directory in the Extract directory of the war in Step 3-(4)

.

[HTML]View Plain Copy

2. <servlet>
4. <servlet-name>connectorservlet</servlet-name>
6. <servlet-class>com.ckfinder.connector.connectorservlet</servlet-class>
8. <init-param>
10. <param-name>xmlconfig</param-name>
12. <span style="color: #ff0000;" ><param-value>/web-inf/ckfinder.xml</param-value><!- -ckfinder.xml is renamed CONFIG.</span>
14. </init-param>
16. <init-param>
18. <param-name>debug</param-name>
20. <param-value>false</param-value>
22. </init-param>
24. <load-on-startup>1</load-on-startup>
26. </servlet>
28. <servlet-mapping>
30. <servlet-name>connectorservlet</servlet-name>
32. <url-pattern>/ckfinder/core/connector/java/connector.java</url-pattern>
34. </servlet-mapping>

7. Use on JSP page

This is created using tags.

<%@ taglib uri= "http://ckeditor.com" prefix= "ce"%>
<%@ taglib uri= "Http://cksource.com/ckfinder" prefix= "CF"%>

Note that the Ckfinder label should be placed before the ckeditor tag.

<cf:setupckeditor editor= "ed1" basepath= "/model2message/ckfinder/"/>
<ce:editor editor= "ed1" basepath= "/model2message/ckeditor/" ></ce:editor>

Note: The above simple configuration, need to achieve more features, please refer to other tutorials, thank you message.

ckeditor4.5.11+ckfinder_java2.6.2 Configuration