KindEditor ---富編輯器

時間 2019-11-29

標籤 kindeditor 編輯器简体版

原文原文鏈接

http://kindeditor.net/doc3.php

文檔 Documentation

下載 KindEditor 最新版本。打開下載頁面
解壓zip文件，將全部文件上傳到您的網站程序目錄下。例如：http://您的域名/editor/
在須要顯示編輯器的位置添加TEXTAREA輸入框。
id在當前頁面必須是惟一的值，還有，在有些瀏覽器上不設寬度和高度可能顯示有問題，因此最好設一下寬度和高度。寬度和高度可用inline樣式設置，也可用編輯器初始化參數設置。
在TEXTAREA裏設置HTML內容便可實現編輯，在這裏須要注意的是，若是從服務器端程序(ASP、PHP、ASP.NET等)直接顯示內容，則必須轉換HTML特殊字符(>,<,&,")。具體請參考各語言目錄下面的demo.xxx程序，目前支持ASP、ASP.NET、PHP、JSP。
```
<textarea id="editor_id" name="content" style="width:700px;height:300px;">
&lt;strong&gt;HTML內容&lt;/strong&gt;
</textarea>
```
在該HTML頁面添加如下腳本。
```
<script charset="utf-8" src="/editor/kindeditor.js"></script>
<script>
        KE.show({
                id : 'editor_id'
        });
</script>
```
注：KE.show的原理是先執行KE.init設置一些變量，等DOM所有建立之後纔開始執行KE.create建立編輯器。若是瀏覽器不觸發DOMContentLoaded事件（例如：jQuery的$.ready，點擊某個按鈕，經過innerHTML插入HTML等），則不能使用KE.show，須要直接調用KE.init和KE.create。
```
KE.init({
        id : 'editor_id'
});
$.ready(function() {
        KE.create('editor_id');
});
```
調用KE.show和KE.init時，除id以外還能夠設置其它的參數，具體屬性請參考編輯器初始化參數。
取得編輯器的HTML內容。
KindEditor的可視化操做在新建立的iframe上執行，代碼模式下的textarea框也是新建立的，因此最後提交前須要將HTML數據同步到原來的textarea，KE.sync函數會完成這個動做。
KindEditor在默認狀況下自動尋找textarea所屬的form元素，找到form後onsubmit事件裏添加KE.sync函數，因此用form方式提交數據，不須要手動執行KE.sync函數。
```
//取得HTML內容
html = KE.html('editor_id');

//同步數據後能夠直接取得textarea的value
KE.sync('editor_id');
html = document.getElementById('editor_id').value;
html = $('#editor_id').val(); //jQuery

//設置HTML內容
KE.html('editor_id', 'HTML內容');
```

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。