动态添加拥有自己工具栏的笔芯编辑器。

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的循环来创建工具栏。

这种类似的方法可以使用任何框架来完成，比如ReactAngularVue，你使用的是Quill Editor。

下面是一个代码快照 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>

该模块是：

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

我把它叫做

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

希望对你有所帮助。