How to Use the kindeditor Editor

1. Download the editor

Download the latest kindeditor version. Open examples/index.html to view the demo.

Download Page: http://www.kindsoft.net/down.php

2. Deployment Editor

Decompress the kindeditor-x.x.x.zip file and upload all files to your website program directory, for example: http: // your domain name/Editor/

Note

You can delete the following directories as needed and upload them to the server.

• ASP-ASP program
• Asp.net-ASP. NET Program
• Php-PHP Program
• JSP-JSP program
• Examples-demo File

3. Modify the HTML page

1. Add the textarea input box to the location where you want to display the editor.

<Textarea id = "editor_id" name = "content" style = "width: 700px; Height: 300px;"> & lt; strong & gt; HTML content & lt; /strong & gt; </textarea>

Note

• The ID must be unique on the current page.
• You can edit the HTML content by setting the content in textarea. Note that if the slave server program (Asp, PHP, Asp. to directly display the content, you must convert the special HTML characters (>,< ,&,"). For details, see the demo. xxx program under the directories of various languages. Currently, ASP, ASP. NET, PHP, and JSP are supported.
• If you do not set the width or height in Some browsers, it is recommended that you set the width and height. The width and height can be set using the inline style orEditor initialization parameters.

2. Add the following script on the HTML page.

<script charset="utf-8" src="/editor/kindeditor.js"></script><script charset="utf-8" src="/editor/lang/zh_CN.js"></script><script>        var editor;        KindEditor.ready(function(K) {                editor = K.create('#editor_id');        });</script>

Note

• The first parameter can be used with other CSS selectors. When multiple textarea are matched, the editor is loaded only on the first element.
• You can configure the editor using the second parameter of the K. create function. For specific parameters, seeEditor initialization parameters.

var options = {        cssPath : '/css/index.css',        filterMode : true};var editor = K.create('textarea[name="content"]', options);

4. Obtain HTML data

// Obtain the HTML content html = editor.html (); // After synchronizing data, you can directly obtain the valueeditor of textarea. sync (); html = document. getelementbyid ('editor _ id '). value; // native apihtml = K ('# editor_id '). val (); // kindeditor node apihtml =$ ('# editor_id '). val (); // jquery // set the HTML content editor.html ('html content ');

Note

• The Visualized operations of kindeditor are executed on the newly created IFRAME, And the textarea box in code mode is also created. Therefore, you must synchronize HTML data to the original textarea and editor before final submission. the sync () function completes this action.
• Kindeditor automatically finds the form element to which textarea belongs by default, finds the form and adds the sync function to the onsubmit event. Therefore, you do not need to manually execute the sync () function to submit data using form.