Vue3 使用富文本编辑器 Quill

欢迎大家来到IT世界,在知识的湖畔探索吧!

Vue3 使用富文本编辑器 Quill

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

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

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

1.安装

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

欢迎大家来到IT世界,在知识的湖畔探索吧!

2.引入

全局注册

欢迎大家来到IT世界,在知识的湖畔探索吧!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

欢迎大家来到IT世界,在知识的湖畔探索吧!export { QuillEditor, Quill }

Import

javascript

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

3.使用

简单使用

欢迎大家来到IT世界,在知识的湖畔探索吧!<template> <QuillEditor theme="snow" /> </template>

4.使用示例

template：

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

script：

欢迎大家来到IT世界,在知识的湖畔探索吧!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，如：

欢迎大家来到IT世界,在知识的湖畔探索吧!<quill-editor v-if="dialogVisible" ref="quillRef" theme="snow" toolbar="full" v-model:content="row.content" content-type="html"/>