KindEditor 編輯器使用方法

http://kindeditor.net/docs/usage.html

編輯器使用方法

1. 下載編輯器

下載 KindEditor 最新版本，下載之后打開 examples/index.html 就可以看到演示。

下載頁面: http://www.kindsoft.net/down.php

2. 部署編輯器

解壓 kindeditor-x.x.x.zip 文件，將所有文件上傳到您的網站程序目錄里，例如：http://您的域名/editor/

Note

您可以根據需求刪除以下目錄后上傳到服務器。

• asp - ASP程序
• asp.net - ASP.NET程序
• php - PHP程序
• jsp - JSP程序
• examples - 演示文件

3. 修改HTML頁面

1. 在需要顯示編輯器的位置添加textarea輸入框。

<textarea id="editor_id" name="content" style="width:700px;height:300px;">
&lt;strong&gt;HTML內容&lt;/strong&gt;
</textarea>

Note

• id在當前頁面必須是唯一的值。
• 在textarea里設置HTML內容即可實現編輯，在這里需要注意的是，如果從服務器端程序(ASP、PHP、ASP.NET等)直接顯示內 容，則必須轉換HTML特殊字符(>,<,&,”)。具體請參考各語言目錄下面的demo.xxx程序，目前支持ASP、 ASP.NET、PHP、JSP。
• 在有些瀏覽器上不設寬度和高度可能顯示有問題，所以最好設一下寬度和高度。寬度和高度可用inline樣式設置，也可用 編輯器初始化參數 設置。

2. 在該HTML頁面添加以下腳本。

<script charset="utf-8" src="/editor/kindeditor.js"></script>
<script charset="utf-8" src="/editor/lang/zh_CN.js"></script>
<script>
        KindEditor.ready(function(K) {
                window.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內容');

Note

• KindEditor的可視化操作在新創建的iframe上執行，代碼模式下的textarea框也是新創建的，所以最后提交前需要執行 sync() 將HTML數據設置到原來的textarea。
• KindEditor在默認情況下自動尋找textarea所屬的form元素，找到form后onsubmit事件里添加sync函數，所以用form方式提交數據，不需要手動執行sync()函數。
• KindEditor默認采用白名單過濾方式，可用 htmlTags 參數定義要保留的標簽和屬性。當然也可以用 filterMode 參數關閉過濾模式，保留所有標簽。

// 關閉過濾模式，保留所有標簽
KindEditor.options.filterMode = false;

KindEditor.ready(function(K)) {
        K.create('#editor_id');
}