> ## Documentation Index
> Fetch the complete documentation index at: https://docs.lumen.bjanczak.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Lumen Editor Instance Methods: Complete API Reference

> Complete reference for all Lumen Editor instance methods, including signatures, parameter types, return types, and runnable code examples for each.

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()`

```ts theme={null}
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.

```js theme={null}
const html = editor.getHTML();
console.log(html);
// '<p>Hello, <strong>world</strong>!</p>'
```

***

## `getText()`

```ts theme={null}
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.

```js theme={null}
const text = editor.getText();
console.log(text);
// 'Hello, world!'
```

***

## `setHTML(html)`

```ts theme={null}
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.

<Note>
  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.
</Note>

```js theme={null}
editor.setHTML('<h1>New document</h1><p>Fresh start.</p>');
```

***

## `setTheme(theme)`

```ts theme={null}
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.

```js theme={null}
// 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()`

```ts theme={null}
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`](/api/events#viewtoggle) event fires after each transition.

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

***

## `on(event, fn)`

```ts theme={null}
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](/api/events) for all event names and their payloads.

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

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

***

## `off(event, fn)`

```ts theme={null}
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.

```js theme={null}
function handleChange(html) {
  saveToServer(html);
}

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

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

***

## `use(plugin)`

```ts theme={null}
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](/api/plugins) for more detail.

```js theme={null}
import { wordCountPlugin } from './plugins/wordCount';

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

***

## `focus()`

```ts theme={null}
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.

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

***

## `blur()`

```ts theme={null}
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.

```js theme={null}
editor.blur();
document.querySelector('#settings-modal').showModal();
```

***

## `destroy()`

```ts theme={null}
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.

```js theme={null}
// 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
}, []);
```

<Warning>
  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.
</Warning>