tinymce编辑器上传本地视频预览

本人小白一枚，最近搞搞tinymce编辑器上传视频预览，视频标签变成了图片标签问题，看看之前其他博主的说明，感jio好麻烦，官网的也没整明白，所以自己瞎整整。勿喷！勿喷！勿喷！重要事情说三遍
首先是在tinymce组件里面

<template>
  <div
    class="tinymce-container"
    :modal="false">
    <textarea :id="tinymceId" class="tinymce-textarea" />
    <div class="editor-custom-btn-container">
      <editorImage color="#1890ff" class="editor-upload-btn" @successCBK="imageSuccessCBK" />
    </div>
    <img id="img" style="display:none">
  </div>
</template>

上面的editorImage 是自己写的另外一个上传功能组件

文件上传成功后将内容插入编辑器里

 imageSuccessCBK(arr) {
      const _this = this
      arr.forEach(v => {
        console.log(v)
        if (v.type === 'image') {
          window.tinymce
            .get(_this.tinymceId)
            .insertContent(`${v.url}" >`)
        } else if (v.type === 'video') {
          window.tinymce.get(_this.tinymceId).insertContent(
            `

              ${v.url} data-mce-html="%20">
                  
              
            
`
          )
        }
      })
    }

发现上传视频后成功后，编辑器出现占位符的情况,变成了一张图片，关键有2个地方要注意下
1、

plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu media',
toolbar: 'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat media'

把这2个里面的media，统统干掉然后就这样了

2、但是，上传成功的视频不好编辑，可能会出现光标无法移动到视频标签后面，导致无法删除的问题，So，注意上面的imageSuccessCBK方法里面插入视频标签一定得这样（个人下琢磨，并不官方）

`

   ${v.url} data-mce-html="%20">
      
   
`

HA!HA，编辑器里面的视频就可以预览，而且能操作编辑删掉！
有不足的地方，大神可以再指点指点