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

Question

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

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();
    }

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

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

Answer 2

不确定这将如何或不会与 React 集成，但我能够在 quill repo 上使用 this issue 获取 svg 图标。

toolbarOptions = [
    ['bold', 'italic', 'underline'],
    ['undo' , 'redo' ],
    [{ 'indent': '-1'}, { 'indent': '+1' }],
    [{ align: '' }, { align: 'center' }, { align: 'right' }, { align: 'justify' }],
    ['image']
];

var icons = Quill.import("ui/icons");
    icons["undo"] = `<svg viewbox="0 0 18 18">
    <polygon class="ql-fill ql-stroke" points="6 10 4 12 2 10 6 10"></polygon>
    <path class="ql-stroke" d="M8.09,13.91A4.6,4.6,0,0,0,9,14,5,5,0,1,0,4,9"></path>
  </svg>`;
    icons["redo"] = `<svg viewbox="0 0 18 18">
    <polygon class="ql-fill ql-stroke" points="12 10 14 12 16 10 12 10"></polygon>
    <path class="ql-stroke" d="M9.91,13.91A4.6,4.6,0,0,1,9,14a5,5,0,1,1,5-5"></path>
  </svg>`;

var quill = new Quill('div#content', {
    modules: {
        toolbar: toolbarOptions,
...

Answer 3

有谁知道我需要写什么代码以及在哪里 为了将撤消/重做图标添加到连接到 Quill 中内置了撤消/重做功能？

嗨。不幸的是，我仍然不知道如何将按钮连接到本机 Quill 功能。但是你可以做一些其他的事情来给你想要的结果。

看看this。 搜索项目 020、021 和 026。

您可以添加一个新按钮，并将其设置为调用以下代码：

quill.history.undo();

History Module

如果您还有其他问题，请发表评论。我会尽快回复你。

Answer 4

我只是想为使用 react-quill 的开发人员添加一些东西。在这一行：

 var icons = Quill.import("ui/icons");

您没有获得 Quill 参考。所以你可以使用上面的代码来代替：

 var icons = ReactQuill.Quill.import("ui/icons");

这解决了 ReactQuill 的问题。