富文本编辑器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.实例化编辑器

 Html部分

 JS实例化编辑器

说明：编辑器有很多可自定义的参数项，在实例化的时候可以传入给编辑器，这样不必改动源码，不影响其他地方的调用（此处实例化为满足个性化需求，所传参数较多）；

（1）JS实例化编辑器时toolbars参数配置，本示例中配置了所有功能按钮(可按需配置)；

（2）不配置toolbars参数，则在自定义功能按钮上调用相关命令时，报异常，操作会无效，因此图省事，配置了所有按钮；

（3）本示例中使用的是1.4.3的.Net版本

3.隐藏工具栏的方法

（1）若是所有项目或整个网站都使用同一种样式的编辑器，可以考虑通过改动源码，隐藏工具栏；

按此路径“ueditor\themes\default\css”打开ueditor.css文件，搜索或在行号大约148行的“.edui-default .edui-editor-toolbarbox处添加display:none“；

 注：此种方法在页面加载时，UEditor自带工具栏不会出现闪现消失的情况；

（2）通过前台JS配置及JS脚本控制工具栏的隐藏，避免对其他地方引用UEditor造成影响；

 JS隐藏UEditor工具栏

 Html部分以字体加粗为例调用UEditor命令

注：其中ue为UEditor实例化后的全局变量，与方法（1）比较，此种方法在页面加载时，UEditor自带工具栏有可能会出现短暂闪现又消失的情况，不过影响不大，可忽略；

 附加一些其他命令（其他命令详见 UEditor官网命令列表 ：http://ueditor.baidu.com/doc/#COMMAND.LIST）：

• 斜体 　　ue.execCommand('italic')；

• 下划线　 ue.execCommand('underline')；

• 居中对齐 ue.execCommand('justify','center')；

• 首行缩进 ue.execCommand('indent')；

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

加粗、斜体、下划线、居中对齐、首行缩进等功能按钮可直接调用UEditor对应相关命令，但涉及悬浮窗、弹层的功能按钮则需要特殊处理。

（1）字体颜色

自定义工具栏-字体颜色效果图

工具栏字体颜色功能按钮源码

• 查看字体颜色对应的Html源码，对应id为“eudi24“,点击事件为 $EDITORUI["edui24"]._onButtonClick(event, this)；

• 在自定义工具栏所在页面查看字体颜色功能按钮对应id，实例化时参数配置不同，功能按钮对应id可能会变化；

• 假设自定义工具栏所在页面字体颜色功能按钮对应id为“eudi24“，实现调用命令如下：

 自定义工具栏-字体颜色调用命令

注：功能按钮必须要有id属性，字体颜色悬浮窗会根据id来定位悬浮窗位置，没有id，字体颜色悬浮窗位置会不正确；

（2）背景色

原理同字体颜色

 自定义工具栏-背景色调用命令

（3）字体、字号

自定义工具栏-字体效果图

 自定义工具栏-字体、字号调用命令

本示例中，通过调用了字体、字号相关命令来实现，也可以通过切图人员给的相关脚本来实现。

此外还需要处理的情况：

• 选择字体、字号后，字体、字号功能按钮显示的字体、字号相应变化；

 选择字体、字号时，字体、字号相应变化

• 编辑器内文字部分获得焦点后，字体，字号应该为焦点处文字的字体、字号；

 编辑器内文字获得焦点，字体字号处理

（4）行间距

自定义工具栏-行间距效果图

 自定义工具栏-行间距调用命令

UEditor实例化时（见 “三、UEditor自定义工具栏-常规按钮 JS实例化编辑器“”）可根据需求配置所需要的行间距，也可以不配置行间距，使用UEditor默认配置；’

//,lineheight:['1', '1.5','1.75','2', '3', '4', '5']

鉴于1倍行间距文字较密集，产品经理要求行间距默认为1.5，实现的方式是改动源码：

按此路径“ueditor\ueditor.all.js“打开ueditor.all.js文件约6906行，添加“line-height:1.5em“,同理也可更改其他默认样式；

自定义工具栏-行间距默认1.5源码修改

注：默认1.5行间距，则在编辑器初始化完之后，行间距应该默认勾选1.5，处理方法如下：

 自定义工具栏-默认勾选1.5行间距

（5）超链接

自定义工具栏-超链接效果图

 自定义工具栏-超链接调用命令

结语

本篇主要介绍富文本编辑器1.4.3版本自定义工具栏实现方法，探讨的功能按钮有加粗、斜体、居中对齐（居左对齐、居右对齐）、首行缩进常规按钮，字体、字号、行间距涉及悬浮窗按钮及超链接涉及弹层按钮功能实现及一些细节处理；不足或错误之处，欢迎探讨与斧正。下一篇将介绍自定义工具栏插入图片、音频、视频涉及弹层的个性化功能按钮实现。

http://www.cnblogs.com/EvanFan/p/7206793.html

更多精彩分享

• 陆老师 [海军工程大学 硕士 — 嵌入式开发专家] 2024-03-26 11:26:03.003
• 时光飞逝 2024-03-26 11:25:53.823
• 纸上得来终觉浅 2024-03-26 11:25:42.68
• 软件行业发展七大方向 2024-03-26 11:25:34.457
• 如何组建测试团队？ 2024-03-26 11:25:25.33
• 在青岛学习JavaEE哪家学校最好？ 2024-03-26 11:25:16.78
• 教务排课系统 2024-03-26 11:24:56.74
• 青岛帕特智能科技有限公司 2024-03-26 11:24:30.433
• 消息队列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26 11:24:15.657
• 感谢，我亲爱的万码学堂 2024-03-26 11:12:06.6

陆老师 [海军工程大学 硕士 — 嵌入式开发专家]