如何在Vue3中使用Quill文本编辑器作为组件

Question

1 - 安装 NPM / Yarn

• npm install @vueup/vue-quill@latest --save # 或 纱线添加@vueup/vue-quill@latest

2 - 在组件中的使用

import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';

export default {
  components: {
    QuillEditor
  }
}
<template>
    <QuillEditor v-model:content="form.description" content-type="html" theme="snow" toolbar="full" />
</template>

我在 vue3 组件中这样做正确吗？

Answer 1

我们仅使用官方包解决这个问题的方法是：

<div
   id="text-editor"
   ref="textEditorEl"
   class="text-editor__editor"
/>

然后我们使用组合 api，但我确定选项 api 是相同的概念：

添加 vue 引用

const textEditorEl = ref(null)

添加 onMounted，在其中添加 nextTick，以确保 ref 已准备好。

添加一个

    quillEditor.value = new Quill(textEditorEl.value || '#text-editor', {
                modules: {
                    toolbar: true,
                },
                theme: 'snow',
            });

当然，这只是基础知识，样式等是为我们的应用程序定制的，因此无法帮助您。祝你好运！