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