动态添加具有自己工具栏的quill编辑器

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

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

类似的方法可以使用任何框架来实现,比如使用Quill编辑器的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 />

希望这有帮助。