@vueup/vue-quill 添加撤销与回退按钮

`@vue-up/vue-quill` 是一个基于 Vue 的富文本编辑器组件，它封装了 Quill 编辑器。要在 `vue-quill` 中添加撤销与回退功能，Quill 自带了一套完整的编辑历史系统，你可以通过引用 Quill 的 API 来实现。

首先，确保已安装并引入 `vue-quill` 组件：

<template>
  <vue-quill-editor :options="quillOptions" />
</template>

<script>
import { QuillEditor } from '@vue-up/vue-quill';

export default {
  components: {
    QuillEditor,
  },
  data() {
    return {
      quillOptions: {
        modules: {
          toolbar: 'ql-align,ql-indent,ql-list,ql-color,ql-background,ql-font,ql-size,ql-stroke,ql-format,ql-preview,ql-action', // 标准工具栏配置
          history: true, // 启用编辑历史
        },
      },
    };
  },
}
</script>

然后，在 JavaScript 部分，`history: true` 就会启用撤销和回退功能。用户可以使用 Quill 提供的方法 `quill.history.back()` 和 `quill.history.forward()` 进行操作。通常，你需要监听 `'text-change'` 或 `'update'` 事件来保存当前状态。

methods: {
  onContentChange(content) {
    this.currentContent = content;
    // 可选：存储当前内容到本地或服务器
  },
},
mounted() {
  this.quill.on('text-change', () => {
    this.onContentChange(this.quill.root.innerHTML);
  });
},