在tinymce富文本中上传本地视频编辑器中不能预览的解决方案

富文本编辑器里上传了本地视频之后，编辑区内视频不能实时预览，在调试工具中发现tinymce默认生成的是img标签。
百度一圈后发现两种解决方案，
1、修改tinymce源码参考文章
2、自定义上传功能参考文章

API中有media_url_resolver这个函数
该函数将用您自己的自定义逻辑替换TinyMCE的默认媒体嵌入逻辑。
根据解决方案2修改代码如下：

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

在tinymce富文本中上传本地视频编辑器中不能预览的解决方案相关推荐

tinymce富文本框踩坑
tinymce富文本框踩坑 1.页面中需要多个富文本框时,每个富文本框的id必须做唯一标识,否则无法编辑 2.在tinymce富文本框需要做判断来显示时,谨慎使用v-if和v-show v-if会使富 ...
tinymce富文本编辑器的视频插件如何上传本地视频
最近使用了tinymce富文本编辑器的视频上传功能,发现默认只能填写视频链接,不能上传本地的视频.为此,我专门研究下如何上传本地视频. 版本:tinymce版本是^5.0.16,@tinymce/ti ...
MVC+API 实现tinymce富文本编辑器上传图片、上传视频
首先是要下载一个版本,这里我自己用的放到GitHub上了 https://github.com/dhgr1/tinymce 之前我试过官网的以及别的地方的,但都会报错,我也没搞清楚原因,你们可以自己去 ...
Tinymce富文本编辑器图片上传即编辑配置详解
Tinymce富文本编辑器本站使用的也是Tinymce富文本编辑器,非常的好用,就是图片上传和编辑配置上有点麻烦,当时没有看完Tinymce官网的资料,导致浪费了点时间,下面就把图片上传的配置分享给 ...
tinymce富文本编辑器的使用
tinymce富文本编辑器的使用 1.基本介绍 tinymce富文本官网:https://www.tiny.cloud/ 中文文档:http://tinymce.ax-z.cn/ tinymce-np ...
在vue3.0项目中使用tinymce富文本编辑器
目录一.安装二.完整代码三.事项说明四.参考文档之前看了好几篇关于 vue项目中使用 tinymce的文章, import引入大量 tinymce插件, /node_modules/ti ...
vue 是否有word编辑控件_GitHub - C84882428/editor-ui: vue集成 tinymce 富文本编辑器,增加导入 word 模板...
editor-ui vue 集成 tinymce 富文本编辑器自定义 tinymce 富文本编辑器, 在原来的编辑器中增加上传 word 模板最终展示效果: 主要代码: 整体思路: 1,在编辑器原 ...
wangeditor上传本地视频的方法
在官方版本的上传视频功能里,是不支持上传本地视频的,如果需要实现上传本地视频文件,可以自己定义一个上传方法. 实现思路: 1.使用input -> type="file",将 ...
Tinymce富文本使用教程
文章目录 1. 开始 2. 快速使用引入tinymce脚本 3. 常用配置 selector language language_url height readonly plugins toolba ...

在tinymce富文本中上传本地视频编辑器中不能预览的解决方案

在tinymce富文本中上传本地视频编辑器中不能预览的解决方案相关推荐

最新文章

热门文章