KindEditor是一套很方便的html編譯器插件

KindEditor是一套很方便的html編譯器插件。在這里做一個簡單的使用介紹。

首先在官網上下載最新的KindEditor文件（里面有jsp，asp等不同版本文件夾，可以刪掉你不需要的版本），

把整個文件夾放到你的web服務器里（放哪都行，但放的位置需要有訪問權限，最好建立一個權限為777的public文件夾，把KindEditor文件夾放進去）。

之后在需要用到KindEditor的頁面引入以下兩個js文件（具體js目錄根據你的KindEditor文件夾位置而定）

1

2

< script charset="utf-8" src="kindeditor文件夾所在目錄/kindeditor文件夾名/kindeditor.js">

< script charset="utf-8" src="kindeditor文件夾所在目錄/kindeditor文件夾名/lang/zh-CN.js">

之后再在這個頁面寫一個js腳本，注意：這個腳本的作用就是控制該頁面的KindEditor編輯器，js腳本如下：

這個腳本里的?editor = K.create('#你的textarea的id名', {}); 這個，對應的就是一個KindEditor編輯器。

例子：

假設我們現在有一個textarea標簽，id設為"kindEditor_demo"

1

< textarea id="kindEditor_demo">

我們再引入剛剛提到的兩個js文件后，再寫如下js代碼到該頁面，

1

2

3

4

5

6

7

8

那么這個textarea標簽就會變成KindEditor編譯器

用法一，自己選擇需要的功能：

按照上面的部署方式，最終呈現的是一個完整版KindEditor編譯器，可其中很多功能不一定需要，那么可以在剛剛提到的js腳本中對KindEditor編譯器進行控制。

假設我們只需要：插入表情和文字顏色的功能。則可以在js腳本中設定“items?”選項。如：

1

2

3

4

5

KindEditor.ready( function (K) {

editor = K.create( '#你的textareaid名' , {

items : [ 'forecolor' , 'emoticons' ]

});

});

其中的'forecolor','emoticons'代表“文字顏色功能”和“插入表情功能”。（具體更多的功能名可以查看官方網址的開發文檔）。

（同理，對于該編譯器的很多設置都是通過這種方式來完成的）

用法二，KindEditor的一個奇怪特性：

在頁面第一次加載時，不能隱藏KindEditor所在的標簽，否則即使后面利用js將css的display設置為block，KindEditor也不會顯示。

解決的辦法是先讓網頁將所有的KindEditor編輯器加載完后，再用下面這種方法將需要隱藏的部分隱藏

1

2

3

4

5

window.onload = hidden_box;

function hidden_box(){

$( '#inner_wrap' ).css( 'display' , 'none' );

}

這段js腳本是等頁面加載完后才會執行，所以此時KindEditor已經加載完了，可以被隱藏了

用法三，獲取KindEditor編譯器的內容。

我們看到的KindEditor編譯器實際上不是我們之前自己寫在頁面中的textarea標簽，當我們在KindEditor編譯器里輸入完內容并提交表單后，KindEditor會自動將我們輸入的內容“同步”到之前我們自己建的textarea標簽中，之后再發送表單。

所以我們直接獲取textarea標簽的內容實際是沒用的，正確的做法是讓KindEditor將數據“同步”到textarea標簽中后，再獲取textarea標簽中的內容。

我們可以利用我們之前建的KindEditor對象對KindEditor編譯器進行操作，令其進行同步數據。

1

2

3

4

5

KindEditor.ready( function (K) {

editor = K.create( '#text_new_continue' , {

});

});

上述代碼之前提到過，其中的editor就是“id為text_new_continue的textarea標簽”所對應的KindEditor對象。

當我們想令KindEditor編譯器將數據同步到“id為text_new_continue的textarea標簽”時，就可以操作editor對象。

如：

1

2

editor.sync(); //將KindEditor的數據同步到textarea標簽。

var value_content = $( "#text_new_continue" ).val();

其中value_content就是KindEditor編譯器里的內容

文檔：http://kindeditor.net/docs/usage.html

HTML

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。