RichTextEditor

A contenteditable-based rich text editor with a fully customisable toolbar. Always outputs clean, semantic HTML — including <p> blocks, headings, and lists. Toolbar tools are grouped automatically using Manhattan ButtonGroup styling. Keyboard shortcuts work on both Windows/Linux (Ctrl) and macOS (Cmd).

Tab key behaviour: Pressing Tab inside a list item creates a sub-list (numbered → lettered, bullets → open circles). Shift+Tab promotes a sub-item back up. Outside of a list, Tab inserts a visual indent (4 non-breaking spaces).

Toolbar dropdown keyboard navigation: Toolbar dropdowns (e.g. Text Format, Font Size) can be opened with Enter or Space when the trigger is focused, or ↓ opens and jumps straight to the first item. Use ↑/↓ to move between options, Enter/Space to select, and Esc to close without selecting. The Text Format dropdown shows a live style preview of each heading level.

Default Toolbar

The default toolbar includes bold, italic, underline, alignment, lists, heading level, font size, and text colour.

<?= $m->richTextEditor('bioEditor')
    ->name('bio')
    ->placeholder('Start writing…')
    ->minHeight(180) ?>

List Indentation (Tab / Shift+Tab)

Inside a list item, pressing Tab creates a nested sub-list. Shift+Tab promotes an item back to the parent level.
Sub-list styling is automatic: ordered lists use lettered sub-items (a, b, c…), and unordered lists use open-circle bullets. Outside a list, Tab inserts a visual indent.

First item
Second item
Third item

Apples
Bananas
Cherries

// Tab / Shift+Tab work automatically — no configuration needed
<?= $m->richTextEditor('listEditor')
    ->name('content')
    ->toolbar(['bulletList', 'orderedList', 'separator', 'bold', 'italic'])
    ->minHeight(160) ?>

// Tab key behaviour is built in:
// – Inside a list item:  Tab   → indent (create sub-list)
//                        Shift+Tab → outdent (promote back up)
// – Outside a list:      Tab   → insert 4 non-breaking spaces
// – Sub-list types cycle automatically via CSS:
//     ol > ol  → lower-alpha (a, b, c…)
//     ul > ul  → circle bullets
//     ol > ol > ol → lower-roman (i, ii, iii…)

Character Count with Limits

Enable a live character counter with ->showCharCount(). Set ->minChars() and/or ->maxChars() to enforce limits — the counter is automatically shown when limits are set. The count turns orange as you approach 90% of the maximum, and red when a limit is violated. An error message appears below the editor (using the same style as Validator errors), and the editor border turns red.

// Basic counter
<?= $m->richTextEditor('tweetBox')
    ->name('tweet')
    ->placeholder('What\'s happening?')
    ->showCharCount()
    ->minHeight(120) ?>

// Enforce min and max (counter shown automatically)
<?= $m->richTextEditor('bioEditor')
    ->name('bio')
    ->placeholder('Must be between 20 and 200 characters…')
    ->minChars(20)
    ->maxChars(200)
    ->minHeight(100) ?>

// Listen for changes and inspect the character count
document.getElementById('tweetBox')
    .addEventListener('m:rte:change', function (e) {
        var html = e.detail.value;
        console.log('HTML:', html);
    });

Custom Toolbar & Link Insertion

Pass an array of tool names to ->toolbar() to show exactly the tools you need. Use 'separator' to add a visual divider between groups. The 'link' tool opens a Manhattan-styled dialog (not the browser prompt) with a URL field and an "Open in new tab" checkbox.

// Minimal toolbar — just the essentials
<?= $m->richTextEditor('descEditor')
    ->name('description')
    ->toolbar(['bold', 'italic', 'underline',
               'separator',
               'bulletList', 'orderedList',
               'separator',
               'link'])
    ->minHeight(120) ?>

