How Kindeditor is configured in eclipse

Source: Internet
Author: User
Tags visibility

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
  1. <script type="Text/javascript" charset="utf-8" src= "${context}/kindeditor/ Kindeditor.js "></script>
  2. <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 >  
  3. <script>
  4. Kindeditor.ready (function (K) {
  5. K.create (' #editor_id ', {
  6. Uploadjson: ' ${context}/kindeditor/jsp/upload_json.jsp ',
  7. Filemanagerjson: ' ${context}/kindeditor/jsp/file_manager_json.jsp ',
  8. Allowfilemanager:true
  9. });
  10. });
  11. </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
    1. <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
    1. <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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.