Nuxt.js 中的 Quill 模块

Question

在过去一天的大部分时间里，我一直在尝试将 Quill.js 添加到我的 Nuxt.js 项目中，这让我发疯了。

我安装了vue-quill-editor并按照指定的步骤通过 Nuxt 提供服务。果然，它奏效了！

然后我尝试添加自定义模块，我尝试的一切都失败了。

即使来自Quill's documentation 的“示例”也不起作用。它会引发ModuleClass is not a constructor 错误。

下面是一些示例代码： nuxt-quill-plugin.js:

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'
import Quill from 'quill'
import Counter from './counter'

uill.register('modules/Counter', Counter);
Vue.use(VueQuillEditor)

counter.js（与我上面链接的示例相同）：

class Counter {
  constructor(quill, options) {
    this.quill = quill;
    this.options = options;
    this.container = document.querySelector(options.container);

    quill.on('text-change', this.update.bind(this));
    this.update();  // Account for initial contents

  }

  calculate() {
    let text = this.quill.getText();
    if (this.options.unit === 'word') {
      text = text.trim();
      // Splitting empty text returns a non-empty array
      return text.length > 0 ? text.split(/\s+/).length : 0;
    } else {
      return text.length;
    }
  }

  update() {
    console.log("update")
    var length = this.calculate();
    var label = this.options.unit;
    if (length !== 1) {
      label += 's';
    }
    this.container.innerText = length + ' ' + label;
  }
}

editor.vue（使用组件的地方）：

<template>
  <section class="container">
    <client-only>
      <quill-editor
        :options="editorOption"
        @blur="onEditorBlur($event)"
        @focus="onEditorFocus($event)"
        @ready="onEditorReady($event)"
        ref="editor"
        v-model="content"
      />
      <div id="counter">0</div>

    </client-only>
  </section>
</template>

<script>
  export default {
    name: 'editor',
    components:{},
    data() {
      return {
        content: `
         <p>Example text</p>
        `,
        editorOption: {
          // Some Quill options...
          theme: 'snow',
          modules: {
            Counter: true
          }
        }
      }
    },
    methods: {
      onEditorBlur(editor) {
        console.log('editor blur!', editor)
      },
      onEditorFocus(editor) {
        console.log('editor focus!', editor)
      },
      onEditorReady(editor) {
        console.log('editor ready!', editor)
      }
    }
  }
</script>

为了它的价值，我还在 nuxt.config.js 中将插件设置为 ssr:false

任何帮助将不胜感激！

Answer 1

nuxt-quill-plugin.js

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'

Vue.use(VueQuillEditor)

nuxt.config.js

import webpack from 'webpack'
export default {

build: {
        plugins: [
        new webpack.ProvidePlugin({
            'window.Quill': 'quill/dist/quill.js',
            'Quill': 'quill/dist/quill.js'
        }),
        ]
      }
}

page.vue

<template>
    <div>
<quill-editor
    v-model="content"
    :options="editorOption"
    />
</div>
</template>

<script>

import Editor from '~/components/Editor' 
export default {
data() {
return {
content: '<p>I am Example</p>',
editorOption: {
            // Some Quill options...
            theme: 'snow',
            modules: {
                    toolbar: [
                        ['bold', 'italic', 'underline', 'strike'],
                        ['blockquote', 'code-block']
                    ]
                }
            }
}
}
}
</script>