Wangeditor uploading local video modification

original text

//
/* menu - video */
//  Constructors 
function Video(editor) {
    
    this.editor = editor;
    this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-play"><i/></div>');
    this.type = 'panel';
 
    //  Are you currently  active  state 
    this._active = false;
}
 
//  Prototype 
Video.prototype = {
    
 
    constructor: Video,
 
    onClick: function onClick() {
    
        this._createInsertPanel();
    },
 
    _createInsertPanel: function _createInsertPanel() {
    
        var editor = this.editor;
        var uploadVideo = editor.uploadVideo;
        var config = editor.config;
 
        // id
        var upTriggerId = getRandom('up-trigger');
        var upFileId = getRandom('up-file');
 
        // tabs  Configuration of 
        var tabsConfig = [{
    
            title: ' Upload  video',
            tpl: '<div class="w-e-up-img-container">\n ' +
            '<div id="' + upTriggerId + '" class="w-e-up-btn">\n ' +
            '<i class="w-e-icon-upload2"></i>\n </div>\n ' +
            '<div style="display:none;">\n <input id="' + upFileId + '" type="file" multiple="multiple" accept="audio/mp4, video/mp4"/>\n ' +
            '</div>\n </div>',
            events: [{
    
                //  Trigger select video 
                selector: '#' + upTriggerId,
                type: 'click',
                fn: function fn() {
    
                    var $file = $('#' + upFileId);
                    var fileElem = $file[0];
                    if (fileElem) {
    
                        fileElem.click();
                    } else {
    
                        //  return  true  Can be turned off  panel
                        return true;
                    }
                }
            }, {
    
                //  Select video complete 
                selector: '#' + upFileId,
                type: 'change',
                fn: function fn() {
    
                    var $file = $('#' + upFileId);
                    var fileElem = $file[0];
                    if (!fileElem) {
    
                        //  return  true  Can be turned off  panel
                        return true;
                    }
 
                    //  Get the selected  file  The object list 
                    var fileList = fileElem.files;
                    if (fileList.length) {
    
                        uploadVideo.uploadVideo(fileList);
                    }
 
                    //  return  true  Can be turned off  panel
                    return true;
                }
            }]
        }
        ]; // tabs end
 
        //  Judge  tabs  Display of 
        var tabsConfigResult = [];
        tabsConfigResult.push(tabsConfig[0]);
 
        //  establish  panel  And display 
        var panel = new Panel(this, {
    
            width: 300,
            tabs: tabsConfigResult
        });
        panel.show();
 
        //  Record properties 
        this.panel = panel;
    },
 
    //  Trying to change  active  state 
    tryChangeActive: function tryChangeActive(e) {
    
        var editor = this.editor;
        var $elem = this.$elem;
        if (editor._selectedImg) {
    
            this._active = true;
            $elem.addClass('w-e-active');
        } else {
    
            this._active = false;
            $elem.removeClass('w-e-active');
        }
    }
};
 
 
/*  Summary of all menus  */
 
//  Store the constructor of the menu 
var MenuConstructors = {
    };
 
MenuConstructors.video = Video;

---

//  Constructors 
function UploadVideo(editor) {
    
    this.editor = editor;
}

