如何解决如何在 Nuxt 中使用 TinyMCE？
我想将此脚本添加到我的 Nuxt 代码中：
<script>
tinymce.init({
selector: "#mytextarea",plugins: "emoticons",toolbar: "emoticons",toolbar_location: "bottom",menubar: false
});
</script>
我可以将它扔到我的组件的模板主体中（这个脚本必须在 <body> 而不是 <head> 中），就像这样：
有趣的是它有效，但这里有两个问题：
- 看起来很丑
- 它不是动态的。例如，我不能将
selector动态绑定到 prop 或 data 属性！它必须是硬编码的。
所以我想知道是否有人知道如何将这些脚本正确地集成到我的 Nuxt 项目中？
解决方法
- 我真的很怀疑这是否有效。 Vue 总是忽略模板中的任何
<script>标记并显示错误消息：
模板应该只负责将状态映射到 UI。避免在模板中放置带有副作用的标签，例如 <script>，因为它们不会被解析。
- 没有理由将其放入模板中。它只是一个常规的 JS 代码，您可以作为组件生命周期的一部分执行。下面是将 TinyMCE 集成到 Vue 应用程序中的非常简单的组件包装器。
但是我不建议自己这样做，而是使用 official Vue wrapper (docs) - 对于 Vue 2 使用 v3。官方集成处理所有边缘情况，例如组件激活/停用（与 <keep-alive> 一起使用时）以及组件销毁时的适当清理，这是避免 nasty memory leaks
const ed = Vue.component("MyEditor",{
props: ["id","value"],template: `
<div>
<textarea :id="id" :value="value"></textarea>
</div>
`,mounted() {
const me = this;
window.tinymce.init({
selector: "#" + this.id,plugins: "emoticons",toolbar: "emoticons",toolbar_location: "bottom",menubar: false,setup: function (editor) {
editor.on("change input undo redo",function () {
me.$emit('input',editor.getContent({format: 'text'}))
});
}
});
}
});
Nuxt
由于 TinyMCE 是完全 JS 渲染的，在服务器端渲染期间执行它是没有意义的。事实上，上面的代码在服务器上根本不起作用，因为没有 window 变量。使用 Nuxt 的 <client-only> component 强制 Nuxt 仅在客户端呈现编辑器...
更新：另一方面，在 SSR 期间根本不会调用 mounted 生命周期钩子，因此即使没有 <client-only>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
