Version & multiple instances

Use Redactor.version to read the loaded library version, and Redactor.instances when several editors run on one page.

Editor version#

Redactor.version is a string with the library version (same as the package version).

console.log(Redactor.version); // e.g. "5.0.0"

Use it for feature detection, support tickets, or conditional integrations:

if (Redactor.version.startsWith('5.')) {
    // Redactor 5 API
}

The value is set on the class itself, so it is available before you create any editor instance.

Instance registry#

Every started editor is pushed into Redactor.instances. Destroyed editors are removed from the array.

Redactor('#a');
Redactor('#b');

console.log(Redactor.instances.length); // 2

Each item is a full editor app (the same object returned by Redactor(...) for a single element): you can call getHtml(), setContent(), blurEditor(), listen to events, and so on.

One element vs many

Elements that already have redactor-initialized are skipped (not started twice).

const apps = Redactor('.js-editor');
if (Array.isArray(apps)) {
    apps.forEach((app) => app.on('editor:change', () => { /* … */ }));
} else {
    apps.on('editor:change', () => { /* … */ });
}

Or always normalize:

const list = [].concat(Redactor('.js-editor') || []);

Find an instance by host element

function findEditor(el) {
    return Redactor.instances.find((app) => app.element === el) || null;
}

const app = findEditor(document.querySelector('#entry'));
app?.focusEditor();

Each instance also has a numeric uuid assigned at creation (Redactor.uuid counter).

Blur other editors

When focus moves to one editor, you may want to clear focus chrome on the others (selection, data-selected, blur styling):

const app = Redactor('#entry-a');
app.blurOtherEditors({ reason: 'focus-switch' });

That walks Redactor.instances and calls blurEditor on every instance except the current one. See Editor API — blurOtherEditors.

With a shared toolbar (toolbar.target + toolbar.sharedTarget), combine this with normal focus handling so inactive editors do not keep a selected block state.

Destroy and the registry

app.destroy();
// app is no longer in Redactor.instances

Always destroy editors you remove from the DOM so listeners and registry entries are cleaned up.

Typical multi-editor page#

<div id="title"></div>
<div id="body"></div>

const titleApp = Redactor('#title', {
    toolbar: { target: '#shared-toolbar', sharedTarget: true },
    pathbar: true
});

const bodyApp = Redactor('#body', {
    toolbar: { target: '#shared-toolbar', sharedTarget: true }
});

titleApp.on('editor:focus', () => {
    titleApp.blurOtherEditors({ reason: 'focus-switch' });
});

bodyApp.on('editor:focus', () => {
    bodyApp.blurOtherEditors({ reason: 'focus-switch' });
});

console.log(Redactor.version, Redactor.instances.length);