UEditor新增自定义按钮---视频/音频上传

效果如图：

我添加了两个按钮，所以下例中全都加了两个按钮对应的东西

1. 在ueditor.config.js文件里的toolbars的数组中添加一个你需要新增的按钮功能名称
我这里添加了两个 ‘customvideo’, ‘customaudio’

2.zh-cn.js 中找到labelMap并添加第一步新增的按钮对应的提示内容，主要是用于鼠标放置上去显示的文字提示内容

3. 在图标雪碧图中加入需要的图标，如果雪碧图中已有想用的图标可忽略这一步

4.在 _css/buttonicon.css添加图标样式

.edui-default  .edui-for-customvideo .edui-icon {
    background-position: -725px -100px;
}

.edui-default  .edui-for-customaudio .edui-icon {
    background-position: -755px -100px;
}

5. ueditor.all.js 文件中的"btnCmds"添加, ‘customvideo’, 'customaudio’

6. 添加自定义按钮的功能 ，在ueditor.all.js中添加如下代码，并加入你需要的功能

/**
 * 用户自定义插入视频
 * @command customvideo
 * @method execCommand
 * @param { String } cmd 命令字符串
 * @example
 * ```javascript
 * //editor是编辑器实例
 * editor.execCommand( 'customvideo' );
 * ```
 */
UE.commands['customvideo'] = {
    execCommand : function( cmdName) {
    	// 自定义功能代码
    }
};

上传音频和视频是一样的逻辑，下面我就只贴上上传视频的代码

UE.commands['customvideo'] = {
    execCommand : function( cmdName) {
        console.log("customvideo...")
        var me = this,
            eventDom = event.currentTarget,
            inputDom;
        inputDom = $('<input type="file" accept=".mp4, .ogg, .webm" id="edui_input_' + (+new Date()).toString(36) + '" class="edui_input_video" style="display: none;">');
        if ($(eventDom).next(".edui_input_video").length > 0) {
            $(eventDom).next(".edui_input_video").remove();
        }
        $(eventDom).after(inputDom);
        $(inputDom).click(function(evt) {
            evt.stopPropagation();
        })
        $(inputDom).change(function() {
            if(!this.value) return;
            var fieldName, urlPrefix, maxSize, allowFiles, actionUrl,
                loadingHtml, errorHandler, successHandler,
                file = this.files[0],
                filetype = 'file',
                loadingId = 'loading_' + (+new Date()).toString(36);

            fieldName = me.getOpt(filetype + 'FieldName');
            urlPrefix = me.getOpt(filetype + 'UrlPrefix');
            maxSize = me.getOpt(filetype + 'MaxSize');
            // maxSize = 
            allowFiles = me.getOpt(filetype + 'AllowFiles');
            actionUrl = me.getActionUrl(me.getOpt(filetype + 'ActionName'));
            errorHandler = function(title) {
                var loader = me.document.getElementById(loadingId);
                loader && domUtils.remove(loader);
                me.fireEvent('showmessage', {
                    'id': loadingId,
                    'content': title,
                    'type': 'error',
                    'timeout': 4000
                });
            };

            loadingHtml = '<p>' +
                '<img class="loadingclass" id="' + loadingId + '" src="' +
                me.options.themePath + me.options.theme +
                '/images/spacer.gif" title="' + (me.getLang('autoupload.loading') || '') + '" >' +
                '</p>';
            successHandler = function(data) {
                var link = urlPrefix + data.url,
                    loader = me.document.getElementById(loadingId);

                var filePath = link.split('?')[0];
                var index= filePath.lastIndexOf(".");
                var ext = filePath.substr(index+1);
                $(loader).after('<video controls><source src="' + link + '" type="video/' + ext +'">您的浏览器不支持 HTML5 video 标签。</video>');
                $(loader).remove();
            };

            /* 插入loading的占位符 */
            me.execCommand('inserthtml', loadingHtml);

            /* 判断后端配置是否没有加载成功 */
            if (!me.getOpt(filetype + 'ActionName')) {
                errorHandler(me.getLang('autoupload.errorLoadConfig'));
                return;
            }
            /* 判断文件大小是否超出限制 */
            if(file.size > maxSize) {
                alert(file.size);
                alert(maxSize);
                errorHandler(me.getLang('autoupload.exceedSizeError'));
                return;
            }
            /* 判断文件格式是否超出允许 */
            var fileext = file.name ? file.name.substr(file.name.lastIndexOf('.')):'';
            if ((".mp4.ogg.webm" + '.').indexOf(fileext.toLowerCase() + '.') == -1) {
                errorHandler(me.getLang('autoupload.exceedTypeError'));
                return;
            }

            /* 创建Ajax并提交 */
            var xhr = new XMLHttpRequest(),
                fd = new FormData(),
                params = utils.serializeParam(me.queryCommandValue('serverparam')) || '',
                url = utils.formatUrl(actionUrl + (actionUrl.indexOf('?') == -1 ? '?':'&') + params);

            fd.append(fieldName, file, file.name || ('blob.' + file.type.substr('image/'.length)));
            fd.append('type', 'ajax');
            xhr.open("post", url, true);
            xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
            xhr.addEventListener('load', function (e) {
                try{
                    var json = (new Function("return " + utils.trim(e.target.response)))();
                    if (json.state == 'SUCCESS' && json.url) {
                        successHandler(json);
                    } else {
                        errorHandler(json.state);
                    }
                }catch(er){
                    errorHandler(me.getLang('autoupload.loadError'));
                }
            });
            xhr.send(fd);
        })
        $(inputDom).click();
    }
};