用法參考：http://kindeditor.net/docs/usage.html

一、使用

. 修改HTML頁面

1. 在需要顯示編輯器的位置添加textarea輸入框。

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

2. 在該HTML頁面添加以下腳本。

<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>
 

. 獲取HTML數據

// 取得HTML內容
html = editor.html();

// 同步數據後可以直接取得textarea的value
editor.sync();
html = document.getElementById(‘editor_id‘).value; // 原生API
html = K(‘#editor_id‘).val(); // KindEditor Node API
html = $(‘#editor_id‘).val(); // jQuery

// 設置HTML內容
editor.html(‘HTML內容‘);

5.配置項

items

配置編輯器的工具欄，其中”/”表示換行，”|”表示分隔符。

• 數據類型: Array
• 默認值:

[
        ‘source‘, ‘|‘, ‘undo‘, ‘redo‘, ‘|‘, ‘preview‘, ‘print‘, ‘template‘, ‘code‘, ‘cut‘, ‘copy‘, ‘paste‘,
        ‘plainpaste‘, ‘wordpaste‘, ‘|‘, ‘justifyleft‘, ‘justifycenter‘, ‘justifyright‘,
        ‘justifyfull‘, ‘insertorderedlist‘, ‘insertunorderedlist‘, ‘indent‘, ‘outdent‘, ‘subscript‘,
        ‘superscript‘, ‘clearhtml‘, ‘quickformat‘, ‘selectall‘, ‘|‘, ‘fullscreen‘, ‘/‘,
        ‘formatblock‘, ‘fontname‘, ‘fontsize‘, ‘|‘, ‘forecolor‘, ‘hilitecolor‘, ‘bold‘,
        ‘italic‘, ‘underline‘, ‘strikethrough‘, ‘lineheight‘, ‘removeformat‘, ‘|‘, ‘image‘, ‘multiimage‘,
        ‘flash‘, ‘media‘, ‘insertfile‘, ‘table‘, ‘hr‘, ‘emoticons‘, ‘baidumap‘, ‘pagebreak‘,
        ‘anchor‘, ‘link‘, ‘unlink‘, ‘|‘, ‘about‘
]


二、常見問題
 

1.kindeditor配合requirejs使用時，ready失效

2.kindeditor異步渲染dom才出現富文本，ready失效

解析：

KindEditor.ready(function(K)) {
        K.create(‘#editor_id‘);
}

他自己提供的ready方法一般情況下都不會有問題。

首先，kindeditor.ready()方法想要在dom加載完成後創建富文本框,調用的是dom load.但並不支持異步。

問題1，使用requirejs引入的，在執行KindEditor.ready代碼的時候dom結構早就完成了，動態插入的script代碼不會再次觸發DOMContentLoaded事件，因此KindEditor.ready註冊的回調永遠不會被執行，富文本框當然不會出現啦。解決方案很簡單，不要使用KinkEditor.ready，直接KindEditor.create(...就好啦。

問題2，富文本編輯應是在異步請求之後渲染的，

三 、常用方法

afterfocus，self.editor.text()，self.editor.html()

KindEditor.ready(function(K) {
self.editor = K.create(‘textarea[name="intro"]‘, {
resizeType : 1,
items : [
‘fontname‘, ‘fontsize‘, ‘|‘, ‘forecolor‘, ‘hilitecolor‘, ‘bold‘, ‘italic‘, ‘underline‘,
‘removeformat‘, ‘|‘, ‘justifyleft‘, ‘justifycenter‘, ‘justifyright‘, ‘insertorderedlist‘,
‘insertunorderedlist‘
],

afterfocus: function(){

},

afterCreate: function(){this.sync();},
afterBlur : function(){

this.sync();
self.isEditorEmpty();
}
});
});

isEditorEmpty: function(){
var self = this;
var _intro = self.editor.text();//獲取編輯器內容
if(!$.trim(_intro)){
$(‘.intro-error‘).text(‘請輸入公司簡介‘);
return false;
}else{
$(‘.intro-error‘).text(‘‘);
return true;
}
},

kindEditor富文本編輯器