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

Question

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

Answer 1

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

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

并且您还需要使用类似的 class 或 Id 在循环中创建工具栏。

这种类似的方法可以使用任何框架来完成，例如 React/Angular/Vue 您正在使用 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 />

希望对您有所帮助。

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

Dynamically adding quill editor having its own toolbar

angular

reactjs

text-editor

quill