MJDaws0n / Rich-Text-Editor

Rich Text Editor (no execCommand) ================================= Preview: https://mjdaws0n.github.io/Rich-Text-Editor/example.html Overview -------- RichTextEditor is a tiny, class-based rich text editor that keeps state in a JSON model (not the DOM). You control formatting by applying classes (and optional inline styles such as CSS variables) to selections or entire lines. The editor: • Parses the contenteditable content into a clean model. • Applies formatting by splitting/merging segments in the model. • Re-renders the DOM from the model. • Preserves selections and emits events. Key Features ------------ • Class-based inline formatting (bold, italic, underline, strikethrough, custom, etc.). • Inline styles with CSS variables (e.g., --highlight). • Line-level formatting (e.g., align-left/center/right) applied to whole lines. • Robust multi-line selection handling with precise splitting/merging. • Events: change (content + HTML), select (range + selected text). • Selection helpers and caret APIs. • BR-only lines never receive line-level styles (so caret behaves correctly after Enter). Quick Start ----------- 1) Include the script and a contenteditable element: 2) Define some CSS for classes you plan to use: Functions --------- • **toggleFormat(className, styles?)** • Toggle a class on the selected text. styles is an object of inline styles (supports CSS variables). • Example: • **applyFormat(className, styles?)** • Apply a class (and optional inline styles) to the selected text without removing existing classes. • Example: • **unapplyFormat(className?)** • Remove a class from the selected text. If className is empty/falsy, removes all classes and inline styles from the selection. • Example: or • **unapplyAllFormat(className?)** • Remove formatting across the entire editor. With a className, removes only that class; with no className, removes all classes and inline styles everywhere. • Example: or • **toggleFormatOnLine(className, styles?)** • Toggle a line-level class (and optional styles) on the entire line(s) intersecting the selection (collapsed selection affects the caret line). • Example: • **applyFormatOnLine(className, styles?)** • Apply a line-level class/styles to entire line(s). • Example: • **removeFormatFromLine(className?)** • Remove a line-level class from the line(s). If className is empty/falsy, clears all line-level classes and styles. • Example: or • **lineHasFormat(className)** • Returns true if all selected lines (or caret line) have the class. • **includesClass(className)** • Returns true if any part of the current selection includes the class. • **hasFormat(className)** • Returns true if the entire selection has the class. Content APIs ------------ • **setContent(html)** • Set the editor content from an HTML string (alias of setContentFromHTML). • Example: • **setContentFromHTML(html)** • Parse HTML (as produced by this editor) into the model and render it. • **setContentFromJson(json)** • Set the content directly from a JSON model: Array , where each Line is an Array of items like { type: 'text', content, className?, styles? }. Optional line._lineClassName and line._lineStyles are supported. • **getHTML()** • Return the current HTML string rendered by the editor. • **getJson()** • Return the current content model as JSON (deep-cloned), including line-level metadata. Events ------ • **on(event, callback)** • Add an event listener. • 'change' => callback(contentArray, htmlString) • 'select' => callback([start, end], selectedPlainText) • Example: Utilities --------- • **setSelection(startIndex, endIndex)** • Programmatically set the selection by linear indices. • **focused()** • Returns true if the editor currently has text focus.