标签：me UEditor 自定义 customvideo filetype --- edui file var

效果如图：

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

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();
    }
};

标签：me,UEditor,自定义,customvideo,filetype,---,edui,file,var
来源： https://blog.csdn.net/weixin_42979149/article/details/115379685

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。