jQuery TE是一款輕量級的jQuery的網頁編輯器插件，壓縮后只有19.5KB，兼容性非常好的所見即所得的文本編輯器。經過測試，兼容IE6。

一、jQuery TE簡介

• 官方頁面
• 項目Demo
• 官方文檔

jQuery TE是一款輕量級的jQuery的網頁編輯器插件，壓縮后只有19.5KB，兼容性非常好的所見即所得的文本編輯器。經過測試，兼容IE6。

而且，你可以自定義它的樣式，寫一些css，不僅僅是textarea，你可以將多種標簽變成一個編輯器，比如span，或者p等。

兼容性：IE6+、chrome、Firefox、Opera、Safari、Yandex Browser等

二、如何使用

1、引入文件

這里方便使用，引入的為CDN地址，你也可以去官網下載，里面有Demo。

<link  rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/jquery-te/1.4.0/jquery-te.min.js"></script>

2、定義編輯器

你可以使用適合標簽來定義編輯器，當然只要有一個class值與下面的script標簽中的對應即可。但平時，我們創建編輯器，一般使用textarea標簽。

<textarea name="textarea" class="jqte-test"></textarea>

或者，是這樣（使用一種即可）：

<input class="jqte-test" name="text2" value="Articles should be in here">
<div class="jqte-test" name="text3">Articles should be in here</div>
<span class="jqte-test" name="text4">Articles should be in here</span>
<p class="jqte-test" name="text5">Articles should be in here</p>

3、創建編輯器

<script>
        $('.jqte-test').jqte();
    </script>

到現在，一款編輯器就配置好了，當然了，前面我們說，你可以自定義它的很多樣式，那么，下面，我們就來嘗試一下。

三、自定義

1.禁用或啟用某個功能

比如，我不想使用加粗的按鈕，在選擇項中消失，這時候就可以在js中寫，如下：

<script>
        $('.jqte-test').jqte({
            "b":false
        });
    </script>

關于可以啟用會禁止多少個功能按鈕，可以參考其官方文檔。下面貼個圖，一些功能我也沒試：

2.事件

jQuery TE提供了三個基本事件：

change：文本框內容改變時觸發
focus：聚焦在文本框時觸發
blur：文本框失去焦點時觸發

使用方法：

<script>
        $('.jqte-test').jqte({
            blur: function(){ 
                        alert("失去焦點"); 
                    }
        });
    </script>

其他調用方法類似，只需改變blue為change或者focus，然后在function中寫jquery語句便可以了。

3.其他

除了上面的一些功能外，該編輯器支持鍵盤快捷鍵操作，如下：所有快捷鍵四Ctrl+xx的形式，比如，字體加粗就是“Ctrl+B”