如何将 TinyMCE 与 NuxtJS 一起使用

Question

我正在尝试构建一个博客平台，我需要使用文本编辑器，我考虑过 CKeditor 和 TinyMCE，但是没有关于如何将其与 NuxtJS 一起使用的视频或良好说明。

如果有人能帮助我，我将不胜感激。

Answer 1

Tinymce 和 CKeditor 都有 NPM 包和 CDN。这意味着您可以通过两种方式在 Nuxt 应用程序中使用它们。

通过脚本标签 (CDN) 包含包

正如这些包的“入门”指南中所述，您可以使用脚本标签简单地导入它们。在 Nuxt 中，您可以通过将其添加到 nuxt.config.js head 选项来实现。

// nuxt.config.js

[...]
head: {
  scripts: [
    { src: "https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js", referrerpolicy: true }
  ]
},
[...]

// example.vue

[...]
mounted() {
  tinymce.init()
}
[...]

使用此解决方案您必须注意 tinymce 只能在 client-side 上访问，因为它在 server-side.

上不可用

将包添加为插件

这通常是可取的，因为它有助于分析包大小并允许您的包管理器管理文本编辑器版本。

您也可以将相应的包添加为插件。使用 npm 或 yarn 安装包。

npm i tinymce

之后，只需在插件目录中创建一个 .js 文件，如下所示：

// plugins/tinymce.js

import tinymce from "tinymce"

export default tinymce

在您的 nuxt.config.js

中注册插件

// nuxt.config.js

plugins: [
  {
    src: "~/plugins/tinymce.js",
    mode: "client", // This way the plugin will only be initiated on the client side
  }
]

现在您可以在您的应用程序中使用该插件，访问 tinymce，就像在上面的 example.vue 中一样。

在单个组件中动态导入包

另一种选择是直接在组件中导入npm包。这可能会提高性能，因为仅在需要时才导入包。如果包支持 SSR，您可以像在 script 标签顶部导入任何其他包一样简单地导入它。

如果您的包不支持 SSR（像大多数文本编辑器一样），您可以在检查进程是否运行ning 后动态导入 client-side 或仅在运行上 client-side 的钩子或方法中导入它。（@kissu 的解决方案）

查看动态导入的这个问题：

Answer 2

请不要使用 CDN，而是使用 is here.

的解决方案

像这样

<template>
   <div id="app">
     <img alt="Vue logo" src="./assets/logo.png">
     <editor
       api-key="no-api-key"
       :init="{
         height: 500,
         menubar: false,
         plugins: [
           'advlist autolink lists link image charmap print preview anchor',
           'searchreplace visualblocks code fullscreen',
           'insertdatetime media table paste code help wordcount'
         ],
         toolbar:
           'undo redo | formatselect | bold italic backcolor | \
           alignleft aligncenter alignright alignjustify | \
           bullist numlist outdent indent | removeformat | help'
       }"
     />
   </div>
 </template>

 <script>
 import Editor from '@tinymce/tinymce-vue'

 export default {
   name: 'app',
   components: {
     'editor': Editor
   }
 }
 </script>

如何将 TinyMCE 与 NuxtJS 一起使用

How to Use TinyMCE with NuxtJS

vue.js

nuxt.js