当项目在使用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
