Vue?quill-editor?編輯器使用及自定義toobar示例詳解

更新時間：2023年07月21日 11:45:57 作者：海的天空1661

這篇文章主要介紹了Vue quill-editor編輯器使用及自定義toobar示例詳解,這里講解編輯器quil-editor的知識結(jié)合實例代碼給大家介紹的非常詳細，需要的朋友可以參考下

vue使用編輯器，這里講解編輯器quil-editor

官網(wǎng)：https://quilljs.com/docs/modules/toolbar

1：安裝quill-eidtor

npm i quill@1.3.6 --save

2：創(chuàng)建一個頁面，再template里寫入

<template>
  <div class="quill-editor-box" :class="{ 'h-min-40': height === 40 }">
    <div ref="myQuillEditor" :style="style" class="quill-editor">
      <!--這個是輸入的各種按鈕，現(xiàn)在是簡單實用，自定義的看后面-->
      <slot name="toolbar"></slot>
      <!--這個是編輯器-->
      <div ref="editor"></div> 
    </div>
  </div>
</template>

在script中引入依賴及quill的toobar的各種按鈕的簡單配置

<script>
// 主庫
import _Quill from "quill";
// 核心庫，不包含主題、格式化及非必要模塊
import "quill/dist/quill.core.css";
// 主題樣式表
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import katex from "katex";
import { lineHeightStyle } from "@/js/style.js";
export default {
  data() {
    return {
      quill: null,  //這個是ref指定quill
      editorIndex: 0,
      editorOption: {
        theme: "snow",  //這是是snow模式，一共兩個模式，snow模式是有toobar的，另一個模式是沒有的，只有編輯框quill
        modules: {
          toolbar: [ // 這里是tootbar樣式
            // 加粗 、斜體、底部橫線、中間橫線
            ["bold", "italic", "underline", "strike"], 
            // 引號 、 插入代碼
            ["blockquote", "code-block"], 
            // 有序列表、 無序列表
            [{ list: "ordered" }, { list: "bullet" }],
            // 字體:這里可以寫一些字體，也可以自定義引入
            [{ 'font': ['SimSun', 'SimHei','Microsoft-YaHei','KaiTi','FangSong','Arial'] }],
            // 大小
            [{ size: ["12px","14px",false,"18px","20px","22px","24px","26px","28px","30px","32px","34px","36px"] }],
            // 標題
            [{ header: [1, 2, 3, 4, 5, 6, false] }],
            // 字體顏色 、 背景顏色
            [{ color: [] }, { background: [] }],
            // 排列方式
            [{ align: [] }],
            // 下標、 上標
            [{ 'script': 'sub' }, { 'script': 'super' }],
            // 縮進
            [{ 'indent': '-1' }, { 'indent': '+1' }],
            // 方向
            [{ 'direction': 'rtl' }],
            // 行高 可自定義
            [{ lineHeight: lineHeightStyle.whitelist }],
            // 清除樣式
            ["clean"],
            ["link", "video", "image"],
          ], 
          formula: this.formula(),
        },
        placeholder: "請輸入內(nèi)容...",
        readOnly: false,
      },
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      // 獲取quill，在這里做一些自定義處理
      this.quill = new _Quill(this.$refs["myQuillEditor"], this.editorOption);
      //禁用編輯器，防止頁面自動滾動到編輯器位置
      this.quill.enable(false);
      // 初始值
      this.quill.pasteHTML(this.value || "");
      this.$nextTick(function () {
        //丟掉編輯器焦點并重新啟用編輯器
        this.quill.blur();
        this.quill.enable(true);
      });
      // 自定義imageHandler 對圖片按鈕添加的自定義方法
      this.quill.getModule("toolbar").addHandler("image", () => {
        this.showUploadImage = true;
      });
      //  自定義插入視頻 對視頻按鈕添加的自定義方法
      this.quill.getModule("toolbar").addHandler("video", () => {
        this.dialogFormVisible = true;
      });
      // 監(jiān)聽記錄Index
      this.quill.on("selection-change", (range, oldRange) => {
        if (oldRange === null || oldRange.index === 0) {
          this.editorIndex = this.quill.getLength();
        } else {
          this.editorIndex = oldRange.index;
        }
      });
      // 值變化
      this.quill.on(
        "text-change",
        debounce(() => {
          let html = this.$refs.myQuillEditor.children[0].innerHTML;
          if (html === "<p><br></p>") {
            html = "";
          }
          this.onEditorChange(html);
        }, 400)
      );
    },
    onEditorChange(val) {
      this.$emit("inputvalue", val);
    },
    confirm() {
      this.quill.focus();
      if (!/^<iframe.+<\/iframe>$/.test(this.form.videoIframe)) {
        this.form.videoIframe = "";
        return;
      }
      var range = this.quill.getSelection();
      if (range) {
        //  在當前光標位置插入圖片
        this.quill
          .getModule("toolbar")
          .quill.clipboard.dangerouslyPasteHTML(
            range.index,
            this.form.videoIframe
          );
        //  將光標移動到圖片后面
        this.quill.getModule("toolbar").quill.setSelection(range.index + 1);
      }
      this.form.videoIframe = "";
      this.dialogFormVisible = false;
    },
    uploadImage(imgUrl) {
      let index = this.editorIndex;
      let nextIndex = this.editorIndex + 1;
      let html = this.$refs.myQuillEditor.children[0].innerHTML;
      if (html === "<p><br></p>") {
        index = 0;
        nextIndex = 1;
      }
      this.quill.insertEmbed(index, "image", imgUrl);
      this.quill.getModule("toolbar").quill.setSelection(nextIndex);
      this.showUploadImage = false;
    },
  },
};
</script>

