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

随峰而逝

vue3使用VueQuill插入自定义按钮

在 Vue 3 项目中使用

1. VueQuill

复制代码

编辑器时，我们可以自定义内容来满足特定的需求。
本文将介绍如何在

1. VueQuill

复制代码

中插入自定义内容，比如插入特定的标签或样式元素。
Quill官方中文文档

1. 项目设置和依赖安装

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

1. npm init vue@latest

复制代码

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

1. npm install @vueup/vue-quill

复制代码

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

2. 基础配置 VueQuill

在

1. src/components

复制代码

中创建一个

1. QuillEditor.vue

复制代码

文件，并引入

1. vue3-quill

复制代码

，将

1. VueQuillEditor

复制代码

作为编辑器组件使用。

• 1. template

  复制代码
  内容
  

1. <template>
   
2.   <div class="editor">
   
3.     <quill-editor ref="quillEditorRef" v-model:content="content" content-type="html" :options="options" :style="styles" @text-change="textChangeFn" />
   
4.   </div>
   
5. </template>

复制代码

• 1. options

  复制代码
  内容：
  

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

复制代码

以上代码创建了一个基础的

1. VueQuillEditor

复制代码

组件，我们可以在其中输入和编辑文本。

3. 自定义内容的插入

接下来，我们会在 Quill 编辑器中插入自定义内容，比如一个带特定样式的

1. span

复制代码

标签。为此，我们需要创建一个 Quill 的自定义 Blot 元素。

• 新建
  1. CustomSpanBlot.ts

  复制代码
  文件
  

在

1. src/quill-blots

复制代码

文件夹下新建

1. CustomSpanBlot.ts

复制代码

文件，用于定义我们自定义的

1. span

复制代码

标签格式：

1. import { Quill } from '@vueup/vue-quill';
   
2. 
   
3. const Inline = Quill.import("blots/inline");
   
4. 
   
5. class CustomSpanBlot extends Inline {
   
6.   static blotName = "customSpan";
   
7.   static tagName = "span";
   
8.   static className = "custom-span";
   
9. 
   
10.   static create(value: string) {
    
11.     const node = super.create();
    
12.     node.setAttribute("data-custom", value);
    
13.     node.innerHTML = value;
    
14.     return node;
    
15.   }
    
16. 
    
17.   static formats(node: HTMLElement) {
    
18.     return node.getAttribute("data-custom");
    
19.   }
    
20. 
    
21.   format(name: string, value: string) {
    
22.     if (name === CustomSpanBlot.blotName && value) {
    
23.       this.domNode.setAttribute("data-custom", value);
    
24.       this.domNode.innerHTML = value;
    
25.     } else {
    
26.       super.format(name, value);
    
27.     }
    
28.   }
    
29. }
    
30. export { CustomSpanBlot };

复制代码

4. 插入内容到编辑器

在

1. QuillEditor.vue

复制代码

中引入自定义的

1. CustomSpanBlot

复制代码

，并编写插入自定义内容的方法：

1. <script lang="ts">
   
2. import { CustomSpanBlot } from './CustomSpanBlot';
   
3. // 进行注册
   
4. Quill.register(CustomSpanBlot);
   
5. // 初始化
   
6. onMounted(() => {
   
7.   // 新增自定义功能
   
8.     const newFunctionButton = document.querySelector('.ql-newFunction');
   
9.     newFunctionButton.setAttribute('style', 'width:80px; border:1px solid #ccc; border-radius:5px');
   
10.     newFunctionButton.textContent = '新功能';
    
11. });
    
12. </script>

复制代码

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

来源:https://www.jb51.net/javascript/331113jdw.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！