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

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

html" title=javascript>javascript"><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 是自己写的另外一个上传功能组件

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

html" title=javascript>javascript"> imageSuccessCBK(arr) {
      const _this = this
      arr.forEach(v => {
        console.log(v)
        if (v.type === 'image') {
          window.tinymce
            .get(_this.tinymceId)
            .insertContent(`<img class="wscnph" style="width:80%" src="${v.url}" >`)
        } else if (v.type === 'video') {
          window.tinymce.get(_this.tinymceId).insertContent(
            `<p>
              <span class="mce-preview-object mce-object-video" contenteditable="false" data-mce-object="video" data-mce-p-allowfullscreen="allowfullscreen" data-mce-p-frameborder="no" data-mce-p-scrolling="no" data-mce-p-src=${v.url} data-mce-html="%20">
                  <video src=${v.url} width="420" controls="controls"></video>
              </span>
            </p>`
          )
        }
      })
    }

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

html" title=javascript>javascript">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方法里面插入视频标签一定得这样（个人下琢磨，并不官方）

html" title=javascript>javascript">`<p>
   <span class="mce-preview-object mce-object-video" contenteditable="false" data-mce-object="video" data-mce-p-allowfullscreen="allowfullscreen" data-mce-p-frameborder="no" data-mce-p-scrolling="no" data-mce-p-src=${v.url} data-mce-html="%20">
      <video src=${v.url} width="420" controls="controls"></video>
   </span>
</p>`