Intro

Rich text editor using Quill.js

This package allows you to add a rich text editor to your app. It's basically just Quill.js embedded. It allows you to use bold, italic, quotes etc. and it outputs html.

 Read more about Quill.js here

Demo

Components

  • quill-editor

    This is the only component in this package. It allows you to embed the Quill.js rich text editor.

    Attributes

    content The editor content as HTML.
    theme The editor theme. You can choose between "snow" or "bubble". Defaults to "bubble".
    show-merge-tags Accepts Bool True/False. Default is False
    merge-tags Accepts an OBJECT with key/value pairs of the merge tags to be used.
    Ex. { "First Name": "Andreas" }

    Events

    input The "input" event is emitted every time the content of the editor changes. The event payload is the updated HTML content.

Style variables

The following style variables can be used to customize the styling of the editor content.
Add these to your project theme or as component style variables to override the default values.

quill-font-color The default font color
quill-bg-color The default background color
quill-font-size The default font size
quill-h1-size Heading 1 font size
quill-h1-color Heading 1 font color
quill-h2-size Heading 2 font size
quill-h2-color Heading 2 font color
quill-link-color Hyperlink color
quill-strong-color <strong> font color
quill-quote-color Blockquote font color
quill-quote-border-color Blockquote border color