Both editors below are the same <dj-rich-text> component. The toolbar,
the node types, and the output format all come from plugins. The first editor uses the
default set; the second composes headings and lists with the defaults, plus a custom
strikethrough plugin authored right here in the page to show third-party authoring.
Paste is sanitized by default: try pasting rich content from a web page or word processor — scripts, inline styles, and unsafe links are stripped, and unknown tags are unwrapped to plain text with formatting preserved.
(type above)
(type above)
The full plugin set. Use the toolbar color controls (text and highlight), the image button
(insert from a file or a URL — alt text is required), the table controls (insert from the
8×8 grid picker, then edit rows/columns from the table menu), the embed button (paste a
YouTube/Vimeo URL or a direct .mp4/.mp3 link — video.js CSS is loaded in the page head), and
the checklist button (click a box or press Space at the start of an item to toggle it). Type
@ to mention
someone — a menu opens at the caret; ArrowUp/Down then Enter (or click) inserts a pill. Type
/ at the start of a block (or after a space) to open the slash command menu —
/h filters to headings, Enter applies the block; /image and
/table insert those. The emoji button opens a searchable picker, and typing a
shortcode like :tada: becomes an emoji. Type a URL or email and it auto-links on
the next space. Toggle the output format between HTML and Markdown; the
readout below is the live value. Colors survive a value round-trip via the color
plugin's html.import hook.
(type above)