Live demo — this example is server-driven; run the showcase locally for the interactive version.

Rich text editor

Use Rich text editor straight from a Qute template — parameters and slots instead of Java builders. This reference is generated from the runtime template sources: each template documents its parameters and slots in the header comment shown beneath its include line.

Templates

rich-text-editor

{#include components/editors/rich-text-editor /}
Rich text editor — PHA custom component wrapping Quill 
 Required: id — derives {id}-field on the editor surface element. 
 Optional: theme (optional, 'snow'|'bubble'), placeholder (optional), readOnly (optional),
              height (optional), toolbar (optional, 'full'|'basic'|'minimal'), name (optional) 
 The initial HTML value is passed via the {#content}...{/content} insert block. 
 Requires: /web/vendor/quill/quill.js loaded before Alpine 
 Requires: /web/vendor/quill/quill.snow.css and/or quill.bubble.css 
 Requires: /web/js/alpine/components/rich-text-editor.js loaded before Alpine 
 Requires: /web/css/components/rich-text-editor.css 
 Config travels as data-* and is read in init(): interpolating a Qute value into a JS string literal
    inside x-data breaks on any newline or apostrophe in the text (a wrapped include arg is enough), and
    Alpine reports it only as an init-time SyntaxError.