欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

【vue项目使用编辑器Tinymce自定义本地上传视频问题】

程序员文章站 2022-07-06 16:33:28
项目中要用到编辑器功能,之前一直使用的编辑器(百度编辑器UEditor/quill)由于二次开发特别不友好,尤其是ueditor。。,所以这次整体全部替换成tinymce编辑器。tinymce整体功能支持上要比百度编辑器完善很多,自定义图片上传,word图文复制图片自动上传等二次开发也是十分方便,功能支持上也是比quill要更完善。tinymce文档:https://www.tiny.cloud/docs/引入方法网上都有, 不细说了,具体记录下视频上传问题。项目中使用的tinymce版本是...

项目中要用到编辑器功能,之前一直使用的编辑器(百度编辑器UEditor/quill)由于二次开发特别不友好,尤其是ueditor。。,所以这次整体全部替换成tinymce编辑器。tinymce整体功能支持上要比百度编辑器完善很多,自定义图片上传,word图文复制图片自动上传等二次开发也是十分方便,功能支持上也是比quill要更完善。

tinymce文档:https://www.tiny.cloud/docs/

引入方法网上都有, 不细说了,具体记录下视频上传问题。


【vue项目使用编辑器Tinymce自定义本地上传视频问题】

项目中使用的tinymce版本是5.3.1, 项目运行之后编辑器长这样:(样式调整了一下)

【vue项目使用编辑器Tinymce自定义本地上传视频问题】

上传视频模块点击后弹框显示如下:

【vue项目使用编辑器Tinymce自定义本地上传视频问题】

tinymce编辑器模块我在vue中单独封装了个组件,在初始化tinymce方法init中设置属性 file_picker_callback:'media', 在方法file_picker_callback:function (cb, value, meta) {}中可以自定义图片/视频等上传功能。在这里单独判断处理meta.filetype === 'media', 动态创建上传input,并进行模拟点击上传操作,达到本地上传视频效果。

设置完之后在图上上传按钮处触发自定义事件,代码贴在下面:

【vue项目使用编辑器Tinymce自定义本地上传视频问题】

创建完<input type="file">之后,将file文件流传入uploadMv中进行上传操作:

【vue项目使用编辑器Tinymce自定义本地上传视频问题】

上传成功后将服务器视频地址赋值给变量mvUrl,并更改uploaded标识为true, 当file_picker_callback第一次获取不到时,走else判断延迟1s获取, 这里具体可以写的更完善一些.,我随便写的时间,严谨的话要判断下只要获取不到就要去继续取。

通过cb回调函数将服务器视频地址回显加载在上传视频弹框中的地址栏里,宽高自己定义。

【vue项目使用编辑器Tinymce自定义本地上传视频问题】

 

然后就会发现,视频没有显示出来。。 检察元素看一下,发下好好的video元素 变成了img标签。。。

接着改,找官方文档,发现有个参数:media_live_embeds:开启此选项后,用户可看到编辑区内嵌入视频的实时预览,而不是占位图。设置media_live_embeds: true,然鹅并没有什么卵用,于是看有人说要改源码。。

找到tinymce的源代码包,找到plugins文件夹下media>plugin.js,源代码是这样判断的:

【vue项目使用编辑器Tinymce自定义本地上传视频问题】

第一步:注释这段代码

第二步:创建一个全局变量来存video的src,我写在了开头位置

【vue项目使用编辑器Tinymce自定义本地上传视频问题】

第三步:判断video标签 获取src值赋值给videoSource(写在注释的那一段代码那里):

if(node.name === 'video' && hasLiveEmbeds(editor) && global$8.ceFalse){
            console.log('videoSource===', videoSource)
            videoSource = ''
            if(node.attributes['map'] && node.attributes['map'].src){
              videoSource = node.attributes['map'].src
            }else{
              for(var ii=0;ii<node.attributes.length;ii++){
                if(node.attributes[ii].name == "src"){
                  videoSource = node.map.node.attributes[ii].value
                }
              }
            }
            if(node.firstChild && node.firstChild.value){
              var elel=node.firstChild && node.firstChild.value
              var objE = document.createElement("div");
             objE.innerHTML = elel;
              var dom = objE.getElementsByTagName('source')[0]
              videoSource = dom.getAttribute('src')
            }
            node.replace(createPreviewIframeNode(editor, node));
          }

第四步:在createPreviewIframeNode 方法中有两处修改:修改previewNode.attr中src:videoSource || node.attr('src'), 增加播放属性controls: 'controls'。

var createPreviewIframeNode = function (editor, node) {
      var previewWrapper;
      var previewNode;
      var shimNode;
      var name = node.name;
      previewWrapper = new global$7('span', 1);
      previewWrapper.attr({
        'contentEditable': 'false',
        'style': node.attr('style'),
        'data-mce-object': name,
        'class': 'mce-preview-object mce-object-' + name
      });
      retainAttributesAndInnerHtml(editor, node, previewWrapper);
      previewNode = new global$7(name, 1);
      previewNode.attr({
        src: videoSource || node.attr('src'), // 修改
        controls: 'controls',    // 新增
        allowfullscreen: node.attr('allowfullscreen'),
        style: node.attr('style'),
        class: node.attr('class'),
        width: node.attr('width'),
        height: node.attr('height'),
        frameborder: '0'
      });
      shimNode = new global$7('span', 1);
      shimNode.attr('class', 'mce-shim');
      previewWrapper.append(previewNode);
      previewWrapper.append(shimNode);
      return previewWrapper;
    };

测试运行,就可以上传本地视频了~

【vue项目使用编辑器Tinymce自定义本地上传视频问题】

本文地址:https://blog.csdn.net/web_527965583_ld/article/details/107299416