Kindeditor Introduction:
Kindeditor is a domestic rich text editor, similar to FCKeditor and the current more popular Baidu Ueditor. Its product official website is http://kindeditor.net/
Kindeditor Download:
Official website: (may not download to historical version)
http://kindeditor.net/down.php
Google:
Https://code.google.com/p/kindeditor/downloads/list
Kindeditor using:
Note: the example used in this article is the kindeditor-4.1.10 version (: http://down.admin5.com/qita/8893.html),
This article uses the article to add a modified view of the business process to achieve a demonstration of the entire application process.
1: Unzip the downloaded compressed package into the Kindeditor directory;
2: Copy the Kindeditor folder into the project, such as "/webroot/", you can delete the php,asp,asp.net three directories. The directory structure after import is as follows:
3: Bring all the jar packages under the kindeditor/jsp/lib/into the project. (This version is a 3 jar package, preferably using a copy to web-inf/lib under reference);
4: Reference JS file in the head section of a JSP page that needs a text editor (add.jsp edit.jsp)
The sample code is as follows:
[HTML]View PlainCopy
- <script type="Text/javascript" charset="utf-8" src= "${context}/kindeditor/ Kindeditor.js "></script>
- <Scriptcharset="Utf-8"Src= "<Span style= "Font-family:arial, Helvetica, Sans-serif;>${context}</span><span style= " font-family: arial, helvetica, sans-serif; " >/</span> <span style= "font-family: arial, helvetica, sans-serif;" >kindeditor/lang/zh_cn.js "></ script></span >
- <script>
- Kindeditor.ready (function (K) {
- K.create (' #editor_id ', {
- Uploadjson: ' ${context}/kindeditor/jsp/upload_json.jsp ',
- Filemanagerjson: ' ${context}/kindeditor/jsp/file_manager_json.jsp ',
- Allowfilemanager:true
- });
- });
- </Script>
Note: ${context} is the context path.
5:add.jsp Insert the following code in the section where you want to insert the text editor:
[HTML]View PlainCopy
- <textarea id="editor_id" name="content" style="width:96%;height:350px;visibility: hidden; " ></textarea>
Note: The id attribute value of the textarea must be consistent with the k.create () defined within the head tag. The Name property is the value that accepts the parameter name in the background.
6:editor.jsp Insert the following code in the section where you want to insert the text editor:
[HTML]View PlainCopy
- <textarea id="editor_id" name="content" style="width:96%;height:350px;visibility: hidden; " >${wenzhang.content}</textarea>
Note: ${wenzhang.content} is the content to be edited.
7:SHOW.JSP Display page directly shows the database storage content.
How Kindeditor is configured in eclipse