上面這是簡潔版，直接可以寫出一個帶有多種按鈕操作的編輯器。

效果如下

3：自定義toobar中各個小標簽

除了可以對原來的小button設(shè)置顏色，還可以對原來的添加文字描述，并且還可以有長期hover后的彈框提示。

在template中原來toobar的地方換成標簽

<template>
    <div class="quill-editor-box" :class="{ 'h-min-40': height === 40 }">
        <div ref="myQuillEditor" :style="style" class="quill-editor">
            <!-- <slot name="toolbar"></slot> -->
            <div id="toolbar" style="background-color: white;">
                <span class="ql-formats" >
    <!-- 這里clas都是上面toobar中l(wèi)ist中的寫的前面再加一個ql-這個  -->
                    <button class="ql-bold"></button>
                    <button id="so">加粗</button>
                    <button class="ql-italic"></button>
                    <button class="ql-underline"></button>
                    <button class="ql-strike"></button>
                    <!-- spsdf -->
                </span>
                <span class="ql-formats">
                    <!-- <button class="ql-header" value="1"></button>
                        <button class="ql-header" value="2"></button> -->
                    <button class="ql-blockquote"></button>
   <!-- 這里是我添加的文字，自定義，嘗試過用span用div，并不能把布局弄的很好，相反會挺糟糕。 -->
                    <button id="so">引號</button>
                    <button class="ql-code-block"></button>
                </span>
                <span class="ql-formats" id="fom2">
                    <button class="ql-list" value="ordered"></button>
                    <button class="ql-list" value="bullet"></button>
   <!-- 這里是我添加的文字，自定義，嘗試過用span用div，并不能把布局弄的很好，相反會挺糟糕。 -->
                    <button id="so">列表</button>
                </span>
                <span class="ql-formats">
                    <select class="ql-font">
                        <option value="SimSun"></option>
                        <option value="SimHei"></option>
                        <option value="Microsoft-YaHei"></option>
                        <option value="KaiTi"></option>
                        <option value="FangSong"></option>
                        <option value="Arial"></option>
                    </select>
   <!-- 這里是我添加的文字，自定義，嘗試過用span用div，并不能把布局弄的很好，相反會挺糟糕。 -->
                    <button id="so">字體</button>
                    <select class="ql-size">
                        <option value="12px"></option>
                        <option value="14px"></option>
                        <option selected></option>
                        <option value="18px"></option>
                        <option value="20px"></option>
                        <option value="22px"></option>
                        <option value="24px"></option>
                        <option value="26px"></option>
                        <option value="28px"></option>
                        <option value="30px"></option>
                        <option value="32px"></option>
                        <option value="34px"></option>
                        <option value="36px"></option>
                    </select>
                </span>
                <span class="ql-formats">
                    <select class="ql-header">
                        <option value="1"></option>
                        <option value="2"></option>
                        <option value="3"></option>
                        <option value="4"></option>
                        <option value="5"></option>
                        <option value="6"></option>
                        <option value="7" selected></option>
                    </select>
                </span>
                <span class="ql-formats">
                    <select class="ql-color"></select>
                    <button id="so">顏色</button>
                    <select class="ql-background"></select>
                </span>
                <span class="ql-formats">
                    <select class="ql-align"></select>
                </span>
                <span class="ql-formats">
                    <button class="ql-script" value="sub"></button>
                    <button id="so">下標</button>
                    <button class="ql-script" value="super"></button>
                </span>
                <span class="ql-formats">
                    <button class="ql-indent" value="-1"></button>
                    <button class="ql-indent" value="+1"></button>
                </span>
                <span class="ql-formats">
                    <button class="ql-direction" value="rtl" title="設(shè)置方向"></button>
                </span>
                <span class="ql-formats">
                    <select class="ql-lineHeight" title="行高">
                        <option value="1" selected></option>
                        <option value="1.5"></option>
                        <option value="2"></option>
                        <option value="2.5"></option>
                        <option value="3"></option>
                        <option value="3.5"></option>
                        <option value="4"></option>
                        <option value="4.5"></option>
                    </select>
                </span>
                <span class="ql-formats">
                    <button class="ql-link"></button>
                    <button class="ql-video"></button>
                    <button class="ql-image"></button>
                    <!-- <button class="ql-formula"></button> -->
                </span>
                <span class="ql-formats">
                    <button class="ql-clean"></button>
                </span>
                <span class="ql-formats">
         <!-- title是長期hover后彈出的彈框提示 -->
           <button id="custom-img" title="設(shè)置背景" @click="setImg"></button>
                </span>
            </div>
            <div class="editor" ref="editor" style="height: 380px; background-color: white;  "></div>
        </div>
    </div>
</template>

而script中需要改成這樣

export default {
    data() {
        return {
            quill: null,
            editorIndex: 0,
            editorOption: {
                theme: "snow",
                modules: {
                    // toolbar: this.toolbar(),
                    toolbar: '#toolbar',
                },
                placeholder: "請輸入內(nèi)容...",
                readOnly: false,
            },
        };
    },

css

<style lang="less" scoped>
.ql-formats {
    margin-top: 10px;
    margin-bottom: 20px;
    position: relative;
}
#so {
    position: absolute;
    top: 17px;
    padding: 0px;
    // left:50%-30px;
    left:2px;
    font-size: 11px;
    color:red;
}
</style>

樣式如下

原三方按鈕的顏色修改，添加提示文字（顏色和位置可以修改），添加自定義按鈕（最后一個就是），長期hoverbutton后出現(xiàn)的彈框文字提示。