KindEditor用法介紹

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

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

<script type="text/javascript">
    //KindEditor腳本
    var editor;
    KindEditor.ready(function(K) {
        editor = K.create('#你的textarea的id名', {
        });
    });
</script>

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

 

例子：

假設我們現在有一個textarea標籤，id設爲"kindEditor_demo"

1	<textarea id="kindEditor_demo"></textarea>

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

1 2 3 4 5 6 7 8

<script type="text/javascript">     //KindEditor腳本     var editor;     KindEditor.ready(function(K) {         editor = K.create('#kindEditor_demo', {         });     }); </script>

那麼這個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', {     }); }); </script>

上述代碼之前提到過，其中的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編譯器裏的內容