百度编辑器(UEditor)自定义工具栏

Posted JiYF大男孩

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了百度编辑器(UEditor)自定义工具栏相关的知识,希望对你有一定的参考价值。

百度编辑器(UEditor)自定义工具栏的自定义

百度编辑器默认功能比较齐全,但是不一定是我们所需要的,有的功能可以去掉,用自己想要的就可以了,可以参考百度官方文档!

百度编辑器默认配置展示界面

如何自定义工具栏:

方法一:在实例化编辑器的时候红色文字部分便是你所需要的

 1 <script type="text/javascript">  
 2     var editor = UE.getEditor(\'container\',{  
 3         //这里可以选择自己需要的工具按钮名称,此处仅选择如下五个  
 4         toolbars:[[\'FullScreen\', \'Source\', \'Undo\', \'Redo\',\'bold\',\'test\']],  
 5         //focus时自动清空初始化时的内容  
 6         autoClearinitialContent:true,  
 7         //关闭字数统计  
 8         wordCount:false,  
 9         //关闭elementPath  
10         elementPathEnabled:false,  
11         //默认的编辑区域高度  
12         initialFrameHeight:300  
13         //更多其他参数,请参考ueditor.config.js中的配置项  
14     });  
15 </script>

方法二:

直接修改ueditor.config.js配置文件

 找到:红色框中的内容并注释掉重新选中自己需要的

第一步:

第二步:修改成你所需要的比如

 

 1 , toolbars: [[
 2         \'link\', //超链接
 3         \'unlink\', //取消链接
 4         \'|\',
 5         \'forecolor\', //字体颜色
 6         \'backcolor\', //背景色
 7         \'fontfamily\', //字体
 8         \'fontsize\', //字号        
 9         \'|\',        
10         \'bold\', //加粗
11         \'italic\', //斜体
12         \'underline\', //下划线
13         \'strikethrough\', //删除线
14         \'|\',
15         \'formatmatch\', //格式刷
16         \'removeformat\', //清除格式
17         \'|\',
18         \'insertorderedlist\', //有序列表
19         \'insertunorderedlist\', //无序列表
20         \'|\',
21         \'inserttable\', //插入表格
22         \'paragraph\', //段落格式
23         \'simpleupload\', //单图上传
24         \'imagecenter\', //居中
25         \'attachment\', //附件
26         
27         \'|\',
28         \'justifyleft\', //居左对齐
29         \'justifycenter\', //居中对齐
30         \'horizontal\', //分隔线
31         \'|\',
32         \'blockquote\', //引用
33         \'insertcode\', //代码语言
34         
35         \'|\',
36         \'source\', //源代码
37         \'preview\', //预览
38         \'fullscreen\', //全屏
39         ]]

展现效果:

完整的按钮列表参考:

 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     ]

 

以上是关于百度编辑器(UEditor)自定义工具栏的主要内容,如果未能解决你的问题,请参考以下文章

百度富文本编辑器UEditor自定义上传图片接口

百度ueditor编辑器php图片上传路径怎么自定义修改

如何简化百度编辑器Ueditor功能按钮

UEditor工具栏自定义位置

dedecms自定义模型内容调用多个Ueditor

UEditor自定义toolbar工具条