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

Question

QuillJS doesn\'t come with default undo/redo buttons. I\'m trying to add them to the toolbar. Quill has a folder with the undo/redo icons saved. In the node_modules, there\'

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?

Hi. Unfortunately I still don't know how to connect buttons to native Quill functions. But you can do something else that can give you the desired result.

Take a look at this. Search for items 020, 021 and 026.

You can add a new button, and set it to call the following code:

quill.history.undo();

History Module

If you have additional questions, please leave a comment. As soon as I can, I will answer you.

Answer 2

I just want to add something for developers who are using react-quill. on this line:

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

You do not get Quill reference. so instead of the above line you can use:

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

This solves the problem for ReactQuill.

Answer 3

@Loa thanks for all your help. I had to mix together code from a lot of different posts, but your links started the process of finding all the posts.

Here's how to make undo/redo work for react-quill:

In the ReactQuill component in the render(), add:

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

In the constructor, add:

        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,
                }
            }

In the function builder area (don't know the name for it), add these functions:

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

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

That will get the undo/redo functions working. In the editor, the undo/redo buttons don't have the icons yet; I haven't figured out how to add the icons yet; they just have the words 'UNDO' and 'REDO'. But they work.

The next thing for me to figure out will be how to add the undo/redo icons. If anyone knows how to do this, please let me know. Thanks!

Answer 4

Not sure how this would or wouldn't integrate with React, but I was able to get svg icons using this issue on the quill repo.

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,
...