Use of the Kindeditor editor

Kindeditor is an open source online HTML editor written in JavaScript, the main user is to let users get visible on the site editing effect, developers can use Kindeditor to put the traditional multi-line text input box (TEXTAREA) Replace with a rich text input box for visualizations. You can find more information on their website, including demos, documentation, downloads, and more.

Official website: http://kindeditor.net/demo.php

The first step:

Upload the plugin file you need to your project. Join textarea where you need to add the editor, noting that the ID is unique on the page.

Step Two:

Create an editor function. Reference Documentation:

Initialization parameters: http://www.zzbaike.com/wiki/KindEditor/Initialization parameters

Cases:

function Createditor () {
Editor=kindeditor.create (' textarea[id= ' id_name "] ', {

Parameters:

}

}

Common parameters:

1.pasteType: Set Paste type, 0: No paste, 1: Plain text paste, 2:html paste

Data type: Int; Default value: 2

2.resizetype:2 or 1 or 0, 2 o'clock can be dragged to change the width and height, 1 o'clock can only change the height, 0 o'clock cannot drag.

Data type: Int; Default value: 2

3.uploadJson: Specifies the server-side program that uploads the file.

Data type: String; Default value: BasePath + ' php/upload_json.php '

4.afterUpload: The callback function executed after uploading the file.

Data type: Function; Default value: None

Kindeditor.ready (function (K) {       k.create (' #id ', {   afterupload:function (URL) {      alert (URL); 
          }        }); });　　　　　　　　　　　　　　　　　　　　　　　　

5.items: Configure the Editor's toolbar, where "/" means line wrapping, "|" Represents a separator character.

Data type: Array;

Default value:

[        ' source ', ' | ', ' undo ', ' Redo ', ' | ', ' preview ', ' print ', ' template ', ' cut ', ' copy ', ' Paste ',       ' PLAINP Aste ', ' wordpaste ', ' | ', ' justifyleft ', ' justifycenter ', ' justifyright ',        ' justifyfull ', ' insertorderedlist ', ' in Sertunorderedlist ', ' Indent ', ' outdent ', ' subscript ',        ' superscript ', ' clearhtml ', ' Quickformat ', ' selectall ', ' |　　　　　　', ' fullscreen ', '/',        ' formatblock ', ' fontname ', ' fontsize ', ' | ', ' forecolor ', ' hilitecolor ', ' bold ',        ' Italic ', ' underline ', ' strikethrough ', ' lineheight ', ' removeformat ', ' | ', ' image ',        ' flash ', ' media ', ' Insertfil E ', ' table ', ' hr ', ' emoticons ', ' map ', ' Code ', ' PageBreak ',       ' link ', ' unlink ', ' | ', ' about ']

6.cssData: Specifies the CSS data for the editor IFRAME document, which sets the style of the visualization area.

Data type: String; default value: Empty

For example: Cssdata: ' Body {font-size:14px;font-family: ' Microsoft yahei '; color: #666666;} ',

7.afterBlur: callback function executed when the editor loses focus (Blur).

Data type: Function; Default value: None

8.afterChange: callback function executed after the editor content has changed.

Data type: Function; Default value: None

(The primary use is also in the editor text limit.) For example, to set the maximum input word count of 2000, the number of words will follow the change after the editor content changes.

Cases:

HTML: can also input <span id= "Leftnum" >2000</span> Word

Js:afterChange:function () {
var num=2000-parseint (this.count (' text '));//Word count minus input text, return remaining word count
var numleft = num;//The remaining words are re-assigned to a variable
num=num<0?0:num;//if the remaining number of words is less than 0 is true is 0, if greater than or equal to 0 is still num
Kindeditor (' #leftNum '). HTML (num), or//take the remaining number of words to the label to say the remaining value num fill in
if (numleft<0) {//If the remaining number of words is less than 0 add hint message
if ($ ("#company_intro"). Find (". Red_tips"). length==0) {\
$ ("#company_intro"). Append (' <span class= ' red_tips ' > exceeds 2000 word limit </span> ');
}
}else if (numleft>=0) {//If the remaining number of words is greater than or equal to 0 remove the message
$ ("#company_intro"). Find (". Red_tips"). Remove ();
}
}

　　　　　　

Step Three:

Call the function created in the second step.

OK, this editor has been generated on the page and is displayed.

About the problems encountered in use I say:

1. Upload the plugin in accordance with the language of their backend to choose the corresponding version of the upload, useless files can delete

2. After the editor generates the input data and the back end of the interaction, the data can be assigned to the variable and then passed to the backend, through the editor.html () to the edit box data, click Save after the interface transfer value will be

3. There are some, such as I just started to do the picture when I encountered the picture can not upload the problem, find a fact in the editor's file inside the modified

Well, for the moment you say so much, if you still have questions can add my blog to the left of the group, find me!

Use of the Kindeditor editor