我想把这个脚本添加到我的Nuxt代码中:
<script>
tinymce.init({
selector: "#mytextarea",
plugins: "emoticons",
toolbar: "emoticons",
toolbar_location: "bottom",
menubar: false
});
</script>
我可以直接将它放入组件的模板主体中(此脚本必须在<body>
中,而不是<head>
中),如下所示:
有趣的是,它是有效的,但这里有两个问题:
1.看起来很丑
1.它不是动态的。例如,我不能将selector
动态绑定到prop或data属性!它必须是硬编码的。
所以我想知道是否有人知道我如何将这样的脚本正确地集成到我的Nuxt项目中?
2条答案
按热度按时间iqjalb3h1#
<script>
标记,并显示错误消息:模板应该只负责将状态Map到UI。避免在模板中放置具有副作用的标记,例如
<script>
,因为它们不会被解析。1.没有理由把它放到模板中。它只是一个普通的JS代码,你可以把它作为组件生命周期的一部分来执行。下面是非常简单的组件 Package 器,它把TinyMCE集成到Vue应用程序中。
但是,我不建议您自己执行此操作,而是使用official Vue wrapper(docs)-对于Vue 2使用v3。正式集成处理所有边缘情况,如组件激活/停用(与
<keep-alive>
一起使用时)以及组件损坏时的适当清理,这是避免nasty memory leaks所必需的Demo
下一步
由于TinyMCE是完全JS渲染的,在服务器端渲染时执行它没有意义。实际上,由于没有
window
变量,上述代码在服务器端根本无法工作。使用Nuxt的<client-only>
组件强制Nuxt只在客户端渲染编辑器...更新:另一方面,在SSR期间根本不调用
mounted
生命周期钩子,因此即使没有<client-only>
,这可能也会正常工作wlwcrazw2#
正如在接受的答案中提到的,官方的VUE包是要走的路。即使有官方的包,一旦我把它拉进NUXT,也有很多问题。
下面是我如何让它工作的一步一步的步骤。下面是涉及到的所有内容的版本:
tinymce-vue包需要一个可用的tinymce。你可以像上面一样通过npm安装它,或者使用云托管的版本(见这里的先决条件)。
Nuxt特定问题
您需要确保组件包含在
<client-only>
标签中,以避免SSR错误。另外,如果tinymce包是自托管的,你只需要在客户端导入它,否则你会看到如下错误:
[Vue warn]: Failed to resolve async component: ... Reason: ReferenceError: navigator is not defined
可以通过在它们周围使用
require
和if (process.client) {
来实现这一点。例如:
此时,编辑器应该加载到页面上,但样式可能没有加载。
您可以通过在其他
require
下添加require('tinymce/skins/ui/oxide/skin.min.css')
来解决此问题。现在的样式将被修复,但tinymce主题仍将寻找其他CSS文件,如移动的,最小版本本身,并导致网络错误。
例如:
**对于内容:**您可以将该文件复制到具有相同路径的静态文件夹中,也可以使用content_css设置覆盖它们(在Vue组件
init
选项中)。**对于皮肤:**由于您已经将其作为模块提供,请在Vue组件
init
选项中设置skin: false
。2022年11月29日更新:已修复排印错误