正在帮一个朋友的项目进行一些修改，该项目中使用的是 wangEditor 富文本编辑器。

该编辑器的上传视频有个缺陷，不能手动上传，这是目前的效果图

朋友要求加一个上传视频的功能。

网上的解决方案的文章很多，这里亲自尝试了一下，成功解决。

参考文章如下：https://www.lagou.com/lgeduarticle/99623.html

下面我说一下主要修改的几个地方

具体流程如下

找到 wangEditor.js

注意：引用js的地方要改成 wangEditor.js，不要写成 wangEditor.min.js

1、添加插入视频panel

修改 Video.prototype 的 _createPanel 方法

注意行号是我修改后的位置，可能与大家的不符，没关系，可以忽视

代码如下

_createPanel: function _createPanel() {

var _this = this;

var editor = this.editor;

var uploadImg = editor.uploadImg;

var config = editor.config;

// 创建 id

// 上传视频id

var upTriggerVideoId = getRandom('up-trigger-video');

var upFileVideoId = getRandom('up-file-video');

// 插入视频id

var textValId = getRandom('text-val');

var btnId = getRandom('btn');

// tabs 的配置

var tabsConfig = [

{

title: '上传视频',

tpl: '

events: [{

// 触发选择图片

selector: '#' + upTriggerVideoId,

type: 'click',

fn: function fn() {

var $file = $('#' + upFileVideoId);

var fileElem = $file[0];

if (fileElem) {

fileElem.click();

} else {

// 返回 true 可关闭 panel

return true;

}

}

}, {

// 选择图片完毕

selector: '#' + upFileVideoId,

type: 'change',

fn: function fn() {

var $file = $('#' + upFileVideoId);

var fileElem = $file[0];

if (!fileElem) {

// 返回 true 可关闭 panel

return true;

}

// 获取选中的 file 对象列表

var fileList = fileElem.files;

if (fileList.length) {

console.log(fileList);

uploadImg.uploadVideo(fileList);

}

// 返回 true 可关闭 panel

return true;

}

}]

}, // first tab end

{

// 标题

title: '插入视频',

// 模板

tpl: '

',

// 事件绑定

events: [{

selector: '#' + btnId,

type: 'click',

fn: function fn() {

var $text = $('#' + textValId);

var val = $text.val().trim();

if (val) _this._insert(val); // 插入视频

// 返回 true，表示该事件执行完之后，panel 要关闭。否则 panel 不会关闭

return true;

}

}]

} // second tab end

]; // tabs end

// 判断 tabs 的显示

var tabsConfigResult = [];

if (config.uploadVideoServer) {

// 显示“上传视频”

tabsConfigResult.push(tabsConfig[0]);

}

if (config.showLinkVideo) {

// 显示“网络视频”

tabsConfigResult.push(tabsConfig[1]);

}

// 创建 panel

var panel = new Panel(this, {

width: 350,

// 一个 panel 多个 tab

tabs: tabsConfigResult // tabs end

}); // panel end

// 显示 panel

panel.show();

// 记录属性

this.panel = panel;

},

2. 实现文件上传和插入编辑器

在UploadImg中添加一个uploadVideo方法，插入视频也写在UploadImg.prototype中

代码如下

// 上传视频

