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's also undo() and redo() functions. I'm kind of new to coding and don't know how to access these things and make them work. I'm using React. Here's my code so far:

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;

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? I've been trying for days and can't figure it out.

Page COW · Accepted Answer · 2020-01-03 19:39:19Z

14

@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!

answered Jan 3, 2020 at 19:39

Page COW

7653 gold badges18 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Loa Over a year ago

I'm glad I helped you. Best of all, you not only discovered the solution, but decided to share it with the community. Keep it up! Share knowledge! I helped you today, but nothing prevents me from ever needing your help in the future, or anyone else. I hope you can complete your projects, and I wish you the best of luck. :)

Jeremias Nater Over a year ago

Thanks alot for sharing this. Do you know if there could be any way to disable or remove the undo / redo buttons when there is nothing to undo/redo?

user151841 · Accepted Answer · 2020-10-07 18:08:58Z

13

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

answered Oct 7, 2020 at 18:08

user151841

18.1k32 gold badges120 silver badges178 bronze badges

1 Comment

EGN Over a year ago

This worked from me, just make sure you import the default from Quill module.... import Quill from 'quill'; It is very surprising they have icons for redo/undo but they have not defined them in ui/icons

Loa · Accepted Answer · 2020-01-01 22:55:30Z

2

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.

answered Jan 1, 2020 at 22:55

Loa

2,2903 gold badges23 silver badges48 bronze badges

3 Comments

Page COW Over a year ago

I have the "UNDO/REDO" buttons appearing, but the function is not working. Here's my new code: ``` class QuillTextEditor extends Component { ... this.modules = { history: { delay: 1000, maxStack: 100, userOnly: false }, toolbar: [ ['undo'], ['redo'], ... ], handlers: { 'undo' : quill.history.undo(), 'redo' : quill.history.redo() } }; ``` I'm getting an error message saying 'quill' is not defined. Do you know how to fix this? Thanks so much for your help.

Loa Over a year ago

This message appears when you have a reference to nothing. In this case, the quill variable was not started. Here's how this variable can be started. There's only one problem: You are using reactjs, and unfortunately I do not know how to use this technology. With your knowledge of this tool, you'll need to find out how to get the reference for new Quill(...).

Loa Over a year ago

@PageCOW see if this or this can help you out. If that doesn't help you, search here on stackoverflow: quill reactjs.

desertnaut · Accepted Answer · 2020-12-24 01:48:11Z

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.

edited Dec 24, 2020 at 1:48

desertnaut

60.8k32 gold badges155 silver badges183 bronze badges

answered Dec 23, 2020 at 16:54

abhishek jain

963 bronze badges

2 Comments

Muhammad Kamal Over a year ago

I am able to get Quill reference like this. import { Quill } from 'react-quill' I am using [email protected]

abhishek jain Over a year ago

Yeah, that's basically importing with destructuring.

Collectives™ on Stack Overflow

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

4 Answers 4

2 Comments

1 Comment

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related