UEditor自定义toolbar工具条

概述使用ueditor的同学都知道，ueditor里有很多功能，很全面，但有时候我们的编辑器不需要太多的功能，比如前台评论或者留言，就不需要这么多功能了，那我们怎么去定制自己想要的工具呢？官方给出了两个方

使用ueditor的同学都知道，ueditor里有很多功能，很全面，但有时候我们的编辑器不需要太多的功能，比如前台评论或者留言，就不需要这么多功能了，那我们怎么去定制自己想要的工具呢？官方给出了两个方法，ueditor工具栏上的按钮列表可以自定义配置,只需要通过修改配置项就可以实现需求：

1. 方法一：修改ueditorconfig.Js里面的toolbars
2. 方法二：实例化编辑器的时候传入toolbars参数
第一种貌似不适合，需要改ueditor.config.Js文件，有点麻烦，第二种就很好，我们且来看看第二种方法，示例如下：

 

<script type="text/JavaScript" src="ueditor/ueditor.config.Js"></script>
<script type="text/JavaScript" src="ueditor/ueditor.all.min.Js"> </script>
<script type="text/JavaScript" src="ueditor/lang/zh-cn/zh-cn.Js"></script>
<script>
$(function() {
//本来是这样的:UE.getEditor('editor'); 传入参数后就是下面那样子了，toolbars里的就是工具的图标
UE.getEditor('editor',{
toolbar: [
['fullscreen','source','undo','redo','bold','italic',
'underline','Fontborder','backcolor','Fontsize','Fontfamily',
'justifyleft','justifyright','justifycenter','justifyjustify',
'strikethrough','superscript','subscript','removeformat',
'formatmatch','@R_301_6843@typeset','blockquote','pasteplain','|',
'forecolor','insertorderedList','insertunorderedList',
'selectall','cleardoc','link','unlink','emotion','help']
]
});
})
</script>

配置项里用竖线 ‘|’ 代表分割线
完整的按钮列表

toolbars: [
[
'anchor',//锚点
'undo',//撤销
'redo',//重做
'bold',//加粗
'indent',//首行缩进
'snapscreen',//截图
'italic',//斜体
'underline',//下划线
'strikethrough',//删除线
'subscript',//下标
'Fontborder',//字符边框
'superscript',//上标
'formatmatch',//格式刷
'source',//源代码
'blockquote',//引用
'pasteplain',//纯文本粘贴模式
'selectall',//全选
'print',//打印
'prevIEw',//预览
'horizontal',//分隔线
'removeformat',//清除格式
'time',//时间
'date',//日期
'unlink',//取消链接
'insertrow',//前插入行
'insertcol',//前插入列
'mergeright',//右合并单元格
'mergedown',//下合并单元格
'deleterow',//删除行
'deletecol',//删除列
'splittorows',//拆分成行
'splittocols',//拆分成列
'splittocells',//完全拆分单元格
'deletecaption',//删除表格标题
'insertTitle',//插入标题
'mergecells',//合并多个单元格
'deletetable',//删除表格
'cleardoc',//清空文档
'insertparagraphbeforetable',//"表格前插入行"
'insertcode',//代码语言
'Fontfamily',//字体
'Fontsize',//字号
'paragraph',//段落格式
'simpleupload',//单图上传
'insertimage',//多图上传
'edittable',//表格属性
'edittd',//单元格属性
'link',//超链接
'emotion',//表情
'spechars',//特殊字符
'searchreplace',//查询替换
'map',//BaIDu地图
'gmap',//Google地图
'insertvIDeo',//视频
'help',//帮助
'justifyleft',//居左对齐
'justifyright',//居右对齐
'justifycenter',//居中对齐
'justifyjustify',//两端对齐
'forecolor',//字体颜色
'backcolor',//背景色
'insertorderedList',//有序列表
'insertunorderedList',//无序列表
'fullscreen',//全屏
'directionalityltr',//从左向右输入
'directionalityrtl',//从右向左输入
'rowspacingtop',//段前距
'rowspacingbottom',//段后距
'pagebreak',//分页
'insertframe',//插入iframe
'imagenone',//默认
'imageleft',//左浮动
'imageright',//右浮动
'attachment',//附件
'imagecenter',//居中
'wordimage',//图片转存
'lineheight',//行间距
'edittip ',//编辑提示
'customstyle',//自定义标题
'@R_301_6843@typeset',//自动排版
'webapp',//百度应用
'touppercase',//字母大写
'tolowercase',//字母小写
'background',//背景
'template',//模板
'scrawl',//涂鸦
'music',//音乐
'inserttable',//插入表格
'drafts',// 从草稿箱加载
'charts',// 图表
]
]

备注：
我配置的时候配置key使用的是toolbar,很多博文使用的是toolbars,但是我使用toolbars不起作用,不知道是不是ueditor的版本问题。

总结

以上是内存溢出为你收集整理的UEditor自定义toolbar工具条全部内容，希望文章能够帮你解决UEditor自定义toolbar工具条所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。