UEDITOR
使用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 |
] |