WYSIWYG editor

HugeRTE is the rich text editor used by Tabler, for content fields that need formatting, links, lists and images.

Overview

A WYSIWYG editor turns a plain textarea into a rich text field with a toolbar, so users can format text without writing HTML. Tabler uses HugeRTE, an open-source fork of TinyMCE with the same API.

<form method="post">
  <textarea id="hugerte-example">Hello, <b>Tabler</b>!</textarea>
</form>

Installation

Install HugeRTE with npm:

npm install hugerte

yarn add hugerte

pnpm install hugerte

bun install hugerte

Or include it from a CDN:

<script src="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/libs/hugerte/hugerte.min.js"></script>

The editor renders in its own skin. Tabler restyles it to match the interface in the vendors plugin, so include tabler-vendors.css as well:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/css/tabler-vendors.min.css" />

Usage

Put a textarea in your form and pass its selector to hugerte.init(). The editor replaces the field visually but keeps writing into it, so the form still submits the same value under the same name.

<form method="post">
  <textarea id="editor">Hello, <b>Tabler</b>!</textarea>
</form>

hugeRTE.init({
  selector: '#editor',
  height: 300,
  menubar: false,
  statusbar: false,
  plugins: ['advlist', 'autolink', 'lists', 'link', 'image', 'code'],
  toolbar: 'undo redo | bold italic | bullist numlist | link image | code',
});

menubar: false and statusbar: false strip the editor down to a toolbar, which fits a form better than the full application look.

Dark mode

HugeRTE ships its own light and dark skins, and it picks one when it starts. Read the current color mode from the data-bs-theme attribute and pass the matching skin:

const options = { selector: '#editor', height: 300 };

if (document.documentElement.getAttribute('data-bs-theme') === 'dark') {
  options.skin = 'oxide-dark';
  options.content_css = 'dark';
}

hugeRTE.init(options);

Content styles

Text inside the editor lives in an iframe, so page CSS does not reach it. Use content_style to match the font of your interface:

hugeRTE.init({
  selector: '#editor',
  content_style: 'body { font-family: inherit; font-size: 14px; }',
});

To display the saved HTML afterwards, wrap it in the prose class, which styles headings, lists and links the same way.

Accessibility

• Keep a label for the original textarea and connect it with for and id. The editor copies that name onto its own field.
• The toolbar is reachable with the keyboard. Alt+F9 opens the menu bar, Alt+F10 the toolbar and Alt+F11 the element path, so do not remove those shortcuts when you customize the setup.
• Only offer buttons your users need. A short toolbar is easier to navigate, especially with a keyboard or a screen reader.
• Ask for alternative text when users insert an image. HugeRTE shows that field in the image dialog by default - keep it.

Related