wangeditor 请求头_wangEditor编辑器添加上传视频功能

正在帮一个朋友的项目进行一些修改，该项目中使用的是 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: '

\u63D2\u5165

',

// 事件绑定

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