提了个需求支持修改上传视频的大小，wangeditor支持修改图片的大小这个我们是知道的，但视频的大小的修改，源码是没有的，搜索也没有找到，因此只能读源码以及参考修改图片大小的案例作为参考进行整改,实现效果如下：
修改如下:
1.给上传的视频新增一个绑定的方法来获取上传视频的信息
2.可以根据_imgHandle的位置后加入该方法
_videoHandle:function _videoHandle(){
var editor = this.editor;
var $textElem = editor.$textElem;
// 为图片增加 selected 样式
$textElem.on('click', 'video', function(e) {
var video = this;
var $video = $(video);
if($video.attr('data-w-e') === '1') {
// 是表情图片，忽略
return;
}
// 记录当前点击过的图片
editor._selectedVideo = $video;
// 修改选区并 restore ，防止用户此时点击退格键，会删除其他内容
editor.selection.createRangeByElem($video);
editor.selection.restoreSelection();
});
// 去掉图片的 selected 样式
$textElem.on('click keyup', function(e) {
if(e.target.matches('video')) {
// 点击的是图片，忽略
return;
}
// 删除记录
editor._selectedVideo = null;
});
},3.在video的原型上新增修改大小的功能，这里我将整改copy过来
// 原型
Video.prototype = {
constructor: Video,
onClick: function onClick() {
// 修改调整上传视频的大小
var editor = this.editor;
var config = editor.config;
if(config.qiniu){return}
console.log(this._active)
if(this._active){
this._createEditPanel();
}else{
this._createInsertPanel();
}
},
_createEditPanel: function _createEditPanel(){
var editor = this.editor;
console.log('选中了',editor)
// id
var width10 = getRandom('width-10');
var width20 = getRandom('width-20');
var width30 = getRandom('width-30');
var width40 = getRandom('width-40');
var width50 = getRandom('width-50');
var width60 = getRandom('width-60');
var width70 = getRandom('width-70');
var width80 = getRandom('width-80');
var width90 = getRandom('width-90');
var width100 = getRandom('width-100');
var delBtn = getRandom('del-btn');
// tab 配置
var tabsConfig = [{
title: '编辑视频',
tpl: '<div>\n <div class="w-e-button-container" style="border-bottom:1px solid #f1f1f1;padding-bottom:5px;margin-bottom:5px;">\n <span style="float:left;font-size:14px;margin:4px 5px 0 5px;color:#333;">\u6700\u5927\u5BBD\u5EA6\uFF1A</span>\n <button id="' + width10 + '" class="left">10%</button>\n <button id="' + width20 + '" class="left">20%</button>\n <button id="' + width30 + '" class="left">30%</button>\n <button id="' + width40 + '" class="left">40%</button>\n <button id="' + width50 + '" class="left">50%</button>\n <button id="' + width60 + '" class="left">60%</button>\n <button id="' + width70 + '" class="left">70%</button>\n <button id="' + width80 + '" class="left">80%</button>\n <button id="' + width90 + '" class="left">90%</button>\n <button id="' + width100 + '" class="left">100%</button>\n </div>\n <div class="w-e-button-container">\n <button id="' + delBtn + '" class="gray left">\u5220\u9664\u56FE\u7247</button>\n </dv>\n </div>',
events: [{
selector: '#' + width10,
type: 'click',
fn: function fn() {
var $img = editor._selectedVideo;
if($img) {
$img.css('max-width', '10%');
}
// 返回 true，表示该事件执行完之后，panel 要关闭。否则 panel 不会关闭
return true;
}
}, {
selector: '#' + width20,
type: 'click',
fn: function fn() {
var $img = editor._selectedVideo;
if($img) {
$img.css('max-width', '20%');
}
// 返回 true，表示该事件执行完之后，panel 要关闭。否则 panel 不会关闭
return true;
}
}, {
selector: '#' + width30,
type: 'click',
fn: function fn() {
var $img = editor._selectedVideo;
if($img) {
$img.css('max-width', '30%');
}
// 返回 true，表示该事件执行完之后，panel 要关闭。否则 panel 不会关闭
return true;
}
}, {
selector: '#' + width40,
type: 'click',
fn: function fn() {
var $img = editor._selectedVideo;
if($img) {
$img.css('max-width', '40%');
}
// 返回 true，表示该事件执行完之后，panel 要关闭。否则 panel 不会关闭
return true;
}
}, {
selector: '#' + width50,
type: 'click',
fn: function fn() {
var $img = editor._selectedVideo;
if($img) {
$img.css('max-width', '50%');
}
// 返回 true，表示该事件执行完之后，panel 要关闭。否则 panel 不会关闭
return true;
}
}, {
selector: '#' + width60,
type: 'click',
fn: function fn() {
var $img = editor._selectedVideo;
if($img) {
$img.css('max-width', '60%');
}
// 返回 true，表示该事件执行完之后，panel 要关闭。否则 panel 不会关闭
return true;
}
}, {
selector: '#' + width70,
type: 'click',
fn: function fn() {
var $img = editor._selectedVideo;
if($img) {
$img.css('max-width', '70%');
}
// 返回 true，表示该事件执行完之后，panel 要关闭。否则 panel 不会关闭
return true;
}
}, {
selector: '#' + width80,
type: 'click',
fn: function fn() {
var $img = editor._selectedVideo;
if($img) {
$img.css('max-width', '80%');
}
// 返回 true，表示该事件执行完之后，panel 要关闭。否则 panel 不会关闭
return true;
}
}, {
selector: '#' + width90,
type: 'click',
fn: function fn() {
var $img = editor._selectedVideo;
if($img) {
$img.css('max-width', '90%');
}
// 返回 true，表示该事件执行完之后，panel 要关闭。否则 panel 不会关闭
return true;
}
}, {
selector: '#' + width100,
type: 'click',
fn: function fn() {
var $img = editor._selectedVideo;
if($img) {
$img.css('max-width', '100%');
}
// 返回 true，表示该事件执行完之后，panel 要关闭。否则 panel 不会关闭
return true;
}
}, {
selector: '#' + delBtn,
type: 'click',
fn: function fn() {
var $img = editor._selectedVideo;
if($img) {
let param = {
url: $img[0].currentSrc
}
var ss = Get(param, app.serverUrl + "/editor/delImg", "POST")
$img.remove();
}
// 返回 true，表示该事件执行完之后，panel 要关闭。否则 panel 不会关闭
return true;
}
}]
}];
// 创建 panel 并显示
var panel = new Panel(this, {
width: 300,
tabs: tabsConfig
});
panel.show();
// 记录属性
this.panel = panel;
},
_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 的配置
var tabsConfig = [{
title: '上传 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: [{
// 触发选择视频
selector: '#' + upTriggerId,
type: 'click',
fn: function fn() {
var $file = $('#' + upFileId);
var fileElem = $file[0];
if(fileElem) {
fileElem.click();
} else {
// 返回 true 可关闭 panel
return true;
}
}
}, {
// 选择视频完毕
selector: '#' + upFileId,
type: 'change',
fn: function fn() {
var $file = $('#' + upFileId);
var fileElem = $file[0];
if(!fileElem) {
// 返回 true 可关闭 panel
return true;
}
// 获取选中的 file 对象列表
var fileList = fileElem.files;
if(fileList.length) {
uploadVideo.uploadVideo(fileList);
}
// 返回 true 可关闭 panel
return true;
}
}]
}]; // tabs end
// 判断 tabs 的显示
var tabsConfigResult = [];
tabsConfigResult.push(tabsConfig[0]);
// 创建 panel 并显示
var panel = new Panel(this, {
width: 300,
tabs: tabsConfigResult
});
panel.show();
// 记录属性
this.panel = panel;
},
// 试图改变 active 状态
tryChangeActive: function tryChangeActive(e) {
var editor = this.editor;
var $elem = this.$elem;
if(editor._selectedVideo) {
this._active = true;
$elem.addClass('w-e-active');
} else {
this._active = false;
$elem.removeClass('w-e-active');
}
}
};测试一下：当点击触发的video,会触发打印this._selectedVideo,这个值是video这个对象，那就是正确的。这样就可以实现以上的功能。
2435
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
