在tinymce富文本中上传本地视频编辑器中不能预览的解决方案（已经优化更新部分问题）

当项目在使用tinymce 上传视频时不能预览。
百度查了个各种解决办法，发现这个最简单，于是乎记录了下来。

tinymce.init({
    media_url_resolver: function(data, resolve) {
          try {
            let videoUri = encodeURI(data.url);
           let embedHtml = `<p>
                 <span
                data-mce-selected="1"
                data-mce-object="video"
                data-mce-p-controls="controls"
                data-mce-p-controlslist="nodownload"
                data-mce-p-allowfullscreen="true"
                style="width: 200px;height:120px;display: block;"
                data-mce-p-src=${res.url} >
                <video src=${res.url} width="100%" height="100%" controls="controls" controlslist="nodownload">
                </video>
              </span>
                </p>
                <p style="text-align: left;"></p>`;
            resolve({ html: embedHtml });
          } catch (e) {
            resolve({ html: "" });
          }
        }
})

主要是修改了video外层span 的样式改成指定大小的宽高，在去掉 class 样式。就可以解决上传之后不能删除，编辑的问题了。

image.png

栗子：
新增的状态

image.png

预览状态（不可编辑只能预览）

image.png