reactjs - 如何在 Quill JS (react-quill) 中创建撤销/重做按钮？

Question

QuillJS 没有默认的撤销/重做按钮。我正在尝试将它们添加到工具栏。 Quill 有一个文件夹，其中保存了撤消/重做图标。在 node_modules 中，还有 undo() 和 redo() 函数。我对编码有点陌生，不知道如何访问这些东西并使它们工作。我正在使用 react 。到目前为止，这是我的代码:

import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import 'react-quill/dist/quill.bubble.css';

class QuillTextEditor extends Component {
    constructor(props) {
        super(props);

        this.modules = {
            toolbar: [
              [{ 'header': [false, 1, 2, 3] }],
              [{ 'align': [] }],
              ['bold', 'italic', 'underline',],
              [{'list': 'ordered'}, {'list': 'bullet'}],
              [{ 'indent': '-1'}, { 'indent': '+1' }],
              [{ 'script': 'super' }, 'strike'],
              [{ 'color': [] }, { 'background': [] }], 
              ['link', 'image'],
            ]
        };

        this.formats = [
            'header',
            'align',
            'bold', 'italic', 'underline', 
            'list', 'bullet',
            'indent', 'indent',
            'script', 'strike',
            'color', 'background',
            'link', 'image',
        ];
    }

    render() {
        return (
          <div>
            <ReactQuill 
                theme="snow"  
                modules={this.modules}
                formats={this.formats} 
                value={''}/>
            </div>
          </div>
        );
    }

}

export default QuillTextEditor;

有谁确切地知道我需要编写什么代码以及在哪里才能将撤消/重做图标添加到连接到 Quill 中内置撤消/重做功能的工具栏？我已经尝试了几天，无法弄清楚。

Answer 1

@Loa 感谢您的所有帮助。我不得不将许多不同帖子的代码混合在一起，但是您的链接开始了查找所有帖子的过程。

以下是如何使 react-quill 撤消/重做工作:

在 render() 的 ReactQuill 组件中，添加:

    <ReactQuill 
        ...
        ref={(el) => {this.reactQuillRef = el}}
        .../>   

在构造函数中，添加:

        var icons = Quill.import("ui/icons");
        icons["undo"] = 'UNDO';
        icons["redo"] = 'REDO';

        this.modules = {
            history: {
                delay: 1000,
                maxStack: 100,
                userOnly: false
              },
            toolbar: {
                container: [
                ['undo'],
                ['redo'],
                ...
                ],
                handlers: {
                'undo' : this.myUndo,
                'redo' : this.myRedo,
                }
            }

在函数构建器区域(不知道它的名字)，添加这些函数:

    myUndo = () => {
        let myEditor = this.reactQuillRef.getEditor();
        return myEditor.history.undo();
    }

    myRedo = () => {
        let myEditor = this.reactQuillRef.getEditor();
        return myEditor.history.redo();
    }

这将使撤消/重做功能工作。在编辑器中，撤销/重做按钮还没有图标；我还没有弄清楚如何添加图标；他们只有“撤消”和“重做”这两个词。但他们工作。

我接下来要弄清楚的是如何添加撤消/重做图标。如果有人知道如何做到这一点，请告诉我。谢谢!