Dynamically adding quill editor having its own toolbar

Question

I recently faced an issue, where there was a scenario for using multiple Quill editors in my application on the same page. And each of them should have their own toolbar, something similar to the image below.

Answer 1

I found a solution to this problem.

for (var x = 0; x < len; x ++) {
   editors.push(new Quill(document.getElementById('box-' + x), {
       modules: {
           toolbar: {
               container: '.toolbar-' + x,
           },
       },
   }));
} 

And also you need to create the toolbar in a loop with the similar class or Id's.

This similar approach can be done using any framework, like React/Angular/Vue where you are using Quill Editor.

Below is a snapshot of code from React.

The following is a custom toolbar for Quill Editor
<div>
      <div className={`toolbar-${props.index}`}>
        <button type='button' className='ql-bold mr-4 ' />
        <button type='button' className='ql-italic mr-4' />
        <button type='button' value='ordered' className='ql-list mr-4 h-5 w-5' />
        <button type='button' value='bullet' className='ql-list mr-4 ' />
    <div>
</div>

The module for which is

let modules = {
    toolbar: {
      container: `.toolbar-${props.index}`,
    }
  };

And I have called it like

<Editor index=1 />
<Editor index=2 />
<Editor index=3 />

Hope this helps.