vue-quill-editor 实现撤销功能和还原功能的富文本编辑框

<template>
  <div class="editor-container">
    <quill-editor
        class="ql-editor"
        v-if="showEditor"
        v-model="content"
        ref="myQuillEditor"
        :options="editorOption"
        @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
        @change="onEditorChange($event)">
    </quill-editor>
  </div>
</template>

<style lang="stylus" scoped>
@import "./index.styl"
</style>

<script>
import { quillEditor } from 'vue-quill-editor' // 调用编辑器
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import Quill from 'quill/dist/quill.js'
import { ImageDrop } from 'quill-image-drop-module'
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/imageDrop', ImageDrop)
Quill.register('modules/imageResize', ImageResize)
const revokeImg = require('@/assets/images/revoke.png')

export default {
  components: {
    quillEditor
  },
  mounted () {
    this.editorOption.initButton && this.editorOption.initButton()

    this.hintGetFun()
  },
  data () {
    return {
      showEditor: true,
      content: '',
      editorOption: {
        placeholder: '',
        modules: {
          imageDrop: false,
          imageResize: {
            displaySize: false
          },
          // ImageExtend: {},
          toolbar: {
            container: [],
            handlers: {}
          }
        }
      },
      history: []
    }
  },
  methods: {
    hintGetFun () {
      this.$nextTick(function () {
        this.$refs.myQuillEditor.quill.enable(true)
        this.$refs.myQuillEditor.quill.blur()
      })
    },
    onEditorReady (editor) { // 准备编辑器
    },
    // 失去焦点事件
    onEditorBlur (e) {
    },
    // 获得焦点事件
    onEditorFocus (e) {
    },
    // 内容改变事件
    onEditorChange (e) {
      this.history.push(e.html)
      this.$emit('changeDeconstruct', e.html)
    },
    escapeStringHTML (str) {
      str = str.replace(/&lt;/g, '<')
      str = str.replace(/&gt;/g, '>')
      return str
    }

  },
  computed: {
    editor () {
      return this.$refs.myQuillEditor.quill
    }
  },
  props: {
    deconstruct: {
      type: String,
      required: false,
      default: ''
    }
  },
  watch: {
  },
  created () {
    this.content = this.escapeStringHTML(this.deconstruct)
    if (this.deconstruct === '') {
      this.history.push('')
    }

    this.editorOption.modules.toolbar.container = [
      ['bold', 'italic', 'underline', 'strike'],
      [{ 'color': [] }],
      ['revoke'],
      ['restore']
    ]

    this.editorOption.modules.toolbar.handlers.revoke = () => {
      if (this.history.length > 1) {
        let history = this.history.pop()
        history = this.history.pop()
        this.content = history
      }
      this.hintGetFun()
    }
    this.editorOption.modules.toolbar.handlers.restore = () => {
      let history = this.history[0]
      this.history = []
      this.content = history
      this.hintGetFun()
    }
    this.editorOption.initButton = function () { // 在使用的页面中初始化按钮样式
      const revokeButton = document.querySelector('.ql-revoke')
      revokeButton.style.cssText = 'width:28px;height:24px;padding:2px 4px'
      revokeButton.innerHTML = '<img style="width:18.4px;height:18.4px" src="' + revokeImg + '" />'

      const restoreButton = document.querySelector('.ql-restore')
      restoreButton.parentNode.style.cssText = 'float:right;margin-right:0'
      restoreButton.style.cssText = 'height:24px;color:#3B80FC;cursor:pointer;width:80px;text-align:center;'
      restoreButton.innerHTML = '一键恢复'
    }
  }
}
</script>