为什么我不能在 vue3 quill 编辑器中编辑？

Question

我正在用 vue3 quill 编辑器做一个测试，这是它目前的样子：

显示羽毛笔编辑器，但我无法编辑文本。

这是我的代码：

HelloWorld.vue

<template>
  <quill-editor
    v-model:value="state.content"
    :options="state.editorOption"
    :disabled="state.disabled"
    @blur="onEditorBlur($event)"
    @focus="onEditorFocus($event)"
    @ready="onEditorReady($event)"
    @change="onEditorChange($event)"
  />
</template>

<script>
import { reactive } from 'vue'
import { quillEditor } from 'vue3-quill'

export default {
  name: 'App',
  setup() {
    const state = reactive({
      content: '<p>2333</p>',
      _content: '',
      editorOption: {
        placeholder: 'core',
        modules: {
          // toolbars: [
            // custom toolbars options
            // will override the default configuration
          // ],
          // other moudle options here
          // otherMoudle: {}
        },
        // more options
      },
      disabled: false
    })

    const onEditorBlur = (quill) => {
      console.log('editor blur!', quill)
    }
    const onEditorFocus = (quill) => {
      console.log('editor focus!', quill)
    }
    const onEditorReady = (quill) => {
      console.log('editor ready!', quill)
    }
    const onEditorChange = ({ quill, html, text }) => {
      console.log('editor change!', quill, html, text)
      state._content = html
    }

    setTimeout(() => {
      state.disabled = true
    }, 2000)

    return { state, onEditorBlur, onEditorFocus, onEditorReady, onEditorChange }
  },
  components: {
    quillEditor
  }
}
</script>

命令

这些是我创建项目时执行的命令。

vue create . 

with default vue 3 options

npm i vue3-quill

我在这里找到了命令和代码： https://www.npmjs.com/package/vue3-quill

Answer 1

线条：

setTimeout(() => {
   state.disabled = true
}, 2000)

禁用编辑器。 只需删除它们或将 true 替换为 false