在nuxt中使用vue-quill-editor 出现document is not defined

首先在plugins目录下面创建这个文件夹

添加如下内容

import Vue from "vue";
let VueQuillEditor;
if (process.browser) {
  VueQuillEditor = require("vue-quill-editor/dist/ssr");
}

Vue.use(VueQuillEditor);

1. 然后在nuxt.config.js文件中

   加入这几行代码

   "quill/dist/quill.snow.css",
      "quill/dist/quill.bubble.css",
      "quill/dist/quill.core.css",
       
       
      { src: "~plugins/nuxt-quill-plugin.js", ssr: false },  

   如下图所示位置加代码

3. 最后回到自己的vue文件中

   在template中像这样引入vue-quill-editor

   不用在script标签中导入组件

   <div
           class="quill-editor"
           v-quill:myQuillEditor="editorOption"
         ></div>

   然后在script中的data中添加

   editorOption: {
          // Some Quill options...
          theme: "snow",
          modules: {
            toolbar: [
              ["bold", "italic", "underline", "strike"],
              ["blockquote", "code-block"],
            ],
          },
        },

   

这样一个简单的富文本编辑器就完成了，具体其他配置请看官方文档

• 本文作者： leftover
• 版权声明： 本文版权归leftover所有,如需转载清标明来源！