jQuery TE——兼容IE6的輕量級文本編輯器插件

1、jQuery TE簡介

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

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

並且，你能夠自定義它的樣式，寫一些css，不單單是textarea，你能夠將多種標籤變成一個編輯器，好比span，或者p等。

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

2、如何使用

一、引入文件

這裏方便使用，引入的爲CDN地址，你也能夠去官網下載，裏面有Demo。

<link href="http://cdn.bootcss.com/jquery-te/1.4.0/jquery-te.min.css" 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>

二、定義編輯器

你可使用適合標籤來定義編輯器，固然只要有一個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>

三、建立編輯器

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

到如今，一款編輯器就配置好了，固然了，前面咱們說，你能夠自定義它的不少樣式，那麼，下面，咱們就來嘗試一下。

3、自定義

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」