记录一下最近工作遇到的问题，需求就是在vue-quil-editor富文本自定义撤销和还原功能:undo、redo。

安装

npm install vue-quill-editor -S

当然,也可以使用CDN的方式引入,我们这里讲NPM安装

组件中挂载

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'import { quillEditor } from 'vue-quill-editor'export default {components: {quillEditor}
}

options具体配置

editorOption: {placeholder: "请输入溯源内容，溯源内容不会被收录进入数据库", modules: {toolbar: {container: [//自定义工具栏选项//工具栏设置["bold", "italic", "underline", "strike"], //加粗，斜体，下划线，删除线["blockquote", "code-block"], //引用，代码块//  [{ 'header': 1 }, { 'header': 2 }],        // 标题，键值对的形式；1、2表示字体大小[{ list: "ordered" }, { list: "bullet" }], //列表[{ align: [] }], //对齐方式[{ script: "sub" }, { script: "super" }], // 上下标["clean"], //清除字体样式//[{ 'indent': '-1'}, { 'indent': '+1' }],     // 缩进//  [{ 'direction': 'rtl' }],             // 文本方向[{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色[{ size: ["small", false, "large", "huge"] }], // 字体大小[{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题[{ font: [] }], //字体["image"], //上传图片、上传视频["revoke", "redo"], //添加的按钮],handlers: {//给自定义按钮添加的事件revoke: () => {//撤销this.btnundo();},redo: () => {//恢复this.btnRedo();},},},},},

自定义按钮的样式

在data里面定义一个方法 initButton，然后mounted里面调用这个方法

initButton: function () {//在使用的页面中初始化按钮样式let revoke = document.querySelector(".ql-revoke"); //获取元素let redo = document.querySelector(".ql-redo");let Front = document.createElement("i"); //创建元素let after = document.createElement("i");Front.className = "el-icon-refresh-left"; //新增class属性after.className = "el-icon-refresh-right";Front.style.cssText = "font-size:18px";after.style.cssText = "font-size:18px";revoke.appendChild(Front); //追加到元素中redo.appendChild(after);
},

实现undo redo

我这里实现undo redo的思路是，自己定义一个空的数组changeText,去记录富文本字符发生的变化，富文本绑定@change事件，每次富文本发生改变，changeText数组就记录一次，然后点击undo 和 redo去获取相应的数据就好了。定义的方法写在methods里就好了，editorOption配置里面去调用methods里面的方法。

// 撤销btnundo() {for (let i = 0; i < this.changeText.length; i++) {if (this.content == this.changeText[i]) {this.content = this.changeText[i - 1];}}},// 恢复btnRedo() {for (let i = 0; i < this.changeText.length; i++) {if (this.content == this.changeText[i]) {this.content = this.changeText[i + 1];return;}}},// 富文本监听事件EditorChange() {if (this.changeText.length >= 50) {//限制数组长度this.changeText.shift(); //清除第一条数据this.changeText.push(this.content);} else {this.changeText.push(this.content); //追加数据}},

汉化富文本

样式直接写入style里面

<style>
/* 富文本汉化 */
p {margin: 10px;
}.edit_container,
.quill-editor {height: 300px;
}.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {content: "14px";
}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {content: "10px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {content: "18px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {content: "32px";
}.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {content: "文本";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {content: "标题1";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {content: "标题2";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {content: "标题3";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {content: "标题4";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {content: "标题5";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {content: "标题6";
}.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {content: "标准字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {content: "衬线字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {content: "等宽字体";
}
</style>

存在问题

到这里已经基本实现undo和redo了，但是undo redo是有bug的，因为项目已经够用了，所以就没有继续深挖，说一下bug：

1.undo 因为是@change事件去记录富文本变化的，但是数组是空的时候是没有记录的，所以一直撤销到数组为空的时候，不会清空，这个问题应该可以写个判断去判断数组是不是为空而去改变双向绑定的值。

2.redo 一样是@change事件去记录富文本的变化，所以撤销后也会触发change事件记录富文本的变化，所以数组里面会出现相同的值，我这里是给了return停止代码的运行，但是一直恢复到数组最后一条的时候，也是会有点问题。

如果有大佬懂得undo redo的可以具体讲讲，我这里就是怎么简单怎么来，也没考虑那么多，不对的地方请指出

vue-quill-editor 自定义功能的实现(undo、redo)相关推荐

现代化富文本编辑器 Quill Editor
介绍近期在弄富文本编辑器相关的内容,其中项目中使用了 Quill Editor(后面简称 Quill).Quill 自称是一个现代化强大的富文本编辑器,它与其它富文本编辑器(例如 UEditor)不 ...
Quill Editor
VUE-QUILL-EDITOR 该文章仅记录学习过程,不展示最终文件源码安装 quill-editor 在对应的目录打开 Terminal 执行以下命令: 安装 editor npm instal ...
添加数据功能java,SpringBoot+Vue实现数据添加功能
一.添加代码生成器用来自动为数据库映射类建立:mapper.service.controller package com.hanmh.utils; import com.baomidou.mybat ...
拖拽功能 php,基于Vue实现拖拽功能
这篇文章主要为大家详细介绍了Vue实现拖拽功能,拖动方块进行移动,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了Vue实现拖拽功能的具体代码,供大家参考,具体内容如下效果图: ...
vue 实现文本的拖拽_基于Vue实现拖拽功能
本文实例为大家分享了Vue实现拖拽功能的具体代码,供大家参考,具体内容如下效果图: HTML代码: 位置 x:{{val.x}} y:{{val.y}} //注意这里要通过指令绑定函数将当前元素的位 ...
使用自定义功能构建Mamdani系统
这里推荐搭建先看这个ppt,再看后面matlab的实现,这样你会很清晰,为了赚点积分,这里设置一下积分,抱歉大家了. 详细讲解模糊逻辑的ppt 如何在设计器中使用自定义函数构建模糊推理系统当构建模糊 ...
vue中实现打印功能的方法与注意事项
vue中实现打印功能的方法与注意事项一.使用方法: 1. 在HTML中 2. 在VUE项目中二.问题总结 1. 设置打印方向 2. 设置打印高度 1. 单张打印 2. 循环打印 3. 获取打印操作 ...
基于springboot+vue的开源自定义表单问卷系统
一.项目简介基于springboot+vue的开源自定义表单问卷系统二.实现功能支持表单拖拽支持各种控件操作(基础组件.进阶组件等) 基础组件包含文本.多行文本.图片.图形.日历控件支持拖拽 ...
学好vue靠他就行了——vue脚手架，自定义事件，插槽等复杂内容
博主主页:追求- 本文承接上一篇: 学好vue靠他就行了-vue基础知识与原理(一) 学好vue靠他就行了-vue基础知识与原理(二) 希望各位博主多多关注文章目录 2. vue脚手架,自定义事件, ...

vue-quill-editor 自定义功能的实现(undo、redo)

安装