Verwendung des VUE-quill-editor-Editors und ausführliche Erklärung der benutzerdefinierten Symbolleiste

Vue verwendet einen Editor, hier ist der Editor quil-editor

Offizielle Website: https://quilljs.com/docs/modules/toolbar 

1: Quill-Eidtor installieren

npm i [email protected] --save

2: Erstellen Sie eine Seite und schreiben Sie sie in die Vorlage

<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 ref="editor"></div> 
    </div>
  </div>
</template>

Einfache Konfiguration verschiedener Schaltflächen, die Abhängigkeiten und die Symbolleiste von Quill in das Skript einführen

<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: "请输入内容...",
        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;
      });

      // 监听记录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>

Das Obige ist eine prägnante Version, die einen Editor mit einer Vielzahl von Tastenoperationen direkt schreiben kann.

Der Effekt ist wie folgt

 3: Passen Sie jedes kleine Etikett in der Symbolleiste an

Zusätzlich zum Festlegen der Farbe der ursprünglichen kleinen Schaltfläche können Sie der ursprünglichen Schaltfläche auch eine Textbeschreibung hinzufügen und nach einem längeren Hover eine Popup-Eingabeaufforderung anzeigen.

Ersetzen Sie die ursprüngliche Symbolleiste in der Vorlage durch eine Beschriftung

<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中list中的写的前面再加一个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="设置方向"></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="设置背景" @click="setImg"></button>
                </span>
            </div>


            <div class="editor" ref="editor" style="height: 380px; background-color: white;  "></div>
        </div>
    </div>
</template>

Und das Skript muss dahingehend geändert werden

export default {
    data() {
        return {
            quill: null,
            editorIndex: 0,
            editorOption: {
    
                theme: "snow",
                modules: {
                    // toolbar: this.toolbar(),
                    toolbar: '#toolbar',
                },
                placeholder: "请输入内容...",
                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>

Der Stil ist wie folgt

Ändern Sie die Farbe der ursprünglichen Drei-Wege-Schaltfläche, fügen Sie Eingabeaufforderungstext hinzu (Farbe und Position können geändert werden), fügen Sie eine benutzerdefinierte Schaltfläche hinzu (die letzte ist) und die Popup-Textaufforderung, die nach längerem Hovern angezeigt wird Taste.

 Allgemein: Beim Schreiben werden Sie auf viele Probleme stoßen, insbesondere beim Anpassen.