KindEditor 是一套開源的在線HTML編輯器像寒，主要用于讓用戶在網(wǎng)站上獲得所見即所得編輯效果仙辟，開發(fā)人員可以用 KindEditor 把傳統(tǒng)的多行文本輸入框(textarea)替換為可視化的富文本輸入框。 KindEditor 使用 JavaScript 編寫，可以無縫地與 Java剥纷、.NET、PHP蜓肆、ASP 等程序集成，比較適合在 CMS谋币、商城仗扬、論壇、博客蕾额、Wiki早芭、電子郵件等互聯(lián)網(wǎng)應(yīng)用上使用。
官網(wǎng):?http://kindeditor.net/about.php
其他常用的富文本編輯器:
UEditor?http://ueditor.baidu.com/website/
CKEditor?http://ckeditor.com/
有興趣的小伙伴可以找時間探索一下哦!
第一步:導(dǎo)入KindEditor文件
從官網(wǎng)下載好文檔之后诅蝶，將相關(guān)文件導(dǎo)入到我們的項目中退个，如下圖；并在需要富文本編輯框的頁面中引入相應(yīng)的文件调炬。
<!-- 富文本編輯器 --><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>
第二步：初始化KindEditor編輯器
在頁面添加javaScript代碼初始化KindEditor編輯器语盈，并在頁面富文本編輯處指定name屬性完成初始化！
//初始化KindEditor編輯器var editor;
? ? KindEditor.ready(function (K) {
? ? ? ? editor = K.create('textarea[name="content"]', {
? ? ? ? ? ? //否允許瀏覽服務(wù)器已上傳文件,默認是falseallowFileManager:true? ? ? ? });
? ? });// html 頁面 ：為普通的textarea指定name屬性即可（和js中一致）缰泡！
第三步：提取KindEditor編輯器中的內(nèi)容
//提取編輯器內(nèi)容varcontent = =editor.html();//清空編輯器內(nèi)容editor.html('');
KindEditor編輯器的其他操作
----------------------------------------------------------------------------------
allowFileManager 【是否允許瀏覽服務(wù)器已上傳文件】
默認值是：false------------------------------------------------------
allowImageUpload 【是否允許上傳本地圖片】
默認值是：true----------------------------------------------
allowFlashUpload 【是否允許上傳Flash】
默認值是：true----------------------------------------------
allowMediaUpload 【是否允許上傳多媒體文件】
默認值是：true------------------------------------------------
pasteType 【設(shè)置粘貼類型】 0:禁止粘貼,1:純文本粘貼,2:HTML粘貼（默認） ---------------------------------------------------
resizeType 【設(shè)置可否改變編輯器大小】 0:不能改變1:只能改變高度2:寬度和高度都可以改變（默認） ----------------------------------------------------------
themeType 【主題風格】
可設(shè)置"default"刀荒、"simple"，指定simple時需要引入simple.css -------------------------------------------------------------
designMode 【可視化模式或代碼模式】
數(shù)據(jù)類型：Boolean
默認值是：true(可視化) ------------------------------------------
afterCreate:function(){} 【編輯器創(chuàng)建后】
afterCreate:function(){ //alert('創(chuàng)建完成'); } ------------------------------------------
fontSizeTable 【制定文字大小】
數(shù)據(jù)類型：Array
默認值：['9px','10px','12px','14px','16px','18px','24px','32px'] -----------------------------------------------------------------------
colorTable 【指定取色器里的顏色值】
數(shù)據(jù)類型：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']
]
上面是默認值 ----------------------------------------------------------------------------------
【Ctrl+Enter提交】
afterCreate:function(){
var self=this;
KindEditor.ctrl(self.edit.doc, 13,function() {
self.sync(); //執(zhí)行其他事件 });
}
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
var editor=KindEditor.create('#nr');
【編輯器獲取焦點】
editor.focus();
【取得編輯器HTML內(nèi)容】
var html=editor.html();
【取得編輯器純文本內(nèi)容】
var text=editor.text();
【移除編輯器】
editor.remove();
【設(shè)置編輯器HTML】
editor.html('<strong>編輯器內(nèi)容</strong>');
【設(shè)置編輯器純文本內(nèi)容，直接顯示HTML代碼】
editor.text('<strong>編輯器內(nèi)容</strong>');
【判斷編輯器內(nèi)容是否為空】 if(editor.isEmpty()){
alert('請輸入內(nèi)容');
return false;
}
【將指定的HTML內(nèi)容插入到編輯器區(qū)域里的光標處】
editor.insertHtml('<strong>插入內(nèi)容</strong>');
【將指定的HTML內(nèi)容添加到編輯器區(qū)域的最后位置缠借∽世＃】
editor.appendHtml('<strong>追加內(nèi)容</strong>');
【編輯器切換全屏模式】
editor.fullscreen();
【設(shè)置編輯器的只讀狀態(tài)】
editor.readonly(false);//true:只讀，false:取消只讀