// Full toolbar (default)
<?= $m->richTextEditor('fullEditor')
    ->name('content')
    ->toolbar(['bold', 'italic', 'underline', 'strikethrough',
               'separator',
               'undo', 'redo', 'clearFormat',
               'separator',
               'align',
               'separator',
               'bulletList', 'orderedList',
               'separator',
               'heading', 'fontSize',
               'separator',
               'foreColor',
               'separator',
               'link']) ?>

Pre-populated Content

Pass existing HTML to ->value() to pre-load the editor. The same HTML can be displayed outside the editor using the m-richtext CSS class for consistent typography.

Welcome to Manhattan

This editor outputs clean semantic HTML that looks great everywhere.

Supports headings and lists
Works with custom text colours
Keyboard shortcuts on all platforms

// Load saved HTML into the editor
$savedHtml = $post['body'];  // HTML from your database

<?= $m->richTextEditor('postEditor')
    ->name('body')
    ->value($savedHtml)
    ->minHeight(300) ?>

// Get and set content programmatically
var rte = m.richTextEditor('postEditor');

// Read current HTML
var html = rte.getValue();

// Replace content
rte.setValue('<p>New content.</p>');

// Focus the editor
rte.focus();

Displaying Saved Content

Wrap stored rich-text HTML in <div class="m-richtext"> to apply the same consistent typography that appears inside the editor.

Article Title

This is a paragraph with bold text, italic text, and a link.

A Section Heading

More content follows, demonstrating how the m-richtext class applies consistent typography to any stored HTML when rendered outside of the editor.

First bullet point
Second bullet point with coloured text
Third point

And an ordered list:

Step one
Step two
Step three

// Display saved HTML with consistent m-richtext typography
<div class="m-richtext">
    <?= $post['body'] ?>
</div>

Read-only Mode

->readOnly() disables editing and dims the toolbar. Useful for preview panels or displaying content that should not be changed.

This content is read-only and cannot be edited.

<?= $m->richTextEditor('preview')
    ->value($html)
    ->readOnly()
    ->minHeight(80) ?>

JavaScript Events

Listen for editor events to react to content changes or focus state.

Events will appear here…

// Content change
document.getElementById('rteEvents')
    .addEventListener('m:rte:change', function (e) {
        console.log('Changed:', e.detail.value);
    });

// Focus / blur
document.getElementById('rteEvents')
    .addEventListener('m:rte:focus', function () {
        console.log('Editor focused');
    });

document.getElementById('rteEvents')
    .addEventListener('m:rte:blur', function () {
        console.log('Editor blurred');
    });

Image Insertion — URL

Adding 'image' to the toolbar renders an Insert Image button. Clicking it opens a dialog where you can enter any image URL and optional alt text. No uploader configuration is required for URL-based insertion.

// Add 'image' to the toolbar — URL insertion always available
<?= $m->richTextEditor('bodyEditor')
    ->name('body')
    ->toolbar(['bold', 'italic', 'separator', 'image', 'separator', 'link'])
    ->minHeight(200) ?>

Image Insertion — File Upload & Paste

To enable file upload (via the Insert Image dialog) and/or paste-to-upload, configure an uploader endpoint using ->uploader($url, $stem). The endpoint receives a multipart/form-data POST with an image file field (and an optional stem text field) and must return { "url": "/path/to/saved/image.ext" }. Use ->allowPasteImages() to also allow users to paste raw image data (e.g. screenshots) directly into the editor. If pasting is attempted and no uploader is configured a toaster error is shown automatically.

// With file-upload support in the dialog
<?= $m->richTextEditor('postEditor')
    ->name('body')
    ->toolbar(['bold', 'italic', 'separator', 'image'])
    ->uploader('/posts/upload-image', 'post_img') ?>

// Also enable paste-to-upload (screenshots etc.)
<?= $m->richTextEditor('articleEditor')
    ->name('content')
    ->toolbar(['bold', 'italic', 'separator', 'image'])
    ->uploader('/articles/upload-image', 'article_img')
    ->allowPasteImages() ?>