uploadVideo: function uploadVideo(files) {

var _this3 = this;

if (!files || !files.length) {

return;

}

// ------------------------------ 获取配置信息 ------------------------------

var editor = this.editor;

var config = editor.config;

var uploadVideoServer = config.uploadVideoServer;

var maxSize = config.uploadVideoMaxSize;

var maxSizeM = maxSize / 1024 / 1024;

var maxLength = config.uploadVideoMaxLength || 10000;

var uploadFileName = config.uploadFileName || '';

var uploadVideoParams = config.uploadVideoParams || {};

var uploadVideoParamsWithUrl = config.uploadVideoParamsWithUrl;

var uploadVideoHeaders = config.uploadVideoHeaders || {};

var hooks = config.uploadVideoHooks || {};

var timeout = config.uploadVideoTimeout || 30 * 60 * 1000; // 30分钟

var withCredentials = config.withCredentials;

if (withCredentials == null) {

withCredentials = false;

}

var customUploadVideo = config.customUploadVideo;

if (!customUploadVideo) {

// 没有 customUploadVideo 的情况下，需要如下两个配置才能继续进行图片上传

if (!uploadVideoServer) {

return;

}

}

// ------------------------------ 验证文件信息 ------------------------------

var resultFiles = [];

var errInfo = [];

arrForEach(files, function (file) {

var name = file.name;

var size = file.size;

// chrome 低版本 name === undefined

if (!name || !size) {

return;

}

if (/\.(pdf|rm|rmvb|3gp|avi|mpeg|mpg|mkv|dat|asf|wmv|flv|mov|mp4|ogg|ogm)$/i.test(name) === false) {

// 后缀名不合法，不是视频

errInfo.push('\u3010' + name + '\u3011\u4E0D\u662F\u56FE\u7247');

return;

}

if (maxSize < size) {

// 上传视频过大

errInfo.push('\u3010' + name + '\u3011\u5927\u4E8E ' + maxSizeM + 'M');

return;

}

// 验证通过的加入结果列表

resultFiles.push(file);

});

// 抛出验证信息

if (errInfo.length) {

this._alert('视频验证未通过: \n' + errInfo.join('\n'));

return;

}

if (resultFiles.length > maxLength) {

this._alert('一次最多上传' + maxLength + '个视频');

return;

}

// ------------------------------ 自定义上传 ------------------------------

if (customUploadVideo && typeof customUploadVideo === 'function') {

customUploadVideo(resultFiles, this.insertLinkVideo.bind(this));

// 阻止以下代码执行

return;

}

// 添加图片数据

var formdata = new FormData();

arrForEach(resultFiles, function (file) {

var name = uploadFileName || file.name;

formdata.append(name, file);

});

// ------------------------------ 上传图片 ------------------------------

if (uploadVideoServer && typeof uploadVideoServer === 'string') {

// 添加参数

var uploadVideoServerArr = uploadVideoServer.split('#');

uploadVideoServer = uploadVideoServerArr[0];

var uploadVideoServerHash = uploadVideoServerArr[1] || '';

objForEach(uploadVideoParams, function (key, val) {

// 因使用者反应，自定义参数不能默认 encode ，由 v3.1.1 版本开始注释掉

// val = encodeURIComponent(val)

// 第一，将参数拼接到 url 中

if (uploadVideoParamsWithUrl) {

if (uploadVideoServer.indexOf('?') > 0) {

uploadVideoServer += '&';

} else {

uploadVideoServer += '?';

}

uploadVideoServer = uploadVideoServer + key + '=' + val;

}

// 第二，将参数添加到 formdata 中

formdata.append(key, val);

});

if (uploadVideoServerHash) {

uploadVideoServer += '#' + uploadVideoServerHash;

}

// 定义 xhr

var xhr = new XMLHttpRequest();

xhr.open('POST', uploadVideoServer);

// 设置超时

xhr.timeout = timeout;

xhr.ontimeout = function () {

// hook - timeout

if (hooks.timeout && typeof hooks.timeout === 'function') {

hooks.timeout(xhr, editor);

}

_this3._alert('上传视频超时');

};

// 监控 progress

if (xhr.upload) {

xhr.upload.onprogress = function (e) {

var percent = void 0;

// 进度条

var progressBar = new Progress(editor);

if (e.lengthComputable) {

percent = e.loaded / e.total;

progressBar.show(percent);

}

};

}

// 返回数据

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 返回状态错误

_this3._alert('上传视频发生错误', '\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 {

result = JSON.parse(result);

} catch (ex) {

// hook - fail

if (hooks.fail && typeof hooks.fail === 'function') {

hooks.fail(xhr, editor, result);

}

_this3._alert('上传视频失败', '上传视频返回结果错误，返回结果是: ' + result);

return;

}

}

if (!hooks.customInsert && result.errno != '0') {

// hook - fail

if (hooks.fail && typeof hooks.fail === 'function') {

hooks.fail(xhr, editor, result);

}

// 数据错误

_this3._alert('上传视频失败', '上传视频返回结果错误，返回结果 errno=' + result.errno);

} else {

if (hooks.customInsert && typeof hooks.customInsert === 'function') {

// 使用者自定义插入方法

hooks.customInsert(_this3.insertLinkVideo.bind(_this3), result, editor);

} else {

// 将图片插入编辑器

var data = result.data || [];

data.forEach(function (link) {

_this3.insertLinkVideo(link);

});

}

// 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) {

// 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传

this._alert(beforeResult.msg);

return;

}

}

}

// 自定义 headers

objForEach(uploadVideoHeaders, function (key, val) {

xhr.setRequestHeader(key, val);

});

// 跨域传 cookie

xhr.withCredentials = withCredentials;

// 发送请求

xhr.send(formdata);

}

},

// 根据链接插入视频

insertLinkVideo: function insertLinkVideo(link) {

if (!link) return;

var _this2 = this;

var editor = this.editor;

var config = editor.config;

// 校验格式

var linkVideoCheck = config.linkVideoCheck;

var checkResult = void 0;

if (linkVideoCheck && typeof linkVideoCheck === 'function') {

checkResult = linkVideoCheck(link);

if (typeof checkResult === 'string') {

// 校验失败，提示信息

alert(checkResult);

return;

}

}

editor.cmd.do('insertHTML', '');

}

