vue3如何使用VueQuill插入自定義按鈕

更新時(shí)間：2024年11月21日 09:38:31 作者：胡八一、

在Vue3項(xiàng)目中使用VueQuill編輯器,通過自定義Blot元素,可以插入特定的標(biāo)簽或樣式元素,滿足項(xiàng)目需求

vue3使用VueQuill插入自定義按鈕

在 Vue 3 項(xiàng)目中使用 VueQuill 編輯器時(shí)，我們可以自定義內(nèi)容來滿足特定的需求。

本文將介紹如何在 VueQuill 中插入自定義內(nèi)容，比如插入特定的標(biāo)簽或樣式元素。

Quill官方中文文檔

1. 項(xiàng)目設(shè)置和依賴安裝

如果你還沒有創(chuàng)建 Vue 3 項(xiàng)目，可以使用以下命令來初始化項(xiàng)目：

npm init vue@latest

選擇 Vue 3 的相關(guān)配置，然后進(jìn)入項(xiàng)目目錄并安裝依賴項(xiàng)。

安裝 VueQuill

npm install @vueup/vue-quill

此庫是 Quill 編輯器的 Vue 3 兼容版本。

2. 基礎(chǔ)配置 VueQuill

在 src/components 中創(chuàng)建一個(gè) QuillEditor.vue 文件，并引入 vue3-quill，將 VueQuillEditor 作為編輯器組件使用。

template 內(nèi)容

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

options 內(nèi)容：

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' }], // 縮進(jìn)
            [{ size: ['small', false, 'large', 'huge'] }], // 字體大小
            [{ header: [1, 2, 3, 4, 5, 6, false] }], // 標(biāo)題
            [{ color: [] }, { background: [] }], // 字體顏色、字體背景顏色
            [{ align: [] }], // 對(duì)齊方式
            ['clean'], // 清除文本格式
            ['link', 'image', 'video'], // 鏈接、圖片、視頻
            ['newFunction'] // 新添加的按鈕
          ],
      handlers: {
        newFunction: (value: boolean) => {
          // 添加處理方法
          const quill = quillEditorRef.value.getQuill();
          // 插入自定義按鈕
           quill.insertEmbed(0, 'customSpan', 'test');
        }
      }
    }
  },
  placeholder: props.readOnly ? '' : '請(qǐng)輸入內(nèi)容',
  readOnly:false
});

以上代碼創(chuàng)建了一個(gè)基礎(chǔ)的 VueQuillEditor 組件，我們可以在其中輸入和編輯文本。

3. 自定義內(nèi)容的插入

接下來，我們會(huì)在 Quill 編輯器中插入自定義內(nèi)容，比如一個(gè)帶特定樣式的 span 標(biāo)簽。為此，我們需要?jiǎng)?chuàng)建一個(gè) Quill 的自定義 Blot 元素。

新建 CustomSpanBlot.ts 文件

在 src/quill-blots 文件夾下新建 CustomSpanBlot.ts 文件，用于定義我們自定義的 span 標(biāo)簽格式：

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

const Inline = Quill.import("blots/inline");

class CustomSpanBlot extends Inline {
  static blotName = "customSpan";
  static tagName = "span";
  static className = "custom-span";

  static create(value: string) {
    const node = super.create();
    node.setAttribute("data-custom", value);
    node.innerHTML = value;
    return node;
  }

  static formats(node: HTMLElement) {
    return node.getAttribute("data-custom");
  }

  format(name: string, value: string) {
    if (name === CustomSpanBlot.blotName && value) {
      this.domNode.setAttribute("data-custom", value);
      this.domNode.innerHTML = value;
    } else {
      super.format(name, value);
    }
  }
}
export { CustomSpanBlot };

4. 插入內(nèi)容到編輯器

在 QuillEditor.vue 中引入自定義的 CustomSpanBlot，并編寫插入自定義內(nèi)容的方法：

<script lang="ts">
import { CustomSpanBlot } from './CustomSpanBlot';
// 進(jìn)行注冊(cè)
Quill.register(CustomSpanBlot);
// 初始化
onMounted(() => {
  // 新增自定義功能
    const newFunctionButton = document.querySelector('.ql-newFunction');
    newFunctionButton.setAttribute('style', 'width:80px; border:1px solid #ccc; border-radius:5px');
    newFunctionButton.textContent = '新功能';
});
</script>