// Listen for upload lifecycle events
document.getElementById('articleEditor')
    .addEventListener('m:rte:upload:start', function () {
        console.log('Upload started');
    });

document.getElementById('articleEditor')
    .addEventListener('m:rte:upload:end', function (e) {
        if (e.detail.success) {
            console.log('Uploaded to:', e.detail.url);
        } else {
            console.error('Upload failed:', e.detail.error);
        }
    });

// Listen for errors (uploader not configured etc.)
document.getElementById('articleEditor')
    .addEventListener('m:rte:error', function (e) {
        console.error('RTE error:', e.detail.message);
    });

// Insert programmatically
var rte = m.richTextEditor('articleEditor');
rte.insertImage('/uploads/photo.jpg', 'A scenic photo');

Image Alignment & Resize

Clicking any image in the editor reveals a small alignment toolbar above it with three modes:

Left — float: left. Text in the same paragraph wraps to the right of the image.
Centre — display: block; margin: auto (+ text-align: center on the parent paragraph as a fallback). The image sits on its own centred line with no text wrapping.
Right — float: right. Text in the same paragraph wraps to the left of the image.

Alignment is always available when the 'image' tool is in the toolbar; no extra option is needed. Paragraphs containing floated images are automatically cleared (via CSS overflow: hidden in .m-richtext and a ::after clearfix in the editor) so the float never bleeds into the next paragraph.

Enable ->allowImageResize() to also show 8-point drag handles around the selected image. Corner handles resize proportionally; edge handles scale on a single axis. The image's original natural dimensions are preserved in data-original-width / data-original-height attributes.

Click the image below to select it, then try each alignment button. Float left/right lets text wrap around the image; centre isolates it on its own line.

Sample image Text that wraps to the right when the image is float-left. Try clicking Right align to make this text move to the other side instead.

// Image resize enabled — click any image to see handles and alignment bar
<?= $m->richTextEditor('contentEditor')
    ->name('content')
    ->toolbar(['bold', 'italic', 'separator', 'image'])
    ->allowImageResize()
    ->minHeight(300) ?>

// Combined: upload + paste + resize + YouTube
<?= $m->richTextEditor('articleEditor')
    ->name('content')
    ->toolbar(['bold', 'italic', 'separator', 'image', 'youtube'])
    ->uploader('/articles/upload-image', 'article_img')
    ->allowPasteImages()
    ->allowImageResize()
    ->minHeight(300) ?>

// Image alignment: clicking an image shows the mini-toolbar automatically.
// Three modes:
//   Left   — float:left  (text wraps to the right)
//   Centre — display:block + margin:auto (centred, no wrap)
//   Right  — float:right (text wraps to the left)

// Saved HTML examples:
// float left:   <img style="float:left;margin-right:1em;margin-bottom:0.5em" src="...">
// centre:       <p style="text-align:center"><img style="display:block;margin-left:auto;margin-right:auto" src="..."></p>
// float right:  <img style="float:right;margin-left:1em;margin-bottom:0.5em" src="...">

// Listen for changes after resize / alignment:
document.getElementById('contentEditor')
    .addEventListener('m:rte:change', function (e) {
        console.log('Updated HTML:', e.detail.value);
    });

YouTube Video Embed

Adding 'youtube' to the toolbar renders an Embed YouTube Video button (). Clicking it opens a dialog where you can paste any YouTube URL — watch links, shortened youtu.be links, embed URLs, or even bare 11-character video IDs. A responsive 16:9 iframe wrapper (.m-rte-youtube-wrapper) is inserted at the cursor. Videos are always block-centred — they cannot be floated. Width is adjustable via drag handles; the embed stays centred regardless of width. Videos are served via youtube-nocookie.com for privacy. A Video Credit line is automatically fetched from the YouTube oEmbed API and appended below each embed, linking to the video's channel by name. The credit is part of the saved HTML output and is styled via .m-rte-youtube-credit.

