Examples

Mentions without Tribute.js

RichTextEditor does not bundle Tribute.js, and does not need it. Mentions are built in: the mentions demo covers the basics — @ for people, # for channels. This page shows the part a real deployment needs instead: a directory that is looked up rather than hard-coded.

An async source

The searchfunction is called as the user types and is debounced for you, so a directory of any size stays responsive. Here it resolves after a short delay against a local list — the shape is identical to a fetch.

Saved HTML

Loading…
// Called as the user types, debounced for you.
var editor = new RichTextEditor("#div_editor1", { mentionEnabled: true });

editor.mentions.register({
    trigger: "@",
    insertClass: "rte-mention-person",
    search: function (query, done) {
        fetch("/api/people?q=" + encodeURIComponent(query))
            .then(function (r) { return r.json(); })
            .then(done);          // [{ id, name, detail }]
    }
});

If you still want Tribute.js

Nothing stops you. Turn the built-in system off and attach Tribute to the editable yourself. The trade is real: an inserted built-in mention is an atomic chip— the caret steps over it instead of into it, so it cannot be edited into a broken half-name and still maps cleanly back to a user ID when you save. A generic autocomplete leaves you plain text to re-parse.

// If you would rather use Tribute.js after all:
var editor = new RichTextEditor("#div_editor1", { mentionEnabled: false });

// ...then attach Tribute to the editable yourself.
new Tribute({ values: people }).attach(editor.getEditable());

Mentions demo · Configuration reference