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"/>