LineControl Editor是一款基于Bootstrap的响应式、所见即所得的富文本编辑器jQuery插件。该富文本编辑器可以使用textarea元素或任何一个容器元素来生成,它拥有常见富文本编辑器的所有功能,使用快捷方便。
插件依赖
该富文本编辑器插件依赖于jQuery2.1.0和Twitter Bootstrap以及 Font-Awesome 字体图标
- Jquery (2.1.0)
- Twitter Bootstrap (3.1.1)
- Font-Awesome (4.0.3)
使用方法
使用该富文本编辑器要在页面中引入jQuery,bootstrap和font-awesome字体图标样式文件,以及editor.css和editor.js文件。
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> <link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <script src="jquery.min.js"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> <link href="editor.css" type="text/css" rel="stylesheet"/> <script src="editor.js"></script>
HTML结构
可以使用一个<div>
来作为该富文本编辑器的容器。
<div id="txtEditor"></div>
初始化插件
在页面加载完毕之后可以通过下面的方法来初始化该富文本编辑器。
<script type="text/javascript"> $(document).ready( function() { $("#txtEditor").Editor(); }); </script>
配置参数
你可以在初始化插件的时候添加一些配置参数。
editor('createMenuItem', {"text": "TouchGlasses", //Text replaces icon if its not available "icon":"fa fa-glass", //This is a Font-Awesome Icon "tooltip": "Touch Glasses", "custom": function(button, parameters){ //Your Custom Function. alert("Cheers!!!"); }, "params": {'option1':"value1"} //Any custom parameters you want to pass //to your custom function. });
下面是该文本编辑器的默认配置:
'texteffects':true, 'aligneffects':true, 'textformats':true, 'fonteffects':true, 'actions' : true, 'insertoptions' : true, 'extraeffects' : true, 'advancedoptions' : true, 'screeneffects':true, 'bold': true, 'italics': true, 'underline':true, 'ol':true, 'ul':true, 'undo':true, 'redo':true, 'l_align':true, 'r_align':true, 'c_align':true, 'justify':true, 'insert_link':true, 'unlink':true, 'insert_img':true, 'hr_line':true, 'block_quote':true, 'source':true, 'strikeout':true, 'indent':true, 'outdent':true, 'fonts':fonts, 'styles':styles, 'print':true, 'rm_format':true, 'status_bar':true, 'font_size':fontsizes, 'color':colors, 'splchars':specialchars, 'insert_table':true, 'select_all':true, 'togglescreen':true
更多关于该富文本编辑器的信息请参考:https://github.com/suyati/line-control
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!