1. Introduction Rich Text Editor
Rich text editor, Rich Text Editor, referred to RTE, which provides editing functions similar to Microsoft Word. Common rich text editor:
KindEditor http://kindeditor.net/
UEditor http://ueditor.baidu.com/website/
CKEdirot http://ckeditor.com/
Here we introduce the use of KindEditor use.
2. Download
Enter the official website: http://kindeditor.net/down.php Download (its official website has also demonstrated interface)
Download, unzip, go to the directory: kindeditor \ kindeditor-4.1.10 \ examples, double-click index.html with a browser open, you can see the directory interface.
3. To create a rich text
According to their business needs, select the appropriate type of rich text. Pick first the default.html (default mode) Description
Introducing the front end interface code css and js
<link rel="stylesheet" href="../themes/default/default.css" />
<script charset="utf-8" src="../kindeditor-min.js"></script>
<script charset="utf-8" src="../lang/zh_CN.js"></script>
Creating object manipulation rich text Editor :
<script>
var editor;
KindEditor.ready(function(K) {
editor = K.create('textarea[name="content"]', {
allowFileManager : true
});
});
</script>
When in use, to get rich text content as follows:
Wherein the configuration described as follows:
K.create means creating Editor Object
K.create ( 'textarea [name = " content"]', xxx); the content indicates a rich text placed textarea name = "content" corresponding to, i.e.: < textarea name = " content " style = "width: 800px; height: 400px; visibility: hidden; "> KindEditor </ textarea>
allowFileManager : [server whether to allow viewing uploaded files]
Additional information:
editor.html (); // get HTML
editor.isEmpty (); // determines whether the air
editor.text (); // get the text (containing img, embed)
editor.selectedHtml (); // get the selected HTML
editor.html('<h3>Hello KindEditor</h3>'); //设置HTML
editor.text ( '<h3> Hello KindEditor </ h3>'); // set the text
editor.insertHtml ( '<strong> Insert HTML </ strong>'); // inserted HML
editor.appendHtml ( '<strong> add HTML </ strong>'); // add the HTML
editor.html ( ''); // Clear
4. Parameter Description profile
When you create an object editor, all configuration can be added as follows:
allowFileManager [whether to allow the browser to upload a file server]
The default value is: false
----------------------------------- -------------------
allowImageUpload [if allowed to upload local images]
The default value is: to true
------------------ ----------------------------
allowFlashUpload [Flash] is allowed to upload
defaults are: to true
---------- ------------------------------------
allowMediaUpload [whether] allowed to upload multimedia files
default is: to true
- -----------------------------------------------
pasteType [settings paste type]
0: disable paste, 1: plain text pasting, 2: HTML paste (default)
----------------------------- ----------------------
resizeType [set] the possibility of changing the size of the editor
0: not change 1: 2 can change the height: width and height can be changed (default)
----------------------------- -----------------------------
ThemeType [theme] style
can be set to "default", "simple", specifying the need to introduce simple simple .css
------------------------------------------------ -------------
the designMode [visual mode or code mode]
data type: Boolean
default values are: true (visualization)
----------------- -------------------------
afterCreate: function () {} [] after the editor creates
afterCreate: function () {
// Alert ( 'Create complete ');
}
------------------------------------------
fontSizeTable [developing text size]
data type: Array
default values: [ '9px', '10px ', '12px', '14px', '16px', '18px', '24px', '32px']
-------------------------------------------------- ---------------------
ColorTable [color picker in the specified color value]
data type: the Array
[
[ '# E53333', '# E56600', '# FF9900 ',' # 64451D ',' # DFC5A4 ',' # FFE500 '],
[' # 009900 ',' # 006600 ',' # 99BB00 ',' # B8D100 ',' # 60D978 ',' # 00D5FF '] ,
[ '# 337FE5', '# 003399', '# 4C33E5', '# 9933E5', '# CC33E5', '# EE33EE'],
[ '#FFFFFF', '#CCCCCC', '# 999999', ' # 666666 ',' # 333333 ',' # 000000 ']
]
The above is the default
-------------------------------------------- --------------------------------------
[ Ctrl + Enter submit]
afterCreate: function () {
Self = the this var;
KindEditor.ctrl (self.edit.doc, 13 is, function () {
self.sync ();
// perform other events
});
}
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ━━━━━━
var = editor KindEditor.create ( '# NR');
editor.focus (); [editor] acquires focus
var HTML = editor.html () ; [] acquired HTML content editor
var text = editor.text () ; [obtain plain text editor]
editor.remove () ; [editor] removed
editor.html ( '<strong> content editor </ strong>'); [set] HTML editor
editor.text ( '<strong> content editor </ strong>'); [plain text editor is provided, the HTML code displayed directly]
iF ( editor.isEmpty () ) {[editor determines whether the content is empty]
alert ( "Please enter your ');
return to false;
}
editor.insertHtml ( '<strong> Insert </ strong>'); [a designated HTML content into the editor area where the cursor]
editor.appendHtml ( '<strong> additional content </ strong>'); [specified HTML content added to the final position of the editor area. ]
Editor.fullscreen (); [Editor full screen mode.]
Editor.readonly (to false) ; // to true: read-only, false: Cancel [Configuration Editor read only read only]