记录 vue2 tinymce中的坑

已于 2022-06-30 11:54:44 修改
阅读量257 收藏
点赞数 1
文章标签： vue.js 前端
于 2022-06-30 09:18:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41144591/article/details/125533700
版权

视频插入，总是被换成img不能预览，看了网上很多的方法，

改源码的方法，缺点就是视频不能拉扯，

配置media_url_resolver方法，缺点视频不能拉动，更不好

解决：最后我更新了版本就成功了，并init时配置： media_live_embeds: true,

 "tinymce": "^5.10.5",
 "@tinymce/tinymce-vue": "^3.2.8",

不努力code
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
tinymce编辑器内预览视频
10-21
解决tinymce编辑器内不能预览视频，替换tinymce/plugins/media/plugin.min.js即可。因为默认富文本编辑器内是一个img标签，并不能播放。
【踩坑】vue中使用媒体查询方法和不生效问题总结
seeeeeeeeeee的博客
07-27 5658
在vue中是不能直接使用@media的，我们必须结合less或者sass来使用它 一、安装依赖项 只要你安装了sass就行。 npm install sass-loader node-sass --save-dev 二、@/assets/scss/media.scss 这一步，自己创建一个scss文件，这路径不用跟我一样，自己改就行。 @media screen and (min-width:1400px) { .time_comparison_wrap{ margin-top:
【vue项目使用编辑器Tinymce自定义本地上传视频问题】
web_527965583_ld的博客
07-12 5339
项目中要用到编辑器功能，之前一直使用的编辑器（百度编辑器UEditor/quill）由于二次开发特别不友好，尤其是ueditor。。，所以这次整体全部替换成tinymce编辑器。tinymce整体功能支持上要比百度编辑器完善很多，自定义图片上传，word图文复制图片自动上传等二次开发也是十分方便，功能支持上也是比quill要更完善。 tinymce文档:https://www.tiny.cloud/docs/ 引入方法网上都有， 不细说了，具体记录下视频上传问题。 项目中使用的tinymce版本是
tinymce 默认斜体 <em> 替换成<i>
qq_37280992的博客
10-18 360
init: { formats: { italic: { inline: 'i' } }, valid_elements: 'i,i/em' } 加上这两句配置就好了
解决TinyMCE富文本编辑器上传视频后在编辑区域内不能预览视频，被替换成img标签的问题
weixin_40136189的博客
07-23 9111
以前用百度的UE，代码陈旧，有很多定制化的需求改起来很费劲，后来发现国外有个一直在维护的TinyMCE编辑器，功能强大，便转跳到这个坑里了。 目前遇到的坑：富文本编辑器里上传了本地视频之后，会默认给替换成一个img标签，如下： <img class="mce-object mce-object-video" src="data:image/gif;base64,R0lGODlhAQABAIA...
vue+tinymce.rar
06-24
本文将深入探讨如何在Vue项目中整合TinyMCE。 1. **Vue项目基础** - Vue.js 是一套用于构建用户界面的渐进式框架，强调组件化和轻量级特性。 - 创建一个Vue项目通常从安装Vue CLI开始，它提供了一套快速搭建项目...
在vue中使用tinymce富文本编辑器
09-18
在Vue项目中集成TinyMCE富文本编辑器是一项常见的需求，尤其对于需要用户输入大量文本内容的应用来说。TinyMCE是一款强大的开源富文本编辑器，它提供了丰富的功能，如字体样式调整、插入图片、创建表格等，使得内容...
vue-use-tinymce-master.zip
03-13
"vue-use-tinymce-master.zip" 这个压缩包看起来是一个基于Vue.js的项目，它集成了TinyMCE，一个强大的富文本编辑器。TinyMCE是一款功能丰富的开源文本编辑器，支持多种格式的文本编辑，广泛应用于内容管理系统和...
基于vue3的电子病历编辑器源码.zip
11-30
- 可能采用Vuex进行状态管理，Vuex是Vue生态系统中的一个官方插件，用于集中管理组件的状态，保持应用状态的一致性。 5. **API交互**： - 项目可能与后端服务器通过HTTP请求交换数据，使用axios或fetch等库进行...
Vue博客后台系统
08-12
在这个项目中，Vue.js被用作视图层，提供了高效的数据绑定和可复用的组件结构，使得构建复杂的用户界面变得更为便捷。 Vue博客后台系统可能包含了以下几个关键组成部分： 1. **登录/注册模块**：用户可以通过填写...
TinyMCE上传视频后,预览不能显示,但是将视频下下来能正常播放
qq_46784478的博客
02-23 2424
问题: 今天做项目时发现TinyMCE上传视频后,预览没有图像,但是下下来又能够播放 解决方法: 发现是视频编码方式有问题,我用的QQ录屏录的视频,视频编码有问题,需要将视频转成H264的视频编码. 因为电脑没有下转视频编码的软件,于是我就去下了个H264的视频.然后上传上去,发现就可以正常播放预览了. 左边的视频编码不是 H264 的,右边是 H264 的视频编码. 如果你也跟我遇到一样的问题,可以试试下载 H264 的视频上传来试试 放上一个H264 的视频链接:h...
VUE使用富文本编辑器 Tinymce（踩坑记录）
qq_38265533的博客
05-09 2728
下面这一层工具栏是没法自动折叠的，需要再次点击省略号才可以折叠，在使用过程中体验不太好。因为是vue2所以选用v5版本选用v3的组件，其实说到底不同版本的Vue只不过一些细微的差异和版本不同，其大体都是差不多的。对比了其他富文本编辑器，tinymce是唯一一个从word复制过来的时候基本保持原有样式的富文本，这一点体验感非常好。tinymce文件夹，然后把node_modules下的tinymce下的skins文件夹复制粘贴到。2.将解压得到的文件夹，放到TinyMCE主目录下的plugins文件夹内。
tinymce无法预览视频问题结局
ii窝窝头的博客
05-10 377
tinymce中默认视频无法预览，一个特丑的框，默认是img标签 解决办法，将plugins中的media标签去掉即可
在tinymce富文本中上传本地视频编辑器中不能预览的解决方案
weixin_38727232的博客
11-27 4551
富文本编辑器里上传了本地视频之后，编辑区内视频不能实时预览，在调试工具中发现tinymce默认生成的是img标签。 百度一圈后发现两种解决方案， 1、修改tinymce源码 参考文章 2、自定义上传功能 参考文章 API中有video_template_callback这个函数 该函数将返回插入TinyMCE的视频媒体的HTML嵌入代码。 根据解决方案2修改代码如下： tinymce.init({...
tinymce中使用media，视频保存到编辑区域时，会出现两个video，点击空白会消失一个，再点击video又出现两个
mojianpei的博客
08-30 1324
最近在使用tinymce开发，踩了不少坑，多数问题都能够查阅资料或者看文档来解决，这里记录一个没找到相关资料的问题。 1、问题概述 如下图所示，上传了一个视频，保存之后，在编辑区域会显示两个，并且点击会有toggle的行为。 项目用的是vue-cli3 + vue2 + @tinymce/tinymce-vue@2.1.0 排查问题的过程中，试过从上传函数、依赖包版本、tinymce的init配置等等入手，但是都没发现问题，后来发现这个现象像是一种点击，然后出现编辑工具之类的行为，去官网看了一下demo
vue中使用tinymce富文本编辑器
Smile
03-24 1396
怎么安装大家都知道吧，这里就不做介绍啦，不知道的可以直接去问度娘~ 假装你们已经安装好了，那便开始吧。。。 这里先看下效果吧 我目前遇到的需要注意的点有这么几个（后期遇到再加吧^_^） 字体默认是pt 上传视频（如何实现上传视频以及上传视频后再编辑器中无法播放的问题） 上传图片（有个需求是需要设置默认的上传图片宽度） 那就一个一个来说下吧 字体如果不设置的话默认单位是pt,可以按...
tinymce 上传本地视频
小星落
05-26 7372
tinymce富文本编辑器的视频上传功能，发现默认只能填写视频链接，不能上传本地的视频 修改视频上传按钮 需要设置 file_picker_callback 在 tinymce.init 中添加 //自定义文件选择器的回调内容 此方法只有在点击上方图片按钮才会触发 file_picker_callback: function (callback, value, meta) { if (meta.filetype === 'file') { callback('
Vue3使用tinymce的配置和坑
最新发布
qq_38828542的博客
01-15 2804
Tinymce
采用SpringBoot+Tinymce实现文章的在线预览和上传
简单点的博客
06-23 510
采用SpringBoot+Tinymce实现文章的在线预览和上传
vue2 tinymce
09-14
如果你想在Vue2项目中使用TinyMCE，可以按照以下步骤进行操作： 1. 首先，在你的Vue项目中安装TinyMCE。可以使用npm或yarn进行安装，命令如下： ``` npm install --save tinymce ``` 2. 在需要使用TinyMCE的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值