Abstract: The recent study in their own time to build a site, suddenly want to build a site, I noticed a good thing, and that is kindeditor the text editor, the editor easy to use, and very small, and is open source.

Text editor Presentation

　　KindEditor is an open source online HTML editor, mainly for WYSIWYG editor allows users to get results on the site, developers can put traditional multi-line text input box (textarea) replaced with a visual rich text input KindEditor frame. KindEditor written in JavaScript, you can seamlessly integrate with Java, .NET, PHP, ASP and other procedures, more suitable for use in the CMS, store, forum, blog, Wiki, e-mail and other Internet applications.

The main features of kindeditor

Fast: small size, fast loading speed
Open source: open source, high-level, high-quality
Bottom: Custom Built DOM library, precise operation DOM
Extended: design plug-in-based, all functions are plug-in function according to changes in demand
Style: style is very easy to modify the editor, just modify a CSS file
Compatibility: supports most major browsers, such as IE, Firefox, Safari, Chrome, Opera

development path

2006 July: KindEditor 2.0 released
January 2009: KindEditor 3.0 released
June 2010: KindEditor 3.5 released
August 2011: KindEditor 4.0 released

Download text editor

Click to download you can use the download location to see you myself, I downloaded directly to the desktop, followed by ease of use.

Using a text editor

　　Download the success of the project editor directly on the static folder, and then use the template like you want, I here backend.html, then textarea then we need to edit the settings can be achieved, found the textarea id (id for each tag is unique), and then add the script to this thing.

textarea text box

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

Script Editor

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

Note

The first parameter using other CSS selectors, a plurality of load editor textarea only match on the first element.
, The editor can be configured via the second argument K.create function, please refer to the specific parameters editor initialization parameters .

There are many in the initialization parameter can support custom, you can make changes according to your needs

Upload a text editor

Because I want to upload photos, all files will use a custom of extraFileUploadParams this thing, upload images, Flash, video and audio, files, add support to the server along with other parameters.

Add to

KindEditor.ready(function(K) {
        K.create('#id', {
                extraFileUploadParams : {
                        item_id : 1000,
                        category_id : 1
                }
        });
});

We do not want the back of the box can be dragged, you have to set the parameters of this resize Type

resize Type

0,2 or 1 or 2 when changing width and height can drag, can vary the height of 1, you can not drag 0:00.

Data Type: Int
Default: 2

The rest we are interested can go to study, for example, which is the subject of style.

Text editor of kindeditor