//  Prototype 
UploadVideo.prototype = {
    
    constructor: UploadVideo,
    //  according to  debug  Pop up different messages 
    _alert: function _alert(alertInfo, debugInfo) {
    
        var editor = this.editor;
        var debug = editor.config.debug;
        // var debug = true;
        var customAlert = editor.config.customAlert;

        if (debug) {
    
            throw new Error('wangEditor: ' + (debugInfo || alertInfo));
        } else {
    
            if (customAlert && typeof customAlert === 'function') {
    
                customAlert(alertInfo);
            } else {
    
                alert(alertInfo);
            }
        }
    },
    // How to insert a video   It needs to be defined separately 
    insertLinkVideo:function(link){
    
        var _this3 = this;

        if (!link) {
    
            return;
        }
        var editor = this.editor;
        var config = editor.config;

        //  Check format 
        var linkVideoCheck = config.linkVideoCheck;
        var checkResult = void 0;
        if (linkVideoCheck && linkVideoCheck === 'function') {
    
            checkResult = linkVideoCheck(link);
            if (typeof checkResult === 'string') {
    
                //  Check failed , Prompt information 
                alert(checkResult);
                return;
            }
        }

        editor.cmd.do('insertHTML', '<video src="' + link + '" style="width:50%;height: 50%;" controls autobuffer autoplay muted/>');

        //  Verify video  url  Whether it works , If it is invalid, give a prompt 
        var video = document.createElement('video');
        video.onload = function () {
    
            var callback = config.linkVideoCallback;
            if (callback && typeof callback === 'function') {
    
                callback(link);
            }

            video = null;
        };
        video.onerror = function () {
    
            video = null;
            //  Unable to successfully download pictures 
            _this2._alert(' Error inserting video ', 'wangEditor: \u63D2\u5165\u56FE\u7247\u51FA\u9519\uFF0C\u56FE\u7247\u94FE\u63A5\u662F "' + link + '"\uFF0C\u4E0B\u8F7D\u8BE5\u94FE\u63A5\u5931\u8D25');
            return;
        };
        video.onabort = function () {
    
            video = null;
        };
        video.src = link;
    },
    //  Upload video 
    uploadVideo: function uploadVideo(files) {
    
        var _this3 = this;

        if (!files || !files.length) {
    
            return;
        }

        // ------------------------------  Get configuration information  ------------------------------
        var editor = this.editor;
        var config = editor.config;
        var uploadVideoServer = "/video/uploadVideo";// Upload address 

        var maxSize = 100 * 1024 * 1024;       //100M
        var maxSizeM = maxSize / 1000 / 1000;
        var maxLength = 1;
        var uploadFileName = "file";
        var uploadVideoParams = config.uploadVideoParams || {
    };
        var uploadVideoHeaders = {
    };
        var hooks =config.uploadImgHooks || {
    };
        var timeout = 5 * 60 * 1000;        //5 min
        var withCredentials = config.withCredentials;
        if (withCredentials == null) {
    
            withCredentials = false;
        }

        // ------------------------------  Verify file information  ------------------------------
        var resultFiles = [];
        var errInfo = [];
        arrForEach(files, function (file) {
    
            var name = file.name;
            var size = file.size;

            // chrome  Low version  name === undefined
            if (!name || !size) {
    
                return;
            }

            if (/\.(mp4)$/i.test(name) === false) {
    
                //  Illegal suffix , Not a video 
                errInfo.push('\u3010' + name + '\u3011\u4e0d\u662f\u89c6\u9891');
                return;
            }
            if (maxSize < size) {
    
                //  The uploaded video is too large 
                errInfo.push('\u3010' + name + '\u3011\u5927\u4E8E ' + maxSizeM + 'M');
                return;
            }

            //  Join the result list after verification 
            resultFiles.push(file);
        });
        //  Throw verification information 
        if (errInfo.length) {
    
            this._alert(' Video verification failed : \n' + errInfo.join('\n'));
            return;
        }
        if (resultFiles.length > maxLength) {
    
            this._alert(' Upload at most once ' + maxLength + ' A video ');
            return;
        }

        // ------------------------------  Custom upload  ------------------------------
        //  Add video data 
        var formdata = new FormData();
        arrForEach(resultFiles, function (file) {
    
            var name = uploadFileName || file.name;
            formdata.append(name, file);
        });

        // ------------------------------  Upload video  ------------------------------
        if (uploadVideoServer && typeof uploadVideoServer === 'string') {
    
            //  Add parameter 
            var uploadVideoServer = uploadVideoServer.split('#');
            uploadVideoServer = uploadVideoServer[0];
            var uploadVideoServerHash = uploadVideoServer[1] || '';
            objForEach(uploadVideoParams, function (key, val) {
    
                val = encodeURIComponent(val);

                //  First of all , Splice parameters to  url  in 
                if (uploadVideoParamsWithUrl) {
    
                    if (uploadVideoServer.indexOf('?') > 0) {
    
                        uploadVideoServer += '&';
                    } else {
    
                        uploadVideoServer += '?';
                    }
                    uploadVideoServer = uploadVideoServer + key + '=' + val;
                }

                //  second , Add parameters to  formdata  in 
                formdata.append(key, val);
            });
            if (uploadVideoServerHash) {
    
                uploadVideoServer += '#' + uploadVideoServerHash;
            }

            //  Definition  xhr
            var xhr = new XMLHttpRequest();
            xhr.open('POST', uploadVideoServer);

            //  Set timeout 
            xhr.timeout = timeout;
            xhr.ontimeout = function () {
    
                // hook - timeout
                if (hooks.timeout && typeof hooks.timeout === 'function') {
    
                    hooks.timeout(xhr, editor);
                }

                _this3._alert(' Upload video timeout ');
            };

            //  monitor  progress
            if (xhr.upload) {
    
                xhr.upload.onprogress = function (e) {
    
                    var percent = void 0;
                    //  Progress bar 
                    var progressBar = new Progress(editor);
                    if (e.lengthComputable) {
    
                        percent = e.loaded / e.total;
                        progressBar.show(percent);
                    }
                };
            }

            //  Return the data 
            xhr.onreadystatechange = function () {
    
                var result = void 0;
                if (xhr.readyState === 4) {
    
                    if (xhr.status < 200 || xhr.status >= 300) {
    
                        // hook - error
                        if (hooks.error && typeof hooks.error === 'function') {
    
                            hooks.error(xhr, editor);
                        }

                        // xhr  Return status error 
                        _this3._alert(' There was an error uploading the video ', '\u4E0A\u4F20\u56FE\u7247\u53D1\u751F\u9519\u8BEF\uFF0C\u670D\u52A1\u5668\u8FD4\u56DE\u72B6\u6001\u662F ' + xhr.status);
                        return;
                    }
                    
                    result = xhr.responseText;
                    if ((typeof result === 'undefined' ? 'undefined' : _typeof(result)) !== 'object') {
    
                        try {
    
                            console.log(result);
                            result = JSON.parse(result);
                        } catch (ex) {
    
                            // hook - fail
                            if (hooks.fail && typeof hooks.fail === 'function') {
    
                                hooks.fail(xhr, editor, result);
                            }
                            _this3._alert(' Failed to upload video ', ' Uploading video returns an error , The return is : ' + result);
                            return;
                        }
                    }
                    if (!hooks.customInsert && result.errno == '0') {
    
                        // hook - fail
                        if (hooks.fail && typeof hooks.fail === 'function') {
    
                            hooks.fail(xhr, editor, result);
                        }

                        //  Data error 
                        _this3._alert(' Failed to upload video ', ' Uploading video returns an error , Return results  errno=' + result.errno);
                    } else {
    
                        if (hooks.customInsert && typeof hooks.customInsert === 'function') {
    
                            hooks.customInsert(_this3.insertLinkVideo.bind(_this3), result, editor);
                        } else {
    
                            //  Insert the video into the editor 
                            var data = result || [];
                            // data.forEach(function (link) {
    
                            // console.log(link);
                            //
                            // });
                            _this3.insertLinkVideo(data.url);
                        }

                        // hook - success
                        if (hooks.success && typeof hooks.success === 'function') {
    
                            hooks.success(xhr, editor, result);
                        }
                    }
                }
            };

            // hook - before
            if (hooks.before && typeof hooks.before === 'function') {
    
                var beforeResult = hooks.before(xhr, editor, resultFiles);
                if (beforeResult && (typeof beforeResult === 'undefined' ? 'undefined' : _typeof(beforeResult)) === 'object') {
    
                    if (beforeResult.prevent) {
    
                        //  If the result is  {prevent: true, msg: 'xxxx'}  It means that the user gives up uploading 
                        this._alert(beforeResult.msg);
                        return;
                    }
                }
            }

            //  Customize  headers
            objForEach(uploadVideoHeaders, function (key, val) {
    
                xhr.setRequestHeader(key, val);
            });

            //  Cross domain transmission  cookie
            xhr.withCredentials = withCredentials;

            //  Send a request 
            xhr.send(formdata);

            //  Be careful , want  return . Do not operate the following  base64  Display mode 
            return;
        }
    }
};

---

//  Modify the prototype 
Editor.prototype = {
    
    constructor: Editor,
 
    //  Add video upload 
    _initUploadVideo: function _initUploadVideo() {
    
        this.uploadVideo = new UploadVideo(this);
    },
    //  Create editor 
    create: function create() {
    
     
        //  add to   Video uploading 
        this._initUploadVideo();
    },
 
};