当前位置：网站首页>Wangeditor uploading local video modification
Wangeditor uploading local video modification
2022-06-26 11:06:00 【siner. li】
//
/* 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();
},
};
边栏推荐
- SQL Server foundation introduction collation
- mysql性能监控和sql语句
- MySQL模糊查询详解
- 02-Redis数据结构之链表
- Qixia housing and Urban Rural Development Bureau and fire rescue brigade carried out fire safety training
- April 13, 2021 interview with beaver family
- Flutter and native communication (Part 1)
- Postman入门教程
- nacos2.x.x启动报错信息Error creating bean with name ‘grpcClusterServer‘；
- Common regular expressions - tool classes (mobile number, email, QQ, fax)
猜你喜欢
SVN 安装配置
Concise course of probability theory and statistics in engineering mathematics second edition review outline
4、 Stacks and queues
April 13, 2021 interview with beaver family
02 linked list of redis data structure
redux相关用法
3、 Linked list exercise
ISO 26262 - 2 functional safety concept
Adaptiveavgpool2d does not support onnx export. Customize a class to replace adaptiveavgpool2d
9、 Beautify tables, forms, and hyperlinks
随机推荐
Origin of b+ tree index
Is it safe for compass software to buy stocks for trading? How to open an account to buy shares
Work report (2)
MySQL 30 military regulations
Win10 start FTP service and set login authentication
即构「畅直播」上线！提供全链路升级的一站式直播服务
Cereals Mall - Distributed Advanced
JS take the date of the previous month 【 pit filling 】
一键部署ceph脚本
Redis knowledge mind map
Notes - simple but adequate series_ KVM quick start
PC qq Hall upload Update Modifying versioninfo
CentOS installs redis multi master multi slave cluster
Mysql 30条军规
Basic MySQL
Tape library simple record 1
Bit operation n & (n-1), leetcode231, interview question 05.06
mysql性能监控和sql语句
Query online users and forced withdrawal users based on oauth2
机器学习深度神经网络——实验报告