Обновление существующего контента в нескольких редакторах на одной странице - PullRequest
Новая
       10

Обновление существующего контента в нескольких редакторах на одной странице

0 голосов
/ 11 апреля 2019

Я использую quill через пользовательский компонент-оболочку в приложении VueJS.Таким образом, проблема заключается в том, что при открытии способа редактирования вопроса и его ответа в двух разных редакторах возникает ошибка «Invalid Quill container #my_id».Далее следует «Ошибка в nextTick:« Ошибка типа: невозможно установить свойство 'innerHTML' из неопределенного "

, вот код для оболочки: 

import Quill from 'quill'
export default {
  name: 'QuillWrapper',
  props: {
    value: {
      type: String,
      default: ''
    },
    id: {
      type: String,
      default: 'editor'
    }
  }, 
  data() {
    return {
        editor: null,
        quillToolbar: [
          ['bold', 'italic', 'underline', 'strike'],
          ['blockquote', 'code-block', 'link'],

          [{ 'list': 'ordered'}, { 'list': 'bullet' }],
          [{ 'script': 'sub'}, { 'script': 'super' }],
          [{ 'indent': '-1'}, { 'indent': '+1' }],
          [{ 'direction': 'rtl' }],

          ['image', 'video'],

          [{ 'size': ['small', false, 'large', 'huge'] }],
          [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

          [{'color': ['red', 'orange', 'yellow', 'green', 'blue', 'purple', 'white', 'black']}, {'background': ['red', 'orange', 'yellow', 'green', 'blue', 'purple', 'white', 'black']}],
          [{ 'font': [] }],
          [{ 'align': [] }],

          ['clean', 'formula']
        ],
    };
  },
  mounted() {
    this.$nextTick(function() {
      this.editor = new Quill('#' + this.id, {
        modules: {
          toolbar: this.quillToolbar
        },
        bounds: '.text-editor',
        theme: 'snow',
        syntax: true
      });  
      this.editor.root.innerHTML = this.value;  
      this.editor.on('text-change', () => this.update());
    })
  },

  methods: {
    update() {
      this.$emit('input', this.editor.getText() ? this.editor.root.innerHTML : '');
    }
  }
}

1 Ответ

0 голосов
/ 11 апреля 2019

Причина, по которой это не работает, заключается в том, что element в DOM не знает или фактически не получает присвоения id.Для DOM свойство this.id является не чем иным, как string.

Вы должны назначить element, удерживающий ваш компонент, id во время mounted() .. Также убедитесь, что вы импортируете snow theme .css file ..

<link rel="stylesheet" href="https://cdn.quilljs.com/1.3.6/quill.snow.css">

Ниже приведен фрагмент кода, здесь также можно найти зеркало CodePen:

https://codepen.io/oze4/pen/wZdjbv?editors=1010

Это то, что было изменено: 

mounted() {

    /* THIS WAS ADDED */
    this.$el.id = this.id;
    /* ^^^^^^^^^^^^^^ */

    this.$nextTick(function() {
      this.editor = new Quill("#" + this.id, {
        modules: {
          toolbar: this.quillToolbar
        },
        bounds: ".text-editor",
        theme: "snow",
        syntax: true
      });
      this.editor.root.innerHTML = this.value;
      this.editor.on("text-change", () => this.update());
    });
  },


const quillComponent = {
  template: "#quillComponent",
  props: {
    value: {
      type: String,
      default: ""
    },
    id: {
      type: String,
      default: "editor"
    }
  },
  data: {
    editor: null,
    quillToolbar: [
      ["bold", "italic", "underline", "strike"],
      ["blockquote", "code-block", "link"],
      [{ list: "ordered" }, { list: "bullet" }],
      [{ script: "sub" }, { script: "super" }],
      [{ indent: "-1" }, { indent: "+1" }],
      [{ direction: "rtl" }],
      ["image", "video"],
      [{ size: ["small", false, "large", "huge"] }],
      [{ header: [1, 2, 3, 4, 5, 6, false] }],
      [
        {color: ["red","orange","yellow","green","blue","purple","white","black"]},
        {background: ["red","orange","yellow","green","blue","purple","white","black"]}
      ],
      [{ font: [] }],
      [{ align: [] }],
      ["clean", "formula"]
    ]
  },
  mounted() {
    /* THIS WAS ADDED */
    this.$el.id = this.id;
    /* ^^^^^^^^^^^^^^ */
    this.$nextTick(function() {
      this.editor = new Quill("#" + this.id, {
        modules: {
          toolbar: this.quillToolbar
        },
        bounds: ".text-editor",
        theme: "snow",
        syntax: true
      });
      this.editor.root.innerHTML = this.value;
      this.editor.on("text-change", () => this.update());
    });
  },
  methods: {
    update() {
      let r = this.editor.getText() ? this.editor.root.innerHTML : "";
      console.log(r);
      this.$emit(
        "input",
        this.editor.getText() ? this.editor.root.innerHTML : ""
      );
    }
  }
};

new Vue({
  el: "#app",
  components: {
    quillComponent,
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.6/quill.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

<link rel="stylesheet" href="https://cdn.quilljs.com/1.3.6/quill.snow.css">


<div id="app">
  <quill-component></quill-component>
</div>

<script type="text/x-template" id="quillComponent">
  <div></div>
</script>
...