Ckeditor and Ckfinder (java) are integrated to implement rich media content editing (File Upload is supported) and ckeditorckfinder

Ckeditor and Ckfinder (java) are integrated to implement rich media content editing (File Upload is supported) and ckeditorckfinder

Let's take a look at the final

I. Editor interface

Ii. Image Upload Interface

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

One installation package downloads. The package I use is ckfinder_java_2.3.zipand ckeditor_3.6.3.zip.
Bytes;

2. Create a Dynamic Web Project in Eclipse. The specific steps are omitted here;

3. Integrate Ckeditor and Ckfinder;

1. Decompress ckeditor_3.6.3.zip, test all the ckeditor folders in the WebContent root directory, and modify the config. js file in the ckeditor directory. The Code is as follows:

CKEDITOR. editorConfig = function (config) {// Define changes to default configuration here. for example: // config. language = 'Fr '; // config. uiColor = '# AADC6E'; // configure config by default. language = 'zh-cn'; // configuration language // config. uiColor = '# fff'; // background color // config. width = 400; // width // config. height = 400; // height // config. skin = 'v2'; // editor skin style // cancel the "drag to change size" function // config. resize_enabled = false; // use the basic toolbar // co Nfig. toolbar = "Basic"; // use the all-around toolbar config. 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'], // ['numberlist', 'bulletedlist', '-', 'outdent ', 'indent', 'blockquote'], // ['justifyleft', 'justifycenter', 'justifyright', 'justifyblock'], // ['link', 'unlink', 'anchor '], // '/', // ['format', 'font', 'fontsize'], // ['textcolor', 'bgcolor'], // ['delimiter', 'showbucket', '-', 'about'] //]; // integrate CKFinder in CKEditor. Note that the ckfinder path should be correctly selected. 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. filebrowser1_wwidth = '000000', config. filebrowser1_wheight = '000000 ';};

2. Decompress ckfinder_java_2.3.zip and copy CKFinderJava in the ckfinder directory. decompress war, find 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. just delete the simples directory and download the latest jquery. min. replace the original jquery. js file. min. js files, no error messages will be prompted;

3. Integrate the jar package and copy the jar file in the decompressed war package in the previous step to our own project. Its location is usually ckfinder \ CKFinderJava \ WEB-INF \ lib; copy the jar file under this directory to the lib folder in our project, and then set config. xml and web. the xml file is also copied to the corresponding location in our own project (WebContent/WEB-INF );

Open config. xml. Replace <enabled> false </enabled> in the second line with <enabled> true </enabled>; in the fourth line, replace <baseURL>/CKFinderJava/userfiles/</baseURL> with <baseURL>/CK/userfiles/</baseURL>. Note: The CK here depends on the project name.

4. Create an editor. jsp file in 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"> 
In the preceding jsp file, there is an editor and a button. The button is used to obtain the added content edited by the user in the editor. After obtaining the content, you can process it accordingly, for example, you can save the content or generate an html file based on the content;
Run the program and access editor. jsp to see the first editor interface at the beginning of the article;
V. Appendix
Remove some version information: Open the ckfinder. js file under ckfinder and search for 
 
For more functions, refer to the example program in the installation package to achieve personalized customization;
 
 
Source code download: http://pan.baidu.com/s/1ntumme9 password: ig2s

Ckeditor and ckfinder Integration
Which directory is your ckfinder in? Is the Error Path/taotaoadmin/ckfinder?
Which directory does your ckeditor go?

The information you provided is incomplete. The following error is reported: The file is not found, and the path configuration is incorrect.

What are the functions of ckeditor and ckfinder?
1. ckfinder is a plug-in of ckeditor.
2. ckeditor is the html text editing plug-in. The source code is javascript. The effect is similar to WORD. Some editing tools are added to textbox.
3. ckfinder is mainly used for upload.