Detailed information on how to use the Kindeditor editor

Today's group of friends asked me if I can write a kindeditor editor of the use of the tutorial, said it was a half-day did not fix. Because PHP is in the background just use this editor, I have written experience, just teach him at the same time write to share to everyone.

Kindeditor Editor is a JS written by the online editor, many sites or CMS, etc. useful it, good reputation, the current version is 4.1.10.

In fact, it is very simple to use, I downloaded its installation package after watching some demo and then put it into the background of PHP. Okay, the tutorial is officially started.

First, download

Download the latest version of Kindeditor (official website kindeditor.net), download and open the examples/index.html you can see a row of examples.

II. deployment

The extracted file Package kindeditor-4.1.10 asp ASP. NET JSP PHP, a few folders with server-side scripts deleted, and then uploaded to the appropriate directory of your site, where I assume the plugin directory.

Third, embedding

In the HTML of the page that needs to be added to the editor, pour

1	<linkrel="stylesheet" href="/plugin/kindeditor-4.1.10/themes/default/default.css"/>

2	< script charset = "Utf-8" src = "/plugin/kindeditor-4.1.10/kindeditor-min.js" ></ script >

3	<scriptcharset="utf-8"src="/plugin/kindeditor-4.1.10/lang/zh_CN.js"></script>

Then add an input box

1	<textareaid="editor_id"name="content"></textarea>

finally add a section of JS

1	KindEditor.ready(function(K) {

2	window.editor = K.create(‘#editor_id‘,{

3	cssPath:‘/public/plugin/editor/plugins/code/prettify.css‘,

4	uploadJson:‘/upload/image.php‘,

5	resizeType :1,

6	allowPreviewEmoticons : true,

7	allowImageUpload : true,

8

});

9

});

it's all right. You should already be able to see the editor on the page.

One of the things I want to say here is that the first parameter of K.create is the ID of the previous textarea, and the JSON-formatted data behind it protects many of the functions of the editor. Like I wrote on My code.

Csspath is the code style sheet, and Uploadjson is the upload address of the editor's picture upload component.

When it comes to uploading addresses, you should also remember that before uploading the server I asked you to delete a few folders, choose your website's development language directory you can see, such as PHP directory upload_json.php file, it is mainly written to accept the image upload method, we can change their use. The backstage part of the thing here is not detailed.

Iv. taking value

How do we take the value after the editor is embedded? In fact, its bag also has an example, that is, using the editor.html () method to take the value.

OK, the main usage is finished, it has a lot of less commonly used functions, I will not say, take a look at the example I believe that everyone will use.

In addition , "Kindeditor Editor uses syntaxhighlighter to implement code highlighting"

Detailed information on how to use the Kindeditor editor