百度編輯器（ueditor）魔改：1、增加自定義按鈕

1、增加自定義按鈕

2、徹底接管檔案上傳

3、高亮提示

4、滾動條管理

5、自定義排版

-----------------------------------------------------------

百度編輯器的使用說明有很多了，這裡不再詳細說明，直接開始進行設定

第一步：追加配置

打開ueditor.config.js配置檔案，找到toolbars屬性

toolbars: [['fullscreen', 'source', '|',
                    'formatContent', // 自定義一鍵排版
                    'imageupload',
                    'fileupload', '|', //附件
                    'paragraph', //段落格式
                    'bold', //加粗
                    'italic', //斜體
                     'justifyleft', //居左對齊
                    'justifyright', //居右對齊
                    'justifycenter', //居中對齊
                    'subscript', //下标
                    'superscript', //上标
                    'spechars', //特殊字元  
                    '|', 'drafts', 'insertimage', '|', 'adwordfilter',
        ],
        ]
           

toolbars就是定義百度編輯器的頂部按鈕集合的，這裡，我們追加了四個自定義按鈕，分别是：formatContent，imageupload，fileupload和adwordfilter

第二步：設定按鈕的樣式

打開themes\default\_css\button.css或buttonicon.css，追加我們的樣式

.edui-toolbar .edui-for-formatcontent .edui-button-wrap .edui-button-body .edui-icon {margin-right:60px;overflow:visible;background-position: -640px -40px}
.edui-toolbar .edui-for-formatcontent .edui-button-wrap .edui-button-body .edui-icon:before {content:"一鍵排版";font-size:12px;line-height:20px;padding-left:24px;width:60px !important;white-space:nowrap;}
.edui-toolbar .edui-for-imageupload .edui-button-wrap .edui-button-body .edui-icon {margin-right:60px;overflow:visible;background-position: -726px -77px}
.edui-toolbar .edui-for-imageupload .edui-button-wrap .edui-button-body .edui-icon:before {content:"圖檔上傳";font-size:12px;line-height:20px;padding-left:24px;width:60px !important;white-space:nowrap;}
.edui-toolbar .edui-for-fileupload .edui-button-wrap .edui-button-body .edui-icon {margin-right:60px;overflow:visible;background-position: -620px -40px}
.edui-toolbar .edui-for-fileupload .edui-button-wrap .edui-button-body .edui-icon:before {content:"檔案上傳";font-size:12px;line-height:20px;padding-left:24px;width:60px !important;white-space:nowrap;}
.edui-toolbar .edui-for-adwordfilter .edui-button-wrap .edui-button-body .edui-icon {margin-right:160px;overflow:visible;background-position: 0px 0px;background:url(/Themes/Images/validatebox_warning.png) no-repeat left center;color:red;}
.edui-toolbar .edui-for-adwordfilter .edui-button-wrap .edui-button-body .edui-icon:before {content:"廣告法違規詞提醒：0個詞";font-size:12px;line-height:20px;padding-left:24px;width:160px !important;white-space:nowrap;font-weight:bold;}
           

這裡，我們追加了對應我們上邊按鈕對應的樣式，每個按鈕對應兩個樣式，一個是按鈕的寬度及圖示設定，另一個則是僞類before，如果按鈕中不需要顯示文字，這個僞類可以不進行設定，.edui-for-按鈕名 就是對應的按鈕樣式了

我在這裡設定的是超出圖示範圍的内容可見overflow:visible，按鈕向右多占一些寬度，margin-right:60px，多占出來的空間，用來顯示僞類中的文字，僞類中的樣式就不細說了

第三步：啟用按鈕功能

打開src\adapter\editorui.js，找到btnCmds修改

var btnCmds = ['undo', 'redo', 'formatmatch',
        'bold', 'italic', 'underline', 'fontborder', 'touppercase', 'tolowercase',
        'strikethrough', 'subscript', 'superscript', 'source', 'indent', 'outdent',
        'blockquote', 'pasteplain', 'pagebreak',
        'selectall', 'print','horizontal', 'removeformat', 'time', 'date', 'unlink',
        'insertparagraphbeforetable', 'insertrow', 'insertcol', 'mergeright', 'mergedown', 'deleterow',
        'deletecol', 'splittorows', 'splittocols', 'splittocells', 'mergecells', 'deletetable', 'drafts',
        'formatContent', 'imageupload', 'fileupload', 'adwordfilter'];
           

在這裡繼續追加我們剛才追加的那四個按鈕

這樣，我們就在百度編輯器的按鈕集裡追加設定了我們自己的按鈕，并且實作了文字按鈕