KindEditor 是什麼?
KindEditor 是一套開源的在線HTML編輯器,主要用於讓用戶在網站上得到所見即所得編輯效果,開發人員能夠用 KindEditor 把傳統的多行文本輸入框(textarea)替換爲可視化的富文本輸入框。 KindEditor 使用 JavaScript 編寫,能夠無縫地與 Java、.NET、PHP、ASP 等程序集成,比較適合在 CMS、商城、論壇、博客、Wiki、電子郵件等互聯網應用上使用。
主要特色: php
- 快速:體積小,加載速度快
- 開源:開放源代碼,高水平,高品質
- 底層:內置自定義 DOM 類庫,精確操做 DOM
- 擴展:基於插件的設計,全部功能都是插件,可根據需求增減功能
- 風格:修改編輯器風格很是容易,只需修改一個 CSS 文件
- 兼容:支持大部分主流瀏覽器,好比 IE、Firefox、Safari、Chrome、Opera
使用方法:
1. 下載編輯器
下載 KindEditor 最新版本,下載以後打開 examples/index.html 就能夠看到演示。css
下載頁面: http://www.kindsoft.net/down.phphtml
2. 部署編輯器
解壓 kindeditor-x.x.x.zip 文件,將全部文件上傳到您的網站程序目錄裏,例如:http://您的域名/editor/瀏覽器
Note服務器
您能夠根據需求刪除如下目錄後上傳到服務器。asp.net
- asp - ASP程序
- asp.net - ASP.NET程序
- php - PHP程序
- jsp - JSP程序
- examples - 演示文件
3. 修改HTML頁面
- 在須要顯示編輯器的位置添加textarea輸入框。
<textarea id="editor_id" name="content" style="width:700px;height:300px;">
<strong>HTML內容</strong>
</textarea>
Notejsp
- id在當前頁面必須是惟一的值。
- 在textarea裏設置HTML內容便可實現編輯,在這裏須要注意的是,若是從服務器端程序(ASP、PHP、ASP.NET等)直接顯示內容,則必須轉換HTML特殊字符(>,<,&,」)。具體請參考各語言目錄下面的demo.xxx程序,目前支持ASP、ASP.NET、PHP、JSP。
- 在有些瀏覽器上不設寬度和高度可能顯示有問題,因此最好設一下寬度和高度。寬度和高度可用inline樣式設置,也可用 編輯器初始化參數 設置。
- 在該HTML頁面添加如下腳本。
<script charset="utf-8" src="/editor/kindeditor.js"></script>
<script charset="utf-8" src="/editor/lang/zh_CN.js"></script>
<script>
var editor;
KindEditor.ready(function(K) {
editor = K.create('#editor_id');
});
</script>
Note編輯器
- 第一個參數可用其它CSS選擇器,匹配多個textarea時只在第一個元素上加載編輯器。
- 經過K.create函數的第二個參數,能夠對編輯器進行配置,具體參數請參考 編輯器初始化參數 。
var options = {
cssPath : '/css/index.css',
filterMode : true
};
var editor = K.create('textarea[name="content"]', options);
4. 獲取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內容');
Noteide
- KindEditor的可視化操做在新建立的iframe上執行,代碼模式下的textarea框也是新建立的,因此最後提交前須要將HTML數據同步到原來的textarea,editor.sync()函數會完成這個動做。
- KindEditor在默認狀況下自動尋找textarea所屬的form元素,找到form後onsubmit事件裏添加sync函數,因此用form方式提交數據,不須要手動執行sync()函數。