脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue quill-editor 编辑器

Vue quill-editor 编辑器使用及自定义toobar示例详解

 更新时间：2023年07月21日 11:45:57   作者：海的天空1661  
这篇文章主要介绍了Vue quill-editor编辑器使用及自定义toobar示例详解,这里讲解编辑器quil-editor的知识结合实例代码给大家介绍的非常详细，需要的朋友可以参考下

vue使用编辑器，这里讲解编辑器quil-editor

官网：https://quilljs.com/docs/modules/toolbar

1：安装quill-eidtor

npm i quill@1.3.6 --save

2：创建一个页面，再template里写入

<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>

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

上面这是简洁版，直接可以写出一个带有多种按钮操作的编辑器。

效果如下

 3：自定义toobar中各个小标签

除了可以对原来的小button设置颜色，还可以对原来的添加文字描述，并且还可以有长期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中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>

而script中需要改成这样

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>

样式如下

原三方按钮的颜色修改，添加提示文字（颜色和位置可以修改），添加自定义按钮（最后一个就是），长期hoverbutton后出现的弹框文字提示。

 总：写的时候会遇到很多问题，尤其是自定义的时候

到此这篇关于Vue quill-editor 编辑器使用及自定义toobar示例详解的文章就介绍到这了,更多相关vue quill-editor 编辑器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • vue中报错Duplicate keys detected:'1'. This may cause an update error的解决方法

    vue中报错Duplicate keys detected:'1'. This may c

    我们在vue开发过程中常会遇到一些错误,这篇文章主要给大家介绍了关于vue中报错Duplicate keys detected:‘1‘. This may cause an update error的解决方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-03-03
  • vue中view-model双向绑定基础原理解析

    vue中view-model双向绑定基础原理解析

    这篇文章主要介绍了vue中view-model双向绑定基础原理，文中给大家介绍了vue双向绑定的原理总结，本文通过示例代码给大家介绍的非常详细,需要的朋友可以参考下
    2022-10-10
  • vue调用微信JSDK 扫一扫，相册等需要注意的事项

    vue调用微信JSDK 扫一扫，相册等需要注意的事项

    这篇文章主要介绍了vue调用微信JSDK 扫一扫，相册等需要注意的事项，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下
    2021-01-01
  • Vue SPA 如何解决浏览器缓存问题

    Vue SPA 如何解决浏览器缓存问题

    这篇文章主要介绍了Vue SPA 如何解决浏览器缓存问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08
  • vue项目如何读取本地json文件数据实例

    vue项目如何读取本地json文件数据实例

    很多时候我们需要从本地读取JSON文件里面的内容,这篇文章主要给大家介绍了关于vue项目如何读取本地json文件数据的相关资料,需要的朋友可以参考下
    2023-06-06
  • 编写Vue项目,如何给数组的第一位添加对象数据

    编写Vue项目,如何给数组的第一位添加对象数据

    这篇文章主要介绍了编写Vue项目,如何给数组的第一位添加对象数据，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • keep-alive组件的作用与原理分析

    keep-alive组件的作用与原理分析

    这篇文章主要介绍了keep-alive组件的作用与原理,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-05-05
  • vue项目中向数组添加元素的3种方式

    vue项目中向数组添加元素的3种方式

    这篇文章主要给大家介绍了关于vue项目中向数组添加元素的3种方式,在Vue中添加元素到数组非常简单,文中通过代码介绍的非常详细,对大家学习或者使用vue具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-10-10
  • elementui el-table中如何给表头 el-table-column 加一个鼠标移入提示说明

    elementui el-table中如何给表头 el-table-column 加一个鼠

    本文通过实例代码介绍如何在使用Element UI的el-table组件时为表头添加提示功能,通过结合el-tooltip组件实现鼠标移入时显示提示信息,感兴趣的朋友跟随小编一起看看吧
    2024-11-11
  • elementui中el-input回车搜索实现示例

    elementui中el-input回车搜索实现示例

    这篇文章主要介绍了elementui中el-input回车搜索实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-06-06

最新评论