Simple use of KindEditor

　　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.

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

Other common rich text editor:

UEditor http://ueditor.baidu.com/website/

CKEditor http://ckeditor.com/

Interested partners can find a little time to explore the Oh!

The first step: Import file KindEditor

After the good from the official website to download documents, import documents to our project, as shown below; and the introduction of appropriate documents required in rich text edit box page.

<!-- 富文本编辑器 -->
<link rel="stylesheet" href="../plugins/kindeditor/themes/default/default.css"/>
<script charset="utf-8" src="../plugins/kindeditor/kindeditor-min.js"></script>
<script charset="utf-8" src="../plugins/kindeditor/lang/zh_CN.js"></script>

Step two: Initialization KindEditor Editor

Add javaScript code initializes KindEditor editor page, and specify the name attribute in the page rich text editor at the completion of initialization!

// initialize KindEditor Editor
<script type="text/javascript">
    Are editor;
    KindEditor.ready(function (K) {
        Editor = K.create ( 'the TextArea [name = "Content"]' , {
             // No server allows you to browse the uploaded file, the default is false 
            allowFileManager: to true
        });
    });
</script>

// HTML page: Specify a name attribute is an ordinary textarea to (and consistent js)!
<div class="col-md-10 data editer">
   <textarea name="content" style="width:800px;height:400px;visibility:hidden;"></textarea>
</div>

The third step: extract the contents KindEditor Editor

// extract content editor 
var Content = = editor.html ();

// Clear the contents editor 
editor.html ( '');

Other operating KindEditor editor

---------------------------------------------------------------------------------- 
allowFileManager [whether to allow viewing the uploaded 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 
The default value is: to true  
--------------------------------------------- - 
allowMediaUpload [if allowed to upload multimedia files] 
The default value is: to true  
--------------------------------------------- --- 
setting type paste] [pasteType 
0 : Disable paste, 1 : plain text pasting, 2 : Paste the HTML (default) 
 -------------------------------- ------------------- 
[resizeType whether setting change editor size] 
0 : not change 1 : only changing the height 2 : The width and height may be changed (default) 
 ----------------------------- ----------------------------- 
themeType] [theme style 
Can be set " default " , " Simple " , you need to introduce simple.css specified Simple 
 -------------------------------- ----------------------------- 
designMode visualization mode or code [mode] 
Data Type: Boolean 
The default value is: to true (Visualization) 
 ------------------------------------------  
afterCreate: function () {} [] after the editor creates
afterCreate: function () { 
 // Alert ( 'created'); 
} 
 --------------------------------- --------- 
fontSizeTable develop [Text Size] 
Data Type: Array 
Default: [ ' 9px ' , ' 10px ' , ' 12px ' , ' 14px ' , ' 16px ' , ' 18px ' , ' 24px ' , ' 32px ' ] 
 -------------- -------------------------------------------------- ------- 
[colorTable color picker in the specified color value] 
Data Type: 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 + the Enter submit]
afterCreate:function(){ 
var self=this; 
KindEditor.ctrl(self.edit.doc, 13, function() { 
. Self Sync (); 
 // perform other events 
});
} 
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 
var editor=KindEditor.create('#nr'); 
[Editor] gets focus 
editor.focus(); 
[Get] HTML content editor 
var html = editor.html ();
[Made plain text editor] 
where text = editor.text ();
[Removed] Editor 
editor.remove(); 
Set [HTML editor] 
editor.html ( ' <strong> content editor </ strong> ' );
[Set plain text editor, HTML code directly display] 
editor.text ( ' <strong> content editor </ strong> ' );
[Editor determine whether the content is empty] 
if(editor.isEmpty()){ 
Alert ( " Please enter your ' );
return false; 
} 
[Specified HTML content into the editor area where the cursor] 
editor.insertHtml ( ' <strong> Insert </ strong> ' );
[Specified HTML content added to the final position of the editor area. ]
editor.appendHtml ( ' <strong> additional content </ strong> ' );
[Editor] full screen mode. 
editor.fullscreen(); 
[Configuration Editor read-only state] 
editor.readonly ( false ); // to true: read-only, false: read-only cancel

Focus on micro-channel public number, anytime, anywhere learning