单击vue中的按钮时，如何将Quill Text Editor读取

Question

我有一个Quill文本编辑器，默认情况下，我想将其设置为ReadOnly，当单击按钮时，这应该是TRUE/FALSE。因此，这是我的组成部分：

<template>
  <div ref="editor"></div>
</template>

<script>
import Quill from 'quill';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.bubble.css';
import 'quill/dist/quill.snow.css';

export default {
  props: {
    disabled: { type: Boolean, default: false },
    value: {
      type: String,
      default: ''
    }
  },

  data() {
    return {
      editor: null,
    };
  },
  mounted() {
    this.editor = new Quill(this.$refs.editor, {
      modules: {
        toolbar: [
          [{ header: [1, 2, 3, 4, false] }],
          ['bold', 'italic', 'underline']
        ]
      },
      readOnly: this.disabled,
      theme: 'snow',
      formats: ['bold', 'underline', 'header', 'italic']
    });

    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 : '');
    }
  }
}
</script>

我将此值作为“禁用”的组件发送给我的组件，当我单击按钮时，true变为false，当我再次单击Visa Versa时。因此，这没什么错。另外，当我确实读取：true或Readonly：false时，它有效，但是使用这种方式，可读取：this.disabled它无效。

我正在使用vue，但我直接基于quilljs创建了一个组件。

我使用的文档是： httpps://quilljs.coms.coms.com/docs.com/docs/docs/docs/docs/configuration/configuration/#Readonly < /a>

Answer 1

我也有同样的问题，并且有一个“ [Vue警告]：试图突变“启用”。道具是阅读的。尝试更改组件中的道具时。您可以将“启用”或“禁用”道具传递给羽毛笔，取决于按钮条件，然后重新固定鹅毛笔组件。

     <template>
  <div>
    <QuillEditor
        ref="myEditor"
        theme="snow"
        toolbar="full"
        :read-only=readOnly
        v-model:content="content" required contentType="html"
        :style='{width: width, height: height}'
    />
  </div>
</template>
<script>
import { QuillEditor } from "@vueup/vue-quill";
import '@vueup/vue-quill/dist/vue-quill.snow.css'

export default {
  name: "MyQuillEditor",
  components: {
    QuillEditor,
  },
  props: ['width', 'height', 'showAvatar'],
  emits: ['resizeRowBar', 'saveInnerHtml', 'displayFontMenu'],
  data(){
    return {
      content: '',
      readOnly: false,
    }
  },
  methods: {
    collectHTML(){
      this.$data.readOnly = true;
      this.$refs.myEditor.reinit();
    }
  },

  mounted() {
  },
}
</script>

<style scoped>

</style>

另外，您可以使用此。