// Add 'youtube' to the toolbar to enable the embed dialog
<?= $m->richTextEditor('blogEditor')
    ->name('content')
    ->toolbar(['bold', 'italic', 'separator', 'image', 'youtube', 'separator', 'link'])
    ->minHeight(300) ?>

// YouTube embeds are inserted as a responsive .m-rte-youtube-wrapper div.
// A "Video Credit" line is automatically fetched from the YouTube oEmbed API
// and appended inside the wrapper, linking to the channel by name:
//   <p class="m-rte-youtube-credit">
//     <i class="fab fa-youtube"></i>
//     Video Credit: <a href="..." target="_blank" rel="noopener noreferrer">Channel Name</a>
//   </p>

// You can retrieve the full HTML (including embed + credit) via getValue():
var rte = m.richTextEditor('blogEditor');
console.log(rte.getValue());

// The wrapper has contenteditable="false" so it is treated as an atom
// by the browser — select and delete it like any block element.

// When rendering stored content, apply .m-richtext to your wrapper
// so the responsive embed styles are automatically applied:
// <div class="m-richtext"><?= $savedHtml ?></div>

Scrollable Input Area

By default the editor auto-extends its height to fit all content, which can push the rest of the page down. Calling ->scrollable() (optionally combined with ->maxHeight()) constrains the editing area and scrolls the content within it using Apple-style thin overlay scrollbars — the same style used by the image viewer thumbstrip. The editor still auto-grows up to the specified max-height and then scrolls; the toolbar and footer stay visible at all times.

This editor is capped at 280 px and scrolls internally once the content grows past that limit. Try typing several paragraphs to see the thin overlay scrollbar appear on hover.

The toolbar and character counter (if enabled) remain fixed outside the scrollable region, so they are always accessible.

// Constrain the editor to 280 px and enable Apple-style thin scrollbar
<?= $m->richTextEditor('body')
    ->name('body')
    ->minHeight(150)
    ->maxHeight(280)
    ->scrollable() ?>

// scrollable() can also be used without maxHeight() — the thin scrollbar
// is applied regardless and will appear whenever the parent clips the editor:
<?= $m->richTextEditor('body')
    ->name('body')
    ->scrollable() ?>

// No extra JS is required — scrollable() is purely a CSS enhancement.
// The scrollbar fades in on hover and disappears when idle.

// You can still read/set the value normally:
var rte = m.richTextEditor('body');
console.log(rte.getValue());

PHP PHP Methods (Fluent)

Method / Property	Parameters	Description
`$m->richTextEditor($id)`	`string`	Create a RichTextEditor component.
`->name($name)`	`string`	Set the hidden input's `name` attribute for form submission.
`->value($html)`	`string`	Pre-load the editor with HTML content.
`->placeholder($text)`	`string`	Placeholder text shown when the editor is empty.
`->showCharCount()`		Show a live character count in the footer. Default: `false`.
`->minChars($n)`	`int`	Minimum character count required. Enables char counter automatically.
`->maxChars($n)`	`int`	Maximum character count allowed. Enables char counter automatically. Counter turns orange at 90%, red when exceeded.
`->customColor($show)`	`bool`	Show the custom colour input in the colour picker. Default: `true`.
`->toolbar($tools)`	`string[]`	Define which tools appear in the toolbar (see available tools below). Default: full toolbar.
`->minHeight($px)`	`int`	Minimum height of the editing area in pixels. Default: `200`.
`->maxHeight($px)`	`int`	Maximum height of the editing area in pixels. When exceeded, the body scrolls. Default: none.
`->scrollable()`		Enable Apple-style thin overlay scrollbars on the editing area. Best combined with `->maxHeight()` to constrain the editor height; the scrollbar fades in on hover and disappears when idle. Default: `false`.
`->readOnly()`		Disable editing and dim the toolbar. Default: `false`.
`->uploader($url, $stem)`	`string, string?`	Configure the image upload endpoint. The POST endpoint must return `{ "url": "…" }`. Optional `$stem` is sent as a `stem` field to suggest a filename prefix.
`->allowPasteImages()`		Allow pasted raw images (screenshots etc.) to be auto-uploaded via the uploader. Requires `->uploader()`. Default: `false`.
`->allowImageResize()`		Show 8-point drag handles when an image is selected, allowing the user to resize it. The image's original natural dimensions are stored in `data-original-width` / `data-original-height` attributes. Default: `false`.

