Quill
Quill is a free, open source WYSIWYG editor built for the modern web. Completely customize it for any need with its modular architecture and expressive API.
Enable Component
Enable component from within your frontal.config.js as follows
// frontal.config.js
module.exports = {
    bundles: {
        main: {
            pages: ['**/*.html'],
            components: {
                quill: {
                    bubble: false
                },
            }
        }
    }
}
Basic Usage
You can build your own using the previewer
<div id="editor">
    <p>Hello World!</p>
    <p>Some initial <strong>bold</strong> text</p>
    <p><br></p>
</div>
var quill = new Quill('#editor', {
    theme: 'snow'
});
Customize variables at:/library/extend/components/_quill.scss
Component's defaults:/library/components/quill/_defaults.scss
NameDefault valueNote
$editor-bgui-base-color-2;
$editor-border-colordivider;
$editor-border-radius8px;
$editor-link-colorprimary;
$toolbar-bgui-base-color-2;
$toolbar-icons-block-border-color$editor-border-color;
$toolbar-icons-active-bgui-base-color-3;
$toolbar-icons-colormain-text-color;
$toolbar-icons-hover-colorprimary;
$popover-padding-y0.5rem;
$popover-padding-x8px;
$popover-bgpopover-bg;
$popover-text-colorpopover-text-color;
$popover-border-colorpopover-border-color;
$popover-box-shadowproperty.get(popover-shadow);Requires @use "@library/sass/modules/property";
$popover-item-padding-y0.344rem;
$popover-item-padding-x12px;
$popover-item-text-colormenu-item-text-color;
$popover-item-hover-bgmenu-item-hover-bg;
$popover-item-hover-text-colormenu-item-hover-text-color;
$popover-input-padding-y.282rem;
$popover-input-padding-x.75rem;
$popover-input-font-size$font-size-sm;
$popover-input-weight$font-weight-normal;
$popover-input-border-radius$border-radius-sm;
$popover-input-placeholder-colorform-input-placeholder-color;
$popover-input-bgform-input-bg;
$popover-input-colorform-input-text-color;
$popover-input-border-colorform-input-border;
$popover-input-box-shadow0 0 0 0 transparent;
$popover-input-hover-bgform-input-hover-bg;
$popover-input-hover-colorform-input-hover-text-color;
$popover-input-hover-border-colorform-input-hover-border;
$popover-input-hover-box-shadowform-input-hover-box-shadow;
$popover-input-focus-bgform-input-focus-bg;
$popover-input-focus-colorform-input-focus-text-color;
$popover-input-focus-border-colorform-input-focus-border;
$popover-input-focus-box-shadow0 0 0 .25rem property.get(form-input-focus-box-shadow);Requires @use "@library/sass/modules/property";

Make sure to read the Customize components and Understanding and using the design system guides.

{title}