KindEditor的簡單使用

　　KindEditor 是一套開源的在線HTML編輯器，主要用於讓用戶在網站上獲得所見即所得編輯效果，開發人員可以用 KindEditor 把傳統的多行文本輸入框(textarea)替換為可視化的富文本輸入框。 KindEditor 使用 JavaScript 編寫，可以無縫地與 Java、.NET、PHP、ASP 等程序集成，比較適合在 CMS、商城、論壇、博客、Wiki、電子郵件等互聯網應用上使用。

官網: http://kindeditor.net/about.php

其他常用的富文本編輯器:

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

CKEditor http://ckeditor.com/

有興趣的小伙伴可以找時間探索一下哦!

第一步:導入KindEditor文件

從官網下載好文檔之后，將相關文件導入到我們的項目中，如下圖；並在需要富文本編輯框的頁面中引入相應的文件。

 

<!-- 富文本編輯器 -->
<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編輯器
<script type="text/javascript">
    var editor;
    KindEditor.ready(function (K) {
        editor = K.create('textarea[name="content"]', {
            //否允許瀏覽服務器已上傳文件,默認是false
            allowFileManager: true
        });
    });
</script>

// html 頁面 ：為普通的textarea指定name屬性即可（和js中一致）！
<div class="col-md-10 data editer">
   <textarea name="content" style="width:800px;height:400px;visibility:hidden;"></textarea>
</div>

第三步：提取KindEditor編輯器中的內容

//提取編輯器內容
var content = =editor.html();

//清空編輯器內容
editor.html('');

KindEditor編輯器的其他操作

---------------------------------------------------------------------------------- 
allowFileManager 【是否允許瀏覽服務器已上傳文件】 
默認值是：false 
------------------------------------------------------ 
allowImageUpload 【是否允許上傳本地圖片】 
默認值是：true 
---------------------------------------------- 
allowFlashUpload 【是否允許上傳Flash】 
默認值是：true 
---------------------------------------------- 
allowMediaUpload 【是否允許上傳多媒體文件】 
默認值是：true 
------------------------------------------------ 
pasteType 【設置粘貼類型】 
0:禁止粘貼, 1:純文本粘貼, 2:HTML粘貼（默認） 
--------------------------------------------------- 
resizeType 【設置可否改變編輯器大小】 
0:不能改變 1:只能改變高度 2:寬度和高度都可以改變（默認） 
---------------------------------------------------------- 
themeType 【主題風格】 
可設置"default"、"simple"，指定simple時需要引入simple.css 
------------------------------------------------------------- 
designMode 【可視化模式或代碼模式】 
數據類型：Boolean 
默認值是：true(可視化) 
------------------------------------------ 
afterCreate:function(){} 【編輯器創建后】 
afterCreate:function(){ 
//alert('創建完成'); 
} 
------------------------------------------ 
fontSizeTable 【制定文字大小】 
數據類型：Array 
默認值：['9px', '10px', '12px', '14px', '16px', '18px', '24px', '32px'] 
----------------------------------------------------------------------- 
colorTable 【指定取色器里的顏色值】 
數據類型：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(); 
//執行其他事件 
}); 
} 
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 
var editor=KindEditor.create('#nr'); 
【編輯器獲取焦點】 
editor.focus(); 
【取得編輯器HTML內容】 
var html=editor.html(); 
【取得編輯器純文本內容】 
var text=editor.text(); 
【移除編輯器】 
editor.remove(); 
【設置編輯器HTML】 
editor.html('<strong>編輯器內容</strong>'); 
【設置編輯器純文本內容，直接顯示HTML代碼】 
editor.text('<strong>編輯器內容</strong>'); 
【判斷編輯器內容是否為空】 
if(editor.isEmpty()){ 
alert('請輸入內容'); 
return false; 
} 
【將指定的HTML內容插入到編輯器區域里的光標處】 
editor.insertHtml('<strong>插入內容</strong>'); 
【將指定的HTML內容添加到編輯器區域的最后位置。】 
editor.appendHtml('<strong>追加內容</strong>'); 
【編輯器切換全屏模式】 
editor.fullscreen(); 
【設置編輯器的只讀狀態】 
editor.readonly(false); //true:只讀，false:取消只讀 

 

 

 關注微信公眾號，隨時隨地學習