Vue使用TinyMCE为什么要复制node_modules中的文件到public?
发布网友
发布时间：2024-09-28 10:44
共1个回答
热心网友
时间：2024-09-29 13:29
TinyMCE官方提供了@tinymce/tinymce-vue，先看下官方的示例：
但如果你找Vue引入TinyMCE的教程，会发现篇幅都相当的长。 排除掉插件和一些个性化配置，所有教程都会比官网教程多了这些步骤：
在初始化对象中指定步骤1中的文件路径
初始化编辑器
大部分只说不这么做，会提示缺失文件导致TinyMCE加载错误，但为什么一个封装好的Vue组件还需要做这些额外步骤呢？
原因
我们不妨先看一下官网的配置，运行起来是什么样子
运行后会发现要求填入api key才可以使用
同时控制台有如下输出：
该api-key需要在官网注册申请。查询网络，可看到TinyMCE的脚本都是从Tiny的cdn下载的
所以教程中额外的步骤是为了让TinyMCE从本地加载。虽然也可以从官网注册一个账户获得APIKEY，但考虑到CDN可能连不上也比较慢，以及在内网使用，通常都会改为本地加载。
步骤解释
这一步是为了从本地加载TinyMCE核心库，修改后会使用node_moles中的tinymce，而不再从CDN下载tinymce.min.js。其中后面3个如果不导入，TinyMCE就会从根目录中加载，所以需要一并导入。
复制node_moles/tinymce/skins，并通过init参数指定skin_url和content_css
由于TinyMCE不能从node_moles加载这2个，所以就需要手动复制到public目录下并通过参数指定。当然也可以通过copy-webpack-plugin、rollup-plugin-copy等插件在webpack或vite中配置，编译时自动复制过去。
初始化编辑器
查看代码可以发现，组件中中已经调用了tinymce.init()方法，那为什么教程都要再调用一次？其实这一步是不必要的。
如果去掉这个初始化的步骤，就会发现TinyMCE也可以正常使用。
但有个例外情况，就是当使用ts时，同样的代码却会报错
查看tinymce/icons/default/icons.js中的代码可见，其会调用window上的tinymce对象。如果此时在控制台查询，会发现tinymce不在window中。
原因：
因此，只需把tinymce也改成副作用方式导入即可，或者在代码中至少调用一次。
