Rich Text

When a page includes a textarea with class rich, JamsEDU upgrades it to a small rich text editor with support for bold, italic, lists, links, and other common formatting controls.

You can customize how the editor behaves by editing jamsEduConfig.tinyWysiwyg in assets/js/main.js. Set only the properties you need and anything you omit will use the default values. To disable the editor entirely, set the whole key to false. For more on how jamsEduConfig works across all built-ins, see Optional Settings.

useMutationObserver: When true (default), new textarea.rich elements added to the page after load are automatically upgraded through the shared DOM watcher. When false, only textareas present in the DOM at load time are upgraded.

Markup

Add a textarea with class rich. The script reads the initial value as HTML and keeps the field in sync as the user edits.


        <label for="bio">Bio</label>
        <textarea id="bio" class="rich" name="bio"><p>Start here.</p></textarea>

The main bundle wires this up automatically when the page loads. You do not need extra script tags beyond the usual main.js module import.

Configuration

The entries above are the only keys TinyWysiwyg.start reads from config today. There are no extra rich-text-specific keys in assets/js/jamsedu/tiny-wysiwyg.js. The bundle property name is tinyWysiwyg; in docs this feature is called rich text.

Styling

In a standard JamsEDU app that keeps the built-in theming stack, the rich text editor automatically follows the same light and dark palettes as the rest of your site. If you need to customize the editor appearance, you can override --richtext-* variables like --richtext-toolbar-bg-color, --richtext-content-bg-color, and --richtext-container-bg-color on :root or a wrapper element. For the full list of available variables and how they connect to the shared token system, see the CSS and Theming guide.