reactjsreact-quill

How to add custom handlers in react-quill modules when toolbar is array of options?


I have config for React-quill text editor, and it works fine but when I try to add handlers to make my custom undo, redo actions it doesnt works

 const modules = {
    history: [{ delay: 500 }, { maxStack: 100 }, { userOnly: false }],
    toolbar: [
      [{ header: [1, 2, false] }],
      [{ font: [] }], // fonts
      [{ size: ["12px", "14px", "16px", "18px", "20px"] }],
      ["bold", "italic", "underline", "strike", "blockquote"],
      [{ list: "ordered" }, { list: "bullet" }, { list: "check" }],
      [{ color: [] }, { background: [] }],
      [{ align: [] }],
      ["link"],
      /* ["undo", "redo"],*/
      [
        {
          handlers: {
            undo: () => {
              alert("dsdsd");
            },
          },
        },
      ],
    ],
  };

So the question is how add custom handlers to toolbar when toolbar is array of options


Solution

  • In React-quill, the toolbar contains containers and handlers( see: https://quilljs.com/docs/modules/toolbar/). If you set the toolbar value to string or array, it uses the value as a container, and if set Object use as handlers. And if you want to set both containers and handlers, You should set the toolbar as a key value structure:

    toolbar: {
      container: [
        [{ header: [1, 2, false] }]
      ], 
      handlers: {
        'bold': customBoldHandler
      }
    }