百度編輯器(UEditor)自定義工具欄的自定義

百度編輯器默認功能比較齊全,可是不必定是咱們所須要的,有的功能能夠去掉,用本身想要的就能夠了,能夠參考百度官方文檔!html

百度編輯器默認配置展現界面

技術分享

如何自定義工具欄:web

方法一:在實例化編輯器的時候紅色文字部分即是你所須要的

 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中的配置項  
           allHtmlEnabled: false,//提交到後臺的數據是否包含整個html字符串
           allowDivTransToP: false//阻止div標籤自動轉換爲p標籤
14     });  
15 </script>

其餘例子:

var ue = UE.getEditor('editor', {
        wordCount: true, //開啓字數統計
        elementPathEnabled: false,//是否啓用元素路徑,默認是顯示
        maximumWords: 10000,       //容許的最大字符數
        initialContent: '',    //初始化編輯器的內容,也能夠經過textarea/script給值,看官網例子
        autoClearinitialContent: true, //是否自動清除編輯器初始內容,注意:若是focus屬性設置爲true,這個也爲真,那麼編輯器一上來就會觸發致使初始化的內容看不到了
        pasteplain: true,  //是否默認爲純文本粘貼。false爲不使用純文本粘貼,true爲使用純文本粘貼
        imageUrlPrefix: "http://localhost:4176", /* 圖片訪問路徑前綴 */
        imagePathFormat: "/UploadFiles/{yyyy}{mm}{dd}/{time}{rand:6}",/* 上傳保存路徑,能夠自定義保存路徑和文件名格式 */
        urlTarget: "Email",
        initialFrameWidth: 860, //初始化寬度
        initialFrameHeight: 420, //初始化高度
        autoHeightEnabled: false //關閉高度自適應
});

 

方法二:

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

 找到:紅色框中的內容並註釋掉從新選中本身須要的webapp

第一步:

技術分享

第二步:修改爲你所須要的好比

 

 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     ]
相關文章
相關標籤/搜索