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”