Ckeditor3.6.5 + ckfinder2.0.2 + JSP editor configuration supports Server browsing/uploading of images, flash

I. I believe that many people have used the well-known FCKeditor. The latest ckeditor is coming out, which is confusing. on the official website, I found that FCKeditor was renamed ckeditor after version 2.6, this is especially explained here to avoid confusion, because most of the articles found on the Internet are related to FCKeditor configurations.

Ii. FCKeditor has the Java version configuration. I believe some of them have been used in the same industry. It supports PHP, Asp.net, and Java versions and is now ckeditor. The simple editor is easy to configure. I don't want to talk about it here. Most people want to use the Browse/Insert image function in the editor. After all, there is no picture in the news. Of course, we can also create an upload function and copy the URL address to insert it into the URL. However, the customer operation is too difficult.

3. Here we will introduce the solution. We can see a buddy's article saying that ckeditor has removed the built-in upload function and needs to modify several attributes in the config. js file.

Config. filebrowserbrowseurl = '/JS/ckfinder/ckfinder.htm ';
Config. filebrowserimagebrowseurl = '/JS/ckfinder/ckfinder.htm? Type = images ';
Config. filebrowserflashbrowseurl = '/JS/ckfinder/ckfinder.htm? Type = flash ';
Config. filebrowseruploadurl = '/JS/ckfinder/CORE/connector/Java/connector. Java? Command = quickupload & type = files ';
Config. filebrowserimageuploadurl = '/JS/ckfinder/CORE/connector/Java/connector. Java? Command = quickupload & type = images ';
Config. filebrowserflashuploadurl = '/JS/ckfinder/CORE/connector/Java/connector. Java? Command = quickupload & type = flash ';

I need to write this method for uploading attachments and browsing server files by myself. This guy did write it by himself. Unfortunately, only part of the code is provided. Although writing and uploading files and browsing folders by yourself is not difficult, it is difficult and time-consuming.

4. So I had a chance to be lucky and lazy, and then Google a few times. I found that a keyword frequently appeared: cdeditor + ckfinder followed by Asp.net PHP. As a result, I was not convinced that Java was not supported? Ckfinder is not specifically tailored for Asp.net, right? So I carefully looked at cdeditor's official website and clicked the ckfinder link to find that ckfinder has multiple language versions (PHP, Asp.net, etc)
Java is supported only after version 2.0.2. No wonder there are very few articles about cdeditor3.6.5 + ckfinder2.0.2 + JSP configuration,

Here is a convenient address for you to download:

Http://ckeditor.com/download

Http://ckfinder.com/download pay attention to version 2.0.2 and above to support Java (charged)

 

Paste the code first!

Click Insert image icon

Browse/upload image window

 

 

Integration steps: (Note that the red font is echo)

1. Decompress ckeditor-java-3.6.2.rarand ckfinder_java_2.0.2.zip. Two header files are introduced in the JSP header.

<SCRIPT type = "text/JavaScript" src = "$ {base}/JS/ckeditor. js"> </SCRIPT>
<SCRIPT type = "text/JavaScript" src = "$ {base}/JS/ckfinder. js"> </SCRIPT>

 

2. Add it to Web. xml. Note that if ckfinder version 2.0.2 is used, make sure that the servlet class name is different!

<! -- Start from integrating ckeditor and ckfinder to upload images --> <servlet-Name> connectorservlet </servlet-Name> <servlet-class> COM. ckfinder. connector. connectorservlet </Servlets-class> <init-param> <param-Name> xmlconfig </param-Name> <param-value>/WEB-INF/ckfinder-config.xml </param-value> </init-param> <param-Name> debug </param-Name> <param-value> false </param-value> </init-param> <load-on-startup> 1 </load-on-startup> </servle T> <servlet-mapping> <servlet-Name> connectorservlet </servlet-Name> <URL-pattern>/JS/ckfinder/CORE/connector/Java/connector. java </url-pattern> </servlet-mapping> <! -- Ckeditor and ckfinder are integrated to upload an image. -->

3 In the Build File WEB-INF/ckfinder-config.xml content is as follows (the red upload/ckfinder/Represents the path in the project, you can compare to eclipse

<config><enabled>true</enabled><baseDir></baseDir><baseURL>upload/ckfinder/</baseURL><licenseKey></licenseKey><licenseName></licenseName>1600</imgWidth>1200</imgHeight>80</imgQuality><uriEncoding>UTF-8</uriEncoding><forceASCII>false</forceASCII><userRoleSessionVar>CKFinder_UserRole</userRoleSessionVar><checkDoubleExtension>true</checkDoubleExtension><checkSizeAfterScaling>true</checkSizeAfterScaling><secureImageUploads>true</secureImageUploads>
Directory structure

 
4. modify the content in/JS/ckeditor/config. js as follows:
Ckeditor. editorconfig = function (config) {config. pastefromwordignorefontface = true; config. language = 'zh-cn'; config. uicolor = '# aadc6e'; config. entermode = ckeditor. enter_div; config. shiftentermode = ckeditor. BR; config. skin = 'office2003 '; config. extraplugins = 'autogrow'; config. resize_maxheight = 1000; config. resize_maxwidth = 960; // change the maximum width of the config. resize_minheight = 250; // change the minimum size of the config. resize_minwidth = 750; // change the minimum width of the config. toolbar = ['/', ['preview', 'Cut ', 'copy', 'paste', 'pastefromword', 'print ', 'undo', 'redo ', 'Find ', 'removeformat', 'bold', 'italic ', 'underline', 'strike','-', 'numberedlist', 'bulletedlist'], ['justifyleft', 'justifycenter', 'justifyright', 'justifyfull', '-', 'image', 'table', 'horizontalrule', 'smilily'], ['styles ', 'format', 'font', 'fontsize'],]; config. filebrowserbrowseurl = '/JS/ckfinder/ckfin Der.html '; config. filebrowserimagebrowseurl ='/JS/ckfinder/ckfinder.html? Type = images '; config. filebrowserflashbrowseurl ='/JS/ckfinder/ckfinder.html? Type = flash '; config. filebrowseruploadurl ='/JS/ckfinder/CORE/connector/Java/connector. Java? Command = quickupload & type = files '; config. filebrowserimageuploadurl ='/JS/ckfinder/CORE/connector/Java/connector. Java? Command = quickupload & type = images '; config. filebrowserflashuploadurl ='/JS/ckfinder/CORE/connector/Java/connector. Java? Command = quickupload & type = flash '; config. filebrowser1_wwidth = '000000'; config. filebrowser1_wheight = '000000 ';};
 
5 copy the jar package to the WEB-INF/lib (the two compressed files posted above are extracted after some
CKFinder-2.0.2.jar
CKFinderPlugin-FileEditor-2.0.2.jar
CKFinderPlugin-ImageResize-2.0.2.jar
Thumbnailator-0.3.3.jar
Commons-fileupload-1.2.2.jar
Commons-io-2.0.1.jar
 
6. write code on the JSP page:
<SCRIPT type = "text/JavaScript" src = "$ {base}/JS/ckeditor. js"> </SCRIPT>
<SCRIPT type = "text/JavaScript" src = "$ {base}/JS/ckfinder. js"> </SCRIPT>
<Textarea id = "content" name = "content"> </textarea>
<SCRIPT type = "text/JavaScript">
Ckeditor. Replace ('content', {Height: 350}); // you can specify the height of the editor.
</SCRIPT>
This is all done. The three above are running! For detailed configuration properties, please refer to online materials, are in the ckfinder-config.xml, you can control the type, size of the file to be uploaded, whether to delete, whether to create subfolders and so on.