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

489 阅读2分钟

最近在使用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拷贝到项目中我倒是在很多资料上看到过,但是跟这个没关系。最后,有问题的地方欢迎指正!