[Editor] what is kindeditor?

 

What is kindeditor?
Kindeditor is an open-source online HTML editor. It is mainly used to enable users to obtain WYSIWYG editing results on the website. developers can use kindeditor to input traditional multi-line text boxes (textarea) replace it with a visualized rich text input box. Kindeditor is written in JavaScript and can be seamlessly integrated with Java ,.. net, PHP, ASP, and other programs are suitable for use in Internet applications such as CMS, mall, forum, blog, wiki, and email.

Main features:

● Fast: small size, fast loading
● Open Source: open source code, high level, and high quality
● Underlying layer: built-in custom Dom class library for precise Dom operations
● Extension: Based on the plug-in design, all functions are plug-ins, and functions can be increased or decreased as needed
● Style: it is very easy to modify the editor style. You only need to modify a CSS file.
● Compatibility: supports most mainstream browsers, such as IE, Firefox, Safari, chrome, and opera.

 

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

Document page: http://www.kindsoft.net/doc.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/

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 or Textbox Control at the location where the editor is to be displayed. The sample code is as follows:

 

<textarea id="TextArea2" style="width:700px;height:300px;"></textarea>        <asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" Width="700px" Height="300px"></asp:TextBox>

Note:

● The ID must be a unique value on the current page.
● You can edit the HTML content by setting the HTML 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.
● In Some browsers, if the width and height are not set, the display may be incorrect. Therefore, it is best to set the width and height. The width and height can be set in the inline style or in the editor initialization parameter settings.

(2) Add the following script to the head of the HTML page.

<SCRIPT src = "kindeditor/kindeditor. JS "type =" text/JavaScript "> </SCRIPT> <SCRIPT type =" text/JavaScript "> var editor; kindeditor. ready (function (k) {editor = K. create ('# textarea2'); Editor = K. create ('# textbox1'); // you can deploy multiple text controls at the same time}); </SCRIPT>

 

Options parameters:

● 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, see
Editor initialization parameters.

var options = {        cssPath : '/css/index.css',        filterMode : true};var editor = K.create('TextBox1', options);

 

4. Obtain HTML data

The sample code is as follows:

// Obtain the HTML content html = editor.html (); // synchronize the HTML data to the original textarea. After synchronizing the 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 the form method.
 

The complete sample code is as follows::

<HTML xmlns = "http://www.w3.org/1999/xhtml"> 
 
Old prompts that there are insecure scripts
<System. Web>