效果預覽：

使用方法：

1. 下載編輯器

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

2. 部署編輯器

解壓 kindeditor-x.x.x.zip 檔案，將所有檔案上傳到您的網站程式目錄裡，例如：http://您的域名/editor/

Note

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

• asp - ASP程式
• asp.net - ASP.NET程式
• php - PHP程式
• jsp - JSP程式
• examples - 演示檔案

3. 修改HTML頁面

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

Note

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

2. 在該HTML頁面新增以下指令碼。

Note

• 第一個引數可用其它CSS選擇器，匹配多個textarea時只在第一個元素上載入編輯器。
• 通過K.create函式的第二個引數，可以對編輯器進行配置，具體引數請參考 編輯器初始化引數 。

4. 獲取HTML資料

Note

• KindEditor的視覺化操作在新建立的iframe上執行，程式碼模式下的textarea框也是新建立的，所以最後提交前需要執行 sync() 將HTML資料設定到原來的textarea。
• KindEditor在預設情況下自動尋找textarea所屬的form元素，找到form後onsubmit事件裡新增sync函式，所以用form方式提交資料，不需要手動執行sync()函式。

 常見問題：

關於js提交獲取不到值

KindEditor的視覺化操作在新建立的iframe上執行，程式碼模式下的textarea框也是新建立的，所以最後提交前需sync(),最簡單的方法，初始化kindEditor如下：

KindEditor.ready(function (K) {
            var editor1 = K.create('#editor', {
               afterCreate : function() {
           this.sync();
          },
          afterBlur:function(){
              this.sync();
          }       
            });
        });