Модули Quill в Nuxt. js - PullRequest
Новая
       23

Модули Quill в Nuxt. js

0 голосов
/ 05 апреля 2020

Я пытался добавить Quill. js в свой проект Nuxt. js большую часть прошедшего дня, и это сводит меня с ума.

Я установил vue-quill-editor и следовал за шагами, указанными, чтобы обслужить это через Nuxt. И, конечно же, это сработало!

Затем я попытался добавить пользовательские модули, и все, что я попробовал, потерпело неудачу.

Даже «пример» из Документация Quill не работает Выдает ошибку 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>

Для чего это стоит, я также установил для плагина ssr: false в nuxt.config. js

Любая помощь будет принята с благодарностью!

...