CKEditor and Ckfinder (Java) integration for rich media content editing (supporting file uploads)

Let's take a look at the final

First, the editor interface

Second, upload the image interface

<!------------------------------------------------------->

One, install package download, I use the installation package is Ckfinder_java_2.3.zip and Ckeditor_3.6.3.zip, these two files can be separate to
Http://ckfinder.com/download and http://ckeditor.com/download Download, note that I use the development language is Java, so download cfinder need to choose the version is Ckfinder_ Java

Second, create a new dynamic WEB projects project in Eclipse, where the concrete steps are omitted;

Third, integrate CKEditor and Ckfinder;

1, decompression Ckeditor_3.6.3.zip, and then CKEditor folder all the WebContent root directory, modify the CKEditor directory under the Config.js file, the code is as follows:

Ckeditor.editorconfig =function(config) {//Define changes to the default configuration here. For example:    //config.language = ' fr ';  Config.uicolor = ' #AADC6E '; Configure default configurationConfig.language =' ZH-CN ';//Config language//config.uicolor = ' #FFF ';//Background color//config.width = 400;//width//config.height = 400;//height//confi G.skin = ' v2 ';    Editor skin style//Cancel "Drag to change Size" function//config.resize_enabled = false; Using the underlying toolbar    //Config.toolbar = "Basic";     //use the All-in toolbarConfig.toolbar ="Full";//Use the custom toolbar//Config.toolbar =//[//[' Source ', ' Preview ', '-'],//[' Cut ', ' Copy ', ' Paste ', ' Pastetext ', ' Pastefromword ',],    //[' Undo ', ' Redo ', '-', ' Find ', ' Replace ', '-', ' selectall ', ' Removeformat '],    //[' Image ', ' Flash ', ' Table ', ' horizontalrule ', ' Smiley ', Specialchar ', ' pagebreak '],      //'/',//[' Bold ', ' Italic ', ' underline ', '-', ' subscript ', ' superscript '],    //[' numberedlist ', ' BulletedList ', '-', ' outdent ', ' Indent ', ' Blockquote '],//[' Justifyleft ', ' justifycenter ',    ' Justifyright ', ' justifyblock '],//[' Link ', ' Unlink ', ' Anchor '],//'/',//[' Format ', ' Font ', ' FontSize '],    [' TextColor ', ' BGColor '],//[' Maximize ', ' showblocks ', '-', ' about ']//];    To integrate Ckfinder in CKEditor, note ckfinder path selection is correct. Config.filebrowserbrowseurl =' ckfinder/ckfinder.html ', Config.filebrowserimagebrowseurl=' Ckfinder/ckfinder.html?type=images ', Config.filebrowserflashbrowseurl=' Ckfinder/ckfinder.html?type=flash ', Config.filebrowseruploadurl=' Ckfinder/core/connector/java/connector.java?command=quickupload&type=files ', Config.filebrowserimageuploadurl=' Ckfinder/core/connector/java/connector.java?command=quickupload&type=images ', Config.filebrowserflashuploadurl=' Ckfinder/core/connector/java/connector.java?command=quickupload&type=flash ', Config.filebrowserwindowwidth=' + ', Config.filebrowserwindowheight=' the '; };

2, Decompression Ckfinder_java_2.3.zip, Unzip the Ckfinderjava.war in the Ckfinder directory, locate the Ckfinder folder, and copy it to the WebContent directory; In this step, the Simples directory and plugins/gallery/ Jquery.min.js will prompt an error, the Simples directory can be deleted directly, download the latest Jquery.min.js file to replace the original Jquery.min.js file, there will be no error prompts;

3. Integrate the jar package to copy the jar files from the war package extracted in the previous step to our own project, which is usually located in: Ckfinder\ckfinderjava\web-inf\lib , copy the jar file under this directory to the Lib folder in our project, and then copy the CONFIG. xml and web. Webcontent/web-inf to the corresponding location in our own project.

Open CONFIG.:<enabled>true</enabled> to the second line <enabled>false</enabled> change to the fourth line <baseURL>/CKFinderJava/userfiles/</baseURL> Switch to <baseURL>/CK/userfiles/</baseURL> Note: here CK is set according to the project name.

Iv. Create a new editor.jsp file under the WebContent directory;

<%@ Page Language="Java"ContentType="text/html; Charset=utf-8"pageencoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd "><HTML><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8"><Scripttype= "Text/javascript"src= "Ckeditor/ckeditor.js"></Script><Scripttype= "Text/javascript"src= "Ckfinder/ckfinder.js"></Script><Scripttype= "Text/javascript">    functiongetcontents () {varOeditor=CKEDITOR.instances.editor1; alert (Oeditor.getdata ()); }</Script><title>Edit Product Information</title></Head><Body>    <textareaID= "Editor1"name= "Editor1"class= "CKEditor"rows= " the"cols= "a">&nbsp;</textarea>    <inputonclick= "getcontents ();"type= "button"value= "Get Editor Contents (XHTML)" /></Body></HTML>

In the above JSP file, there is an editor and a button, the button is used to get the editor in the user edits added content, after obtaining the content, you can do the appropriate processing, such as saving content, or based on the content generated an HTML file, and so on;

Run the program and access editor.jsp to see the first editor interface at the beginning of the article;

V. Appendices

Remove some version information: open the ckfinder.js file below Ckfinder to find Add a hidden style on this tab style= ' display:none; ' ;

More features can be referenced in the installation package example program, to achieve personalized customization;

SOURCE Download: http://pan.baidu.com/s/1ntumme9 Password: ig2s