动态添加具有自己工具栏的羽毛笔编辑器

Question

我最近遇到了一个问题，即在同一页面的应用程序中存在使用多个Quill编辑器的情况。 他们每个人都应该有自己的工具栏，类似于下面的图片。

Answer 1

我找到了解决这个问题的方法。

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

另外，您还需要使用类似的类或ID在循环中创建工具栏。

可以使用任何框架（例如使用Quill Editor的React / Angular / Vue）完成这种类似方法。

下面是反应中的代码快照。

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>

模块是

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

我这样称呼

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

希望这会有所帮助。