Skip to main content

DHTMLX RichText. Slash commands example

Live example​

A trigger can make RichText open a menu when the user types a chosen character. Here that character is a slash: typing / lists editor actions like indent, outdent, and print, and picking one runs the selected action. The trigger maps each menu item to a command.

const widget = new richtext.Richtext("#richtext", {
    value,
    triggers: [
        {
            trigger: "/",
            data: commands,
            action: data => {
                setTimeout(() => widget.api.exec(data.id, data.config || {}));
            },
        },
    ]
});
<!-- component container -->
<div id="richtext" style="width: 100%; height: 100%;"></div>

<!-- dataset -->

<script>
const commands = [
        {
            id: "indent",
            label: "Indent",
            config: { step: 20 },
        },
        {
            id: "outdent",
            label: "Outdent",
        },
        {
            id: "print",
            label: "Print",
        },
    ];
    const value = `
        <h2>Slash Commands via Triggers</h2>
        <p>This example demonstrates slash commands in the Rich Text Editor. Type <b>/</b> at the start of a text block or after whitespace to open a list of available editor commands.</p>
        <p>Try it yourself:</p>
        <ul>
            <li>Type <b>/indent</b> to increase the indentation of the current line</li>
            <li>Type <b>/outdent</b> to decrease the indentation of the current line</li>
            <li>Type <b>/print</b> to print the document</li>
            <li>Select a command from the dropdown to run the corresponding editor action</li>
        </ul>
        <p>The trigger is configured via the <code>triggers</code> option. The <code>action</code> callback calls <code>widget.api.exec</code> with the selected command ID and its configuration.</p>
    `;
</script>

Use case​

Use it when writers want to run actions without leaving the keyboard, like a notes app or a doc editor where typing / is faster than reaching for the toolbar. You define which commands appear and what each one does, so the menu can run built-in editor actions or your own logic. Each pick runs through the editor's command API. To make it yours, edit the commands list and the trigger character, and route each item's id through widget.api.exec.

How to do this in your app​

  • Register a trigger: add a triggers entry with trigger: "/" and a data list of commands. Typing that character at the start of a text block or after whitespace opens the menu.
  • Describe each command: give each item an id, a label for the menu, and an optional config object, like { id: "indent", label: "Indent", config: { step: 20 } }.
  • Run the picked command: in the trigger's action callback, call widget.api.exec(data.id, data.config || {}) to fire the matching editor action.
  • Defer the call: the demo wraps exec in setTimeout so the command runs after the menu closes and the cursor settles.

Good to know​

  • api.exec runs supported inner actions: pass an action name and its config object to invoke actions such as "indent", "outdent", and "print".
  • config shape depends on the command: each action reads its own parameters, so indent uses { step: 20 } while outdent and print need none.
  • The trigger character is up to you: this demo uses / for slash commands; the trigger field takes whatever character you set.

API reference​

Additional resources​