tinymce中使用media,视频保存到编辑区域时,会出现两个video,点击空白会消失一个,再点击video又出现两个

最近在使用tinymce开发,踩了不少坑,多数问题都能够查阅资料或者看文档来解决,这里记录一个没找到相关资料的问题。

1、问题概述

如下图所示,上传了一个视频,保存之后,在编辑区域会显示两个,并且点击会有toggle的行为。
项目用的是vue-cli3 + vue2 + @tinymce/tinymce-vue@2.1.0 在这里插入图片描述
排查问题的过程中,试过从上传函数、依赖包版本、tinymce的init配置等等入手,但是都没发现问题,后来发现这个现象像是一种点击,然后出现编辑工具之类的行为,去官网看了一下demo,果然:
在这里插入图片描述
既然是这样,那很可能就是某些东西没有正确的引入。然后本地跑项目又没报错,也没啥提示,就很dt。看了很多css的引入、主题的引入啥的,各种各样,但是都没效果,最后,还是发到了测试环境发现有报错,终于有点线索。

在这里插入图片描述
带着试一下的心理把这些文件都补上,发现居然可以了!!
在这里插入图片描述

2、解决方案

这里说一下具体是怎么解决的。看上面的报错信息可以知道,是有三个资源没加载到,这里采用手动添加对应的资源来曲线救国(实在不知道为啥会缺这些资源,可能是项目配置,也可能是tinymce的配置?),好在缺的东西不是很多,不用加太多,还能接受。

由于vue-cli会在打包之后把public下的资源都复制到dist文件夹中,所以,我这里直接在public中加了一个js文件夹,打包时会合并到最终的dist/js下。具体要按照项目在服务器上的部署路径来放。

相应的资源其实可以看报错的信息,直接从node_modules中找到tinymce这个依赖,下面有skins文件夹,把缺的东西复制到你加的js文件夹就行了,然后重新run,问题解决。

在这里插入图片描述

3、总结

虽然最后解决了问题,但还是没找到问题的根源在哪,按理说tinymce不会让我们自己加一个js文件的,skins拷贝到项目中我倒是在很多资料上看到过,但是跟这个没关系。最后,有问题的地方欢迎指正!

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 7
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值