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:取消只讀 

 

 

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