如何在 Quill JS (react-quill) 中创建 undo/redo 按钮？

Question

QuillJS 没有默认 undo/redo 按钮。我正在尝试将它们添加到工具栏。 Quill 有一个文件夹，其中保存了 undo/redo 个图标。在 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;

有谁知道我需要编写什么代码以及在哪里才能将 undo/redo 图标添加到与 Quill 内置的 undo/redo 功能相关的工具栏？我已经试了好几天了，还是想不通。

Answer 1

Does anyone know exactly what code I would need to write and where in order to add undo/redo icons to the toolbar that are connected to the undo/redo functions build into Quill?

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

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

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

quill.history.undo();

History Module

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

Answer 2

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

以下是如何让 undo/redo 为 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 功能正常工作。在编辑器中，undo/redo 按钮还没有图标；我还没有弄清楚如何添加图标；他们只有 'UNDO' 和 'REDO' 这两个词。但他们工作。

我接下来要弄清楚的是如何添加 undo/redo 图标。如果有人知道如何执行此操作，请告诉我。谢谢！

Answer 3

不确定这将如何与 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 4

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

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

您没有获得 Quill 参考资料。所以你可以使用：

而不是上面的行

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

这解决了 ReactQuill 的问题。

如何在 Quill JS (react-quill) 中创建 undo/redo 按钮？

How to create undo/redo buttons in Quill JS (react-quill)?

reactjs

quill