百度编辑器（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'];

在这里继续追加我们刚才追加的那四个按钮

这样，我们就在百度编辑器的按钮集里追加设定了我们自己的按钮，并且实现了文字按钮