vue3如何使用VueQuill插入自定义按钮

在Vue3项目中使用VueQuill编辑器,通过自定义Blot元素,可以插入特定的标签或样式元素,满足项目需求

vue3使用VueQuill插入自定义按钮

在 Vue 3 项目中使用 VueQuill 编辑器时，我们可以自定义内容来满足特定的需求。

本文将介绍如何在 VueQuill 中插入自定义内容，比如插入特定的标签或样式元素。

Quill官方中文文档

1. 项目设置和依赖安装

如果你还没有创建 Vue 3 项目，可以使用以下命令来初始化项目：

npm init vue@latest

选择 Vue 3 的相关配置，然后进入项目目录并安装依赖项。

安装 VueQuill

npm install @vueup/vue-quill

此库是 Quill 编辑器的 Vue 3 兼容版本。

2. 基础配置 VueQuill

在 src/components 中创建一个 QuillEditor.vue 文件，并引入 vue3-quill，将 VueQuillEditor 作为编辑器组件使用。

template 内容

<template>  <div class="8182-20d3-7775-a9f6 editor">    <quill-editor ref="quillEditorRef" v-model:content="content" content-type="html" :options="options" :style="styles" @text-change="textChangeFn" />  </div></template>

options 内容：

import '@vueup/vue-quill/dist/vue-quill.snow.css';import { Quill } from '@vueup/vue-quill';const options = ref<any>({  theme: 'snow',  bounds: document.body,  debug: 'warn',  modules: {    // 工具栏配置    toolbar: {      container: [            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线            ['blockquote', 'code-block'], // 引用  代码块            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表            [{ indent: '-1' }, { indent: '+1' }], // 缩进            [{ size: ['small', false, 'large', 'huge'] }], // 字体大小            [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题            [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色            [{ align: [] }], // 对齐方式            ['clean'], // 清除文本格式            ['link', 'image', 'video'], // 链接、图片、视频            ['newFunction'] // 新添加的按钮          ],      handlers: {        newFunction: (value: boolean) => {          // 添加处理方法          const quill = quillEditorRef.value.getQuill();          // 插入自定义按钮           quill.insertEmbed(0, 'customSpan', 'test');        }      }    }  },  placeholder: props.readOnly ? '' : '请输入内容',  readOnly:false});