首页 前端知识 ueditor 工具栏配置_UEditor自定义toolbar工具条

ueditor 工具栏配置_UEditor自定义toolbar工具条

2024-01-02 13:01:26 前端知识 前端哥 10 0 我要收藏

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

1. 方法一:修改ueditorconfig.js里面的toolbars

2. 方法二:实例化编辑器的时候传入toolbars参数

第一种貌似不适合,需要改ueditor.config.js文件,有点麻烦,第二种就很好,我们且来看看第二种方法,示例如下:

$(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','autotypeset', 'blockquote', 'pasteplain', '|',

'forecolor', 'backcolor','insertorderedlist', 'insertunorderedlist',

'selectall', 'cleardoc', 'link', 'unlink','emotion', 'help']

]

});

})

配置项里用竖线 ‘|’ 代表分割线

完整的按钮列表

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', //自定义标题

'autotypeset', //自动排版

'webapp', //百度应用

'touppercase', //字母大写

'tolowercase', //字母小写

'background', //背景

'template', //模板

'scrawl', //涂鸦

'music', //音乐

'inserttable', //插入表格

'drafts', // 从草稿箱加载

'charts', // 图表

]

]


转载请注明出处或者链接地址:https://www.qianduange.cn//article/92.html
评论
发布的文章

jQuery AJAX请求的统一封装

2024-02-01 12:02:53

jQuery知识学习

2024-02-01 12:02:53

JQuery——动画效果

2024-02-01 12:02:52

jQuery复习

2024-02-01 12:02:51

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!