jQuery TE——兼容IE6的轻量级文本编辑器插件
一、jQuery TE简介
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”
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。