Quill Divider

Module extension for Quill.js that handles divider in the toolbar.

Install

yarn add quill-divider

Usage

import Quill from 'quill'
import 'quill/dist/quill.snow.css'
import 'quill-divider'

const toolbarOptions = {
  container: [
    ['bold', 'italic', 'underline', 'strike'],
    ['divider'],   
  ]
}
const quill = new Quill(editor, {
  // ...
  modules: {
    // ...
    toolbar: toolbarOptions,
    divider: {
        // See optional "config" below
    }
  }
});

Config

For the default experience, pass a true, like so:

new Quill(editor, {
    // ...
    modules: {
        // ...
        divider: true
    }
});

cssText - Styles of the element

new Quill(editor, {
    // ...
    modules: {
        // ...
        divider: {
            // default
            cssText: 'border: none;border-bottom: 1px inset;'
        }
    }
});

className - ClassName of the element

new Quill(editor, {
    // ...
    modules: {
        // ...
        divider: {
            // default
            className: void 0
        }
    }
});

icon - Button icon

new Quill(editor, {
    // ...
    modules: {
        // ...
        divider: {
            // default
            icon: '<svg class="icon" style="vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path class="ql-fill" d="M64 464h896v96H64v-96zM224 96v160h576V96h96v256H128V96h96z m576 832v-160H224v160H128v-256h768v256h-96z"></path></svg>``'
        }
    }
});

text - When on, insert text in the divider

new Quill(editor, {
    // ...
    modules: {
        // ...
        divider: {
            // default
            text: void 0
        }
    }
});

// Other configurations
new Quill(editor, {
    // ...
    modules: {
        // ...
        divider: {
            // default
            text: {
                // Will be replaced by the selected text,default is placeholder
                children: 'placeholder',
                // Position of text,The optional values are left, center and right
                orientation: 'center',
                // Styles of the text
                childrenStyle: 'padding: 0 24px;'
            }
        }
    }
});