jQuery TE——兼容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 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>

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”

来源：oschina

链接：https://my.oschina.net/u/1254432/blog/337400