最好用的web編輯器 KindEditor 在…
阿新 • • 發佈:2019-02-05
效果預覽:
使用方法:
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頁面
- 在需要顯示編輯器的位置新增textarea輸入框。
Note
- id在當前頁面必須是唯一的值。
- 在textarea裡設定HTML內容即可實現編輯,在這裡需要注意的是,如果從伺服器端程式(ASP、PHP、ASP.NET等)直接顯示內容,則必須轉換HTML特殊字元(>,<,&,”)。具體請參考各語言目錄下面的demo.xxx程式,目前支援ASP、ASP.NET、PHP、JSP。
- 在有些瀏覽器上不設寬度和高度可能顯示有問題,所以最好設一下寬度和高度。寬度和高度可用inline樣式設定,也可用 編輯器初始化引數 設定。
- 在該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();
}
});
});