3. 添加视频上传的默认参数

在config中添加一些上传视频默认参数, 加不加无所谓，在使用方法中都做了参数判断，为了规范代码，这里添加一下。

找到 config

光标往下拉，找到最后一行配置，在下面追加代码

// 是否显示添加网络视频的 tab

showLinkVideo: true,

// 插入网络视频的回调

linkVideoCallback: function linkVideoCallback(url) {

// console.log(url) // url 即插入视频的地址

},

// 默认上传视频 max size: 512M

uploadVideoMaxSize: 512 * 1024 * 1024,

// 配置一次最多上传几个视频

uploadVideoMaxLength: 5,

// 上传视频的自定义参数

uploadVideoParams: {

// token: 'abcdef12345'

},

// 上传视频的自定义header

uploadVideoHeaders: {

// 'Accept': 'text/x-json'

},

// 自定义上传视频超时时间 30分钟

uploadVideoTimeout: 30 * 60 * 1000,

// 上传视频 hook

uploadVideoHooks: {

// customInsert: function (insertLinkVideo, result, editor) {

// console.log('customInsert')

// // 视频上传并返回结果，自定义插入视频的事件，而不是编辑器自动插入视频

// const data = result.data1 || []

// data.forEach(link => {

// insertLinkVideo(link)

// })

// },

before: function before(xhr, editor, files) {

// 视频上传之前触发

// 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传

// return {

// prevent: true,

// msg: '放弃上传'

// }

},

success: function success(xhr, editor, result) {

// 视频上传并返回结果，视频插入成功之后触发

},

fail: function fail(xhr, editor, result) {

// 视频上传并返回结果，但视频插入错误时触发

},

error: function error(xhr, editor) {

// 视频上传出错时触发

},

timeout: function timeout(xhr, editor) {

// 视频上传超时时触发

}

}

二、具体使用

1、引入 css

2、引入 js

3、编辑器div

4、JavaScript 代码

$(function () {

var E = window.wangEditor;

var editor = new E('#editor');

editor.customConfig.uploadFileName = 'file';

editor.customConfig.uploadImgServer = '/common/upload';

// 将图片大小限制为 5MB

editor.customConfig.uploadImgMaxSize = 1024 * 1024 * 1024;

// 限制一次最多上传 5 张图片

editor.customConfig.uploadImgMaxLength = 10;

// 将 timeout 时间改为 10s

editor.customConfig.uploadImgTimeout = 10000;

editor.customConfig.menus = [

'head', // 标题

'bold', // 粗体

'fontSize', // 字号

'fontName', // 字体

'italic', // 斜体

'underline', // 下划线

'strikeThrough', // 删除线

'foreColor', // 文字颜色

'backColor', // 背景颜色

'link', // 插入链接

'list', // 列表

'justify', // 对齐方式

'quote', // 引用

'emoticon', // 表情

'image', // 插入图片

'table', // 表格

'video', // 插入视频

'code', // 插入代码

'undo', // 撤销

'redo' // 重复

];

editor.customConfig.emotions = [

{

title: '默认',

type: 'image',

content: defaultEmotions

},

{

title: '动漫',

type: 'image',

content: animeEmotions

},

{

title: 'GIF',

type: 'image',

content: gifEmotions

},

{

title: '其他',

type: 'image',

content: otherEmotions

}

];

// 视频上传

editor.customConfig.uploadVideoServer = '/common/upload'; // 上传接口

editor.customConfig.uploadVideoHooks = { // 上传完成处理方法

customInsert: function (insertVideo, result) {

console.log(result);

if (result.errno === 0) {

$.each(result.data,function(index,value){

insertVideo(value);

});

} else {

alert('上传失败');

}

}

};

editor.create();

})

5、后台代码

/**

* 文件上传接口

* @param file: 要上传的文件对象

* @param customPath: 自定义存放路径，格式 xxx/xxx/xxx，最后一个目录没有 "/"

* @return 返回的是JSON，{errno: 状态，data: 文件访问URLs数组}

*/

@ResponseBody

@RequestMapping(value = "/upload", method = RequestMethod.POST)

private Map upload(@RequestParam("file") MultipartFile file, @RequestParam(value = "customPath",defaultValue = "topic") String customPath) {

JSONObject jsonObject = new JSONObject();

String[] data = {storageService.store(file, Paths.get(customPath))};

jsonObject.put("errno", 0);

jsonObject.put("data", data);

return jsonObject;

}

data是文件URL数组

三、效果图

四、wangEditor下载

官网下载：http://www.wangeditor.com/index.html

博主已经修改了 wangEditor.js ，打包一下，方便大家下载

wangEditor