Vue3 使用富文本编辑器 Quill

Quill是一款为现代网络打造的免费开源WYSIWYG编辑器。凭借其模块化架构和富有表现力的API，它完全可定制以满足任何需求。

VueQuill是一个用于构建富文本编辑器的组件，由Vue3和Quill提供支持。

地址：https://vueup.github.io/vue-quill/

1.安装

npm install @vueup/vue-quill@latest --save

2.引入

全局注册

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

const app = createApp()
app.component(&#;QuillEditor&#;, QuillEditor)

局部注册

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

export default {
  components: {
    QuillEditor
  }
}

3.导出

Export

QuillEditor : 编辑器组件

Quill : 实例

js

export { QuillEditor, Quill }

Import

javascript

// ES6
import { QuillEditor, Quill } from &#;@vueup/vue-quill&#;;

3.使用

简单使用

<template>
  <QuillEditor theme=&#;snow&#; />
</template>

4.使用示例

template：

<QuillEditor ref=&#;quillRef&#; theme=&#;snow&#; toolbar=&#;full&#; v-model:content=&#;row.content&#; content-type=&#;html&#;/>

script：

import { QuillEditor } from &#;@vueup/vue-quill&#;;
import type { Quill } from &#;@vueup/vue-quill&#;;

const quillRef = ref<Quill>();

5.注意

该组件随对话框一起使用时，如果使用 v-model:content 绑定变量，第一次加载时，值为空，当再次打开对话框时，其内容仍然会保留之前编辑的内容。所以需要使用代码进行清空操作：

quillRef.value.setHTML(&#;&#;);

或者在组件上使用 v-if，如：

<quill-editor v-if=&#;dialogVisible&#; ref=&#;quillRef&#; theme=&#;snow&#; toolbar=&#;full&#; v-model:content=&#;row.content&#; content-type=&#;html&#;/>