http://www.web-fish.com/front/727.html

使用ueditor的同學都知道，ueditor里有很多功能，很全面，但有時候我們的編輯器不需要太多的功能，比如前臺評論或者留言，就不需要這么多功能了，那我們怎么去定制自己想要的工具呢？官方給出了兩個方法，ueditor工具欄上的按鈕列表可以自定義配置,只需要通過修改配置項就可以實現(xiàn)需求：

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

2. 方法二：實例化編輯器的時候傳入toolbars參數(shù)

第一種貌似不適合，需要改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');? 傳入?yún)?shù)后就是下面那樣子了，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', //圖片轉(zhuǎn)存

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自定义工具栏图标的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。