代码之家  ›  专栏  ›  技术社区  ›  Wasimakram Mulla

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

  •  -2
  • Wasimakram Mulla  · 技术社区  · 5 年前

    我最近遇到了一个问题,在同一个页面上的应用程序中使用了多个Quill编辑器。 他们每个人都应该有自己的工具栏,类似下图。 enter image description here

    1 回复  |  直到 5 年前
        1
  •  1
  •   Wasimakram Mulla    5 年前

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

    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 />
    

    希望这有帮助。