PHP Toolbar Tools

Method / Property	Parameters	Description
`'bold'`		Bold (`Ctrl/Cmd+B`).
`'italic'`		Italic (`Ctrl/Cmd+I`).
`'underline'`		Underline (`Ctrl/Cmd+U`).
`'strikethrough'`		Strikethrough.
`'align'`		Alignment group: left, centre, right, justify.
`'orderedList'`		Numbered list. Use `Tab`/`Shift+Tab` to indent/promote items.
`'bulletList'`		Bullet list. Use `Tab`/`Shift+Tab` to indent/promote items.
`'heading'`		Block format dropdown: Normal / H1–H4.
`'fontSize'`		Font size dropdown: Tiny → Huge.
`'foreColor'`		Text colour picker (presets + custom).
`'link'`		Insert / edit a hyperlink.
`'image'`		Insert an image. Opens a dialog for URL entry and (if uploader configured) file upload.
`'youtube'`		Embed a YouTube video. Opens a dialog where you paste any YouTube URL or video ID — a responsive 16:9 iframe is inserted.
`'undo'`		Undo.
`'redo'`		Redo.
`'clearFormat'`		Remove all inline formatting.
`'separator'`		A visual divider between tool groups.

JS JS Methods

Method / Property	Parameters	Description
`m.richTextEditor(id)`	`string`	Get (or create) an editor instance.
`rte.getValue()`	`string`	Return the current HTML content.
`rte.setValue(html)`	`string`	Replace the editor content programmatically.
`rte.focus()`		Focus the editing area.
`rte.execCommand(cmd, val)`	`string, string?`	Execute a toolbar command programmatically.
`rte.insertImage(url, alt)`	`string, string?`	Insert an image at the current cursor position.

EVENT Events

Event Name	Detail	Description
`m:rte:change`	`{ value: string }`	Fired on the container whenever content changes. `detail.value` is the current HTML.
`m:rte:focus`	`{}`	Fired when the editing area receives focus.
`m:rte:blur`	`{}`	Fired when the editing area loses focus.
`m:rte:error`	`{ message: string }`	Fired when an error occurs (e.g. paste attempted without uploader configured).
`m:rte:upload:start`	`{}`	Fired when an image upload begins.
`m:rte:upload:end`	`{ success: bool, url: string\|null, error: string\|null }`	Fired when an upload completes. `detail.url` is the image URL on success.

RichTextEditor

Default Toolbar

Heading 1

Heading 2

Heading 3

Heading 4

List Indentation (Tab / Shift+Tab)

Character Count with Limits

Heading 1

Heading 2

Heading 3

Heading 4

Custom Toolbar & Link Insertion

Pre-populated Content

Heading 1

Heading 2

Heading 3

Heading 4

Welcome to Manhattan

Displaying Saved Content

Article Title

A Section Heading

Read-only Mode

Heading 1

Heading 2

Heading 3

Heading 4

JavaScript Events

Heading 1

Heading 2

Heading 3

Heading 4

Image Insertion — URL

Image Insertion — File Upload & Paste

Image Alignment & Resize

YouTube Video Embed

Scrollable Input Area

Heading 1

Heading 2

Heading 3

Heading 4

PHP PHP Methods (Fluent)

PHP Toolbar Tools

JS JS Methods

EVENT Events