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.
Add a comment
|
1 Answer
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.
1 Comment
Zayn
I'm facing the exact same problem but I didn't understand your solution here. Where did you actually loop editors? Can you please provide solution codesandbox?