小白一枚,最近搞搞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>`
HA!HA,编辑器里面的视频就可以预览,而且能操作编辑删掉!
有不足的地方,大神可以再指点指点