基于Bootstrap响应式所见即所得的jQuery编辑器插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

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