Lumen Editor Instance Methods: Complete API Reference

Once you construct an Editor instance, every interaction with the editor — reading content, updating content, managing focus, listening for events, and tearing down — goes through its instance methods. All methods are synchronous unless otherwise noted, and they are available immediately after the constructor returns.

`getHTML()`

getHTML(): string

Returns the current editor content as a sanitized HTML string. The returned markup reflects exactly what the built-in sanitizer permits — no script tags, no inline event handlers, and no attributes outside the configured allowlist.

const html = editor.getHTML();
console.log(html);
// '<p>Hello, <strong>world</strong>!</p>'

`getText()`

getText(): string

Returns the editor content as plain text with all HTML tags stripped. Useful for character counts, search indexing, or any context where you need the raw string without markup.

const text = editor.getText();
console.log(text);
// 'Hello, world!'

`setHTML(html)`

setHTML(html: string): void

Replaces the entire editor content with the provided HTML string. The input is sanitized through the same pipeline as the constructor’s value option before it is inserted, so untrusted markup is safe to pass here.

Calling setHTML() replaces the full document — it does not merge with existing content. It also pushes a new entry onto the undo stack, so users can undo the replacement.

editor.setHTML('<h1>New document</h1><p>Fresh start.</p>');

`setTheme(theme)`

setTheme(theme: 'light' | 'dark'): void

Switches the visual theme at runtime without re-mounting the editor. Accepts 'light' or 'dark'. The change takes effect immediately by toggling a data attribute on the editor root element.

// Toggle based on OS preference
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
editor.setTheme(prefersDark ? 'dark' : 'light');

// Or wire up a button — track the current theme in your own state
let currentTheme = 'light';
document.querySelector('#theme-toggle').addEventListener('click', () => {
  currentTheme = currentTheme === 'light' ? 'dark' : 'light';
  editor.setTheme(currentTheme);
});

`toggleHtmlView()`

toggleHtmlView(): void

Toggles between the standard WYSIWYG editing surface and a raw HTML editing mode. In raw HTML mode the user sees and edits the serialized markup directly. Switching back to WYSIWYG parses and re-renders that markup. A view:toggle event fires after each transition.

document.querySelector('#source-btn').addEventListener('click', () => {
  editor.toggleHtmlView();
});

`on(event, fn)`

on(event: string, fn: Function): void

Subscribes fn to an editor event. The callback receives an event-specific payload on each fire. See the Events reference for all event names and their payloads.

editor.on('change', (html) => {
  console.log('Editor content updated:', html);
});

editor.on('error', ({ code, message }) => {
  console.error(`[${code}] ${message}`);
});

`off(event, fn)`

off(event: string, fn: Function): void

Unsubscribes a previously registered event handler. You must pass the same function reference that was passed to on() — anonymous functions passed inline cannot be unsubscribed this way.

function handleChange(html) {
  saveToServer(html);
}

// Subscribe
editor.on('change', handleChange);

// Later — unsubscribe
editor.off('change', handleChange);

`use(plugin)`

use(plugin: EditorPlugin): void

Installs a plugin after the editor has already been initialized. The plugin function runs synchronously and receives the full editor instance. This is equivalent to listing the plugin in the plugins constructor option, but lets you add plugins lazily — for example, after an async feature flag check. See the Plugin API for more detail.

import { wordCountPlugin } from './plugins/wordCount';

// Conditionally load a plugin at runtime
if (featureFlags.wordCount) {
  editor.use(wordCountPlugin);
}

`focus()`

focus(): void

Programmatically moves focus to the editor’s contenteditable surface. Useful for accessibility flows where you need to direct the user’s keyboard input to the editor without a manual click.

document.querySelector('#open-editor-btn').addEventListener('click', () => {
  panel.style.display = 'block';
  editor.focus();
});

`blur()`

blur(): void

Removes focus from the editor surface. Use this when you need to programmatically shift attention to another element — for example, when opening a modal triggered from within the editor.

editor.blur();
document.querySelector('#settings-modal').showModal();

`destroy()`

destroy(): void

Unmounts the editor from the DOM and removes all internal event listeners. Call this when your application navigates away from the page containing the editor or when the host component unmounts — for example, in a framework lifecycle hook.

// Vanilla JS — clean up before page unload
window.addEventListener('beforeunload', () => {
  editor.destroy();
});

// React example
useEffect(() => {
  const editor = new Editor('#editor', options);
  return () => editor.destroy(); // runs on unmount
}, []);

After destroy() is called, the editor instance is no longer valid. Calling any method — getHTML(), setHTML(), on(), etc. — on a destroyed instance produces undefined behaviour and may throw. Always discard the reference after destruction.

​getHTML()

​getText()

​setHTML(html)

​setTheme(theme)

​toggleHtmlView()

​on(event, fn)

​off(event, fn)

​use(plugin)

​focus()

​blur()

​destroy()

`getHTML()`

`getText()`

`setHTML(html)`

`setTheme(theme)`

`toggleHtmlView()`

`on(event, fn)`

`off(event, fn)`

`use(plugin)`

`focus()`

`blur()`

`destroy()`