ueditor 定制工具欄圖標

在使用Ueditor時，如要簡化工具欄上的按鈕，可以修改配置項的方法： 1. 方法一：修改 ueditor.config.js 里面的 toolbars 2. 方法二：實例化編輯器的時候傳入 toolbars 參數

 

我一般用第二種方法，

<script src="~/Content/ueditor/ueditor.config.js"></script>
<script src="~/Content/ueditor/ueditor.all.min.js"></script>
 <script type="text/plain" id="bcontent" name="bcontent" style="width:100%;height:360px;">
            </script>
<script type="text/javascript">
   
    var ue = UE.getEditor('bcontent', {
        toolbars: [["fullscreen","source","undo","redo","bold","italic","underline","fontborder","strikethrough","superscript","subscript","insertunorderedlist","insertorderedlist","justifyleft","justifycenter","justifyright","justifyjustify","removeformat","simpleupload","snapscreen","emotion","attachment"]]
       ,
        autoHeightEnabled: true,
        autoFloatEnabled: true
    });
</script>

 

這樣可以在一個項目中使用多種風格的工具欄，我的偷懶方法是，先上官方網站下載中有一項定制：http://ueditor.baidu.com/website/download.html#ubuilder，通過定制用鼠標選擇想要的按鈕，完成后下載資源包，下載包中有ueditor.config.js文件打開，拷貝其中的toolbars 參數，在網頁實例化編輯器時傳入 toolbars 參數

var ue = UE.getEditor('bcontent', {
        toolbars: [["fullscreen","source","undo","redo","bold","italic","underline","fontborder","strikethrough","superscript","subscript","insertunorderedlist","insertorderedlist","justifyleft","justifycenter","justifyright","justifyjustify","removeformat","simpleupload","snapscreen","emotion","attachment"]]
       ,
        autoHeightEnabled: true,
        autoFloatEnabled: true
    });