UEditor自定义工具栏图标
http://www.web-fish.com/front/727.html
使用ueditor的同学都知道，ueditor里有很多功能，很全面，但有时候我们的编辑器不需要太多的功能，比如前台评论或者留言，就不需要这么多功能了，那我们怎么去定制自己想要的工具呢？官方给出了两个方法，ueditor工具栏上的按钮列表可以自定义配置,只需要通过修改配置项就可以实现需求：
1. 方法一：修改ueditorconfig.js里面的toolbars
2. 方法二：实例化编辑器的时候传入toolbars参数
第一种貌似不适合，需要改ueditorconfig.js文件，有点麻烦，第二种就很好，我们且来看看第二种方法，示例如下：
1
|
<script type="text/javascript" src="ueditor/ueditor.config.js"></script>
|
2
|
<script type="text/javascript" src="ueditor/ueditor.all.min.js"> </script>
|
3
|
<script type="text/javascript" src="ueditor/lang/zh-cn/zh-cn.js"></script>
|
4
|
<script>
|
5
|
$(function() {
|
6
|
//本来是这样的:UE.getEditor('editor'); 传入参数后就是下面那样子了，toolbars里的就是工具的图标
|
7
|
UE.getEditor('editor', {
|
8
|
toolbars: [
|
9
|
['fullscreen', 'source', 'undo', 'redo', 'bold', 'italic', 'underline', 'fontborder', 'backcolor', 'fontsize', 'fontfamily', 'justifyleft', 'justifyright', 'justifycenter', 'justifyjustify', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', 'link', 'unlink', 'emotion', 'help']
|
10
|
]
|
11
|
});
|
12
|
})
|
13
|
</script>
|
配置项里用竖线 ‘|’ 代表分割线
完整的按钮列表
1
|
toolbars: [
|
2
|
[
|
3
|
'anchor', //锚点
|
4
|
'undo', //撤销
|
5
|
'redo', //重做
|
6
|
'bold', //加粗
|
7
|
'indent', //首行缩进
|
8
|
'snapscreen', //截图
|
9
|
'italic', //斜体
|
10
|
'underline', //下划线
|
11
|
'strikethrough', //删除线
|
12
|
'subscript', //下标
|
13
|
'fontborder', //字符边框
|
14
|
'superscript', //上标
|
15
|
'formatmatch', //格式刷
|
16
|
'source', //源代码
|
17
|
'blockquote', //引用
|
18
|
'pasteplain', //纯文本粘贴模式
|
19
|
'selectall', //全选
|
20
|
'print', //打印
|
21
|
'preview', //预览
|
22
|
'horizontal', //分隔线
|
23
|
'removeformat', //清除格式
|
24
|
'time', //时间
|
25
|
'date', //日期
|
26
|
'unlink', //取消链接
|
27
|
'insertrow', //前插入行
|
28
|
'insertcol', //前插入列
|
29
|
'mergeright', //右合并单元格
|
30
|
'mergedown', //下合并单元格
|
31
|
'deleterow', //删除行
|
32
|
'deletecol', //删除列
|
33
|
'splittorows', //拆分成行
|
34
|
'splittocols', //拆分成列
|
35
|
'splittocells', //完全拆分单元格
|
36
|
'deletecaption', //删除表格标题
|
37
|
'inserttitle', //插入标题
|
38
|
'mergecells', //合并多个单元格
|
39
|
'deletetable', //删除表格
|
40
|
'cleardoc', //清空文档
|
41
|
'insertparagraphbeforetable', //"表格前插入行"
|
42
|
'insertcode', //代码语言
|
43
|
'fontfamily', //字体
|
44
|
'fontsize', //字号
|
45
|
'paragraph', //段落格式
|
46
|
'simpleupload', //单图上传
|
47
|
'insertimage', //多图上传
|
48
|
'edittable', //表格属性
|
49
|
'edittd', //单元格属性
|
50
|
'link', //超链接
|
51
|
'emotion', //表情
|
52
|
'spechars', //特殊字符
|
53
|
'searchreplace', //查询替换
|
54
|
'map', //Baidu地图
|
55
|
'gmap', //Google地图
|
56
|
'insertvideo', //视频
|
57
|
'help', //帮助
|
58
|
'justifyleft', //居左对齐
|
59
|
'justifyright', //居右对齐
|
60
|
'justifycenter', //居中对齐
|
61
|
'justifyjustify', //两端对齐
|
62
|
'forecolor', //字体颜色
|
63
|
'backcolor', //背景色
|
64
|
'insertorderedlist', //有序列表
|
65
|
'insertunorderedlist', //无序列表
|
66
|
'fullscreen', //全屏
|
67
|
'directionalityltr', //从左向右输入
|
68
|
'directionalityrtl', //从右向左输入
|
69
|
'rowspacingtop', //段前距
|
70
|
'rowspacingbottom', //段后距
|
71
|
'pagebreak', //分页
|
72
|
'insertframe', //插入Iframe
|
73
|
'imagenone', //默认
|
74
|
'imageleft', //左浮动
|
75
|
'imageright', //右浮动
|
76
|
'attachment', //附件
|
77
|
'imagecenter', //居中
|
78
|
'wordimage', //图片转存
|
79
|
'lineheight', //行间距
|
80
|
'edittip ', //编辑提示
|
81
|
'customstyle', //自定义标题
|
82
|
'autotypeset', //自动排版
|
83
|
'webapp', //百度应用
|
84
|
'touppercase', //字母大写
|
85
|
'tolowercase', //字母小写
|
86
|
'background', //背景
|
87
|
'template', //模板
|
88
|
'scrawl', //涂鸦
|
89
|
'music', //音乐
|
90
|
'inserttable', //插入表格
|
91
|
'drafts', // 从草稿箱加载
|
92
|
'charts', // 图表
|
93
|
]
|
94
|
]
|
UEditor自定义工具栏图标相关推荐
- ueditor 工具栏配置_百度ueditor编辑器自定义工具栏
百度ueditor编辑器自定义工具栏: //引入编辑器配置文件和核心文件 //内容容器 var ue = UE.getEditor('content', { toolbars: [ [ //自定义的工 ...
- 百度编辑器（UEditor）自定义工具栏
百度编辑器(UEditor)自定义工具栏的自定义 百度编辑器默认功能比较齐全,但是不一定是我们所需要的,有的功能可以去掉,用自己想要的就可以了,可以参考百度官方文档! 百度编辑器默认配置展示界面 如何 ...
- [VC]基于对话框程序，自定义工具栏(支持真彩色图标，可添加文字)
转载自 ewook 最终编辑 ewook 应该是一个老生常谈的问题了,仍然决定写一写的原因是:在网上搜一搜,讲得有效易懂的还真没发现(可能是大虾们都懒得去写...) 动机:传统的VC工具栏只支持16色 ...
- uve 使用百度ueditor自定义图片上传,在线图片插入,在线图片管理
前言 本帖所有内容均用于学习使用,如有涉及侵权,请看到后联系我进行删帖 上图片 环境 "axios": "^0.21.1", "element-ui& ...
- 第三波假期干货——webstrom工具栏图标
在WS中使用工具栏上的快捷图标来配合工作可以有效提高效率,因为你不用去记住一些快捷键,只要点一下鼠标即可.不过在WS中有很多实用功能却是没有自带个性图标的,导致自定义工具栏后可能就是好几个一模一样的绿 ...
- 火狐浏览器书签工具栏图标_在Firefox中添加垂直书签工具栏
火狐浏览器书签工具栏图标 Have you ever wanted a vertical bookmarks toolbar instead of a horizontal one? Then con ...
- css中使用自定义字体 和 自定义字体图标
下载并安装Adobe Illustrator CC 2019简称AI 下载并安装FontLab7简称AI 软件安装包: 链接: https://pan.baidu.com/s/1C8d44Y2z4ro ...
- R语言编写自定义函数、创建使用ggplot2生成图标（icon）的主题（theme）函数、使用ggplot2以及自定义的图标主题函数创建箱图（boxplot）图标、ggsave保存图标(png、svg
R语言编写自定义函数.创建使用ggplot2生成图标(icon)的主题(theme)函数.使用ggplot2以及自定义的图标主题函数创建箱图(boxplot)图标.ggsave保存图标(png.svg ...
- 苹果风格：分享一组免费的自定义 MacOS 图标
与大家分享我在上网冲浪时发现的令人兴奋的新图标--来自 Ramotion.他们实践最前沿的图标设计理念,为您的应用程序的开发和支持提供全方位的服务.下面分享的这组免费的自定义 MacOS 图标既是来自 ...
- 【Flutter】Icons 组件 ( FlutterIcon 下载图标 | 自定义 svg 图标生成 ttf 字体文件 | 使用下载的 ttf 图标文件 )
文章目录 一.FlutterIcon 下载图标 二.自定义 svg 图标生成 ttf 字体文件 三.使用下载的 ttf 图标文件 四.完整代码示例 五.相关资源 一.FlutterIcon 下载图标 ...
最新文章
- Python写入到csv文件存在空行的解决方法
- SOA和微服务之间的区别（应用和数据的垂直拆分水平拆分）
- 2013年第四届蓝桥杯C/C++ A组国赛 —— 第三题：埃及分数
- 致Go学习者, 该跟大佬学习做项目了
- 使用java实现持续移动的小球
- 离散余弦变换原理及实现【转载】
- 【Docker】elasticsearch 监控工具 elasticsearch-HQ
- python turtle库下载_python turtle库的几个小demo
- php文档头,头部文档（header.php）
- commit git 删除文件夹_从Git提交中删除文件
- Mysql事务，并发问题，锁机制
- 在linux内核中修改TCP MSS值
- idea无法使用mvn命令
- Pdf 插入图片 | 指定位置插入图片 不改变原格式 直接操作
- 如何注册和设置 zoom Background
- 华为鸿蒙系统烤箱,华为鸿蒙OS系统如何支持形态各异的产品？
- 实施化化工厂人员定位系统势在必行,你不知道的化化工厂人员定位
- EXCEL或者WPS excel 某列从某行开始以上或以下全选的操作 ，某行从某列开始的以后全选
- 2021-11-3 软件模拟IIC时序，并和EEPROM存储芯片24C02双向通信以及显示功能
- JOL - Java Object Layout