富文本编辑器UEditor自定义工具栏（一、基础配置与字体、背景色、行间距、超链接实现）...

导读：UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器，功能强大，可定制，是一款优秀的国产在线富文本编辑器，编辑器内可插入图片、音频、视频等。

一、UEditor自定义工具栏效果图如下：

二、UEditor富文本编辑器环境搭建及项目引用

环境搭建不再赘述，请自行查阅或者参考以下链接

1.UEditor官网：http://ueditor.baidu.com/website/

2.UEditor官网演示：http://ueditor.baidu.com/website/onlinedemo.html

3.UEditor官网入门部署和体验：http://fex.baidu.com/ueditor/

4.UEditor添加一个普通按钮:http://blog.csdn.net/hougelou/article/details/40117881

三、UEditor自定义工具栏-常规按钮

1.思路

隐藏掉UEditor自带工具栏，使用自定义的工具栏，在功能按钮上添加（调用）对应的UEditor相关命令

2.实例化编辑器

1  <div class="editBox">
2 <textarea id="editor" type="text/plain"></textarea>
3  </div>

Html部分

 1 <script type="text/javascript">
 2     var ue = UE.getEditor('editor', {
 3         autoHeightEnabled: true
 4         ,initialFrameWidth: '100%'  //初始化编辑器宽度,默认1000
 5         ,minFrameWidth: '760'    //编辑器拖动时最小宽度,默认800
 6         ,initialFrameHeight: 450 //初始化高度
 7         ,minFrameHeight:630 
 8         ,toolbars: [
 9             [
10        'fullscreen', 'source', '|', 'undo', 'redo', '|',
11        'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
12        'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
13        'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
14        'directionalityltr', 'directionalityrtl', 'indent', '|',
15        'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
16        'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
17        'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe', 'insertcode', 'webapp', 'pagebreak', 'template', 'background', '|',
18        'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
19        'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|'