Html rich text editor,

Html rich text editor,

This article recommends two simple Rich Text editors [KindEditor, NicEdit] To get the WYSIWYG editing effect. This article is only for learning and sharing. If you have any shortcomings, please correct them.

Overview

The two editors are written in JavaScript and do not need to reference dll. They can be used with mainstream backend programming languages [Java ,. NET, PHP, ASP, etc.] seamless integration, small size, you can turn the existing TextArea into a rich text editor. Next we will introduce them separately:

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.

KindEditor features:

• Fast: small size, fast loading
• Open Source: open source code, high level, high quality
• Underlying layer: built-in custom DOM class library for precise DOM operations
• Extension: plug-in-based design. All functions are plug-ins. You can add or remove functions as needed.
• Style: it is very easy to modify the editor style. You only need to modify a CSS file.
• Compatible: supports most mainstream browsers, such as IE, Firefox, Safari, Chrome, and Opera.

Example

KindEditor, as shown in,

How to get the edited content [KindEditor's visual operation is executed on the newly created iframe, And the textarea box in code mode is also newly created. Therefore, sync () must be executed before submission () set HTML data to the original textarea. ], You can use the following code:

1 // get HTML content 2 html = editor.html (); 3 4 // After synchronizing data, you can directly get the value 5 editor of textarea. sync (); 6 html = document. getElementById ('editor _ id '). value; // native API 7 html = K ('# editor_id '). val (); // KindEditor Node API 8 html =$ ('# editor_id '). val (); // jQuery 9 10 // set HTML content 11 editor.html ('html content ');

View Code

The Html code for this KindEditor example is as follows:

1 <! DOCTYPE html> 2 View Code
 
What is NicEdit?
NicEdit is a Lightweight, Cross Platform, Inline Content Editor to allow easy editing of web site content on the fly in the browser. nicEdit Javascript integrates into any site in seconds to make any element/div editable or convert standard textareas to rich text editing.
Example:

About how to get the content after the editor [the id and value of textarea cannot be obtained here, because nicedit will hide the original textarea and generate the built-in input box, this is to obtain the text in the box. You must obtain it by the class name generated by the box.]: You can use document. getElementsByClassName ("nicEdit-main") [0]. innerHTML;
The NicEdit Html code in this example is as follows:
1 <! DOCTYPE html> 2 View Code remarks:
This article is intended to inspire others. The best learning Manual (including) is the official website.
KindEditor: http://kindeditor.net/demo.php
NicEdit: http://nicedit.com/index.php