Editora - Api

Editor Constructor

const editor = createEditor(options)

Constructor Options

Option	Type	Description
`element`	HTMLElement \| string	Target DOM element or CSS selector
`content`	string	Initial HTML content
`shortcuts`	boolean	Enable keyboard shortcuts (default: true)
`plugins`	Plugin[]	Array of plugins to load
`toolbar`	boolean \| string[]	Show toolbar or custom buttons
`accessibility`	object	ARIA labels, keyboard navigation shortcuts, and optional accessibility checker integration
`performance`	object	Debounced change events and viewport-only scan optimizations for multi-instance pages

Web Component Dependencies

@editora/core (required) - editor engine and web component bundle
@editora/themes (recommended) - dark/acme/custom theme CSS packs
@editora/plugins (framework wrappers) - explicit plugin factories for React/Vue integrations

Plugin Import Surfaces (NPM)

@editora/plugins - full plugin catalog
@editora/plugins/lite - common/core subset
@editora/plugins/enterprise - advanced/specialized subset
@editora/plugins/<plugin-name> - granular per-plugin imports

Enterprise preset includes: Mention, Track Changes, Version Diff, Conditional Content, Data Binding, Content Rules, Citations, Approval Workflow, PII Redaction, Smart Paste, Blocks Library, Document Schema, Translation Workflow, Slash Commands, Spell Check, A11y Checker, Comments, Merge Tag, Template, Media Manager, and Document Manager.

All plugin entry paths (full/lite/enterprise) are completely free and customizable.

Web Component Runtime Config

Configure declaratively (attributes) or imperatively via editor.setConfig(...).

<editora-editor
  theme="dark"
  toolbar-items="undo redo | bold italic underline"
  toolbar-floating="true"
  toolbar-sticky="true"
  autosave='{"enabled":true,"intervalMs":3000,"storageKey":"doc-1"}'
  security='{"sanitizeOnPaste":true,"sanitizeOnInput":true}'
  accessibility='{"enableARIA":true,"keyboardNavigation":true,"checker":false}'
  performance='{"debounceInputMs":120,"viewportOnlyScan":true}'
></editora-editor>

const editor = document.querySelector('editora-editor');
await editor.setConfig({
  theme: 'acme',
  toolbar: { items: 'undo redo | bold italic', floating: true, sticky: true },
  autosave: { enabled: true, intervalMs: 5000, storageKey: 'doc-2', provider: 'localStorage' },
  security: { sanitizeOnPaste: true, sanitizeOnInput: true },
  accessibility: { enableARIA: true, keyboardNavigation: true, checker: true },
  performance: { debounceInputMs: 100, viewportOnlyScan: true }
});

Config Group	Key Options	Attribute Mapping
`theme`	`light`, `dark`, `acme`, custom	`theme="dark"`
`toolbar`	`items`, `floating`, `sticky`	`toolbar-items`, `toolbar-floating`, `toolbar-sticky`
`autosave`	`enabled`, `intervalMs`, `storageKey`, `provider`, `apiUrl`	`autosave-*` attributes or JSON in `autosave`
`security`	`sanitizeOnPaste`, `sanitizeOnInput`	`security-sanitize-on-paste`, `security-sanitize-on-input`
`accessibility`	`enableARIA`, `keyboardNavigation`, `checker`	`accessibility-*` attributes or JSON in `accessibility`
`performance`	`debounceInputMs`, `viewportOnlyScan`	`performance-*` attributes or JSON in `performance`

Methods

getContent()

Get the current editor content as HTML

const html = editor.getContent();
console.log(html); // <p>Your content</p>

setContent(html)

Set editor content

editor.setContent('<h1>New Title</h1><p>Content</p>');

execCommand(command, args)

Execute an editor command

editor.execCommand('bold');
editor.execCommand('heading', { level: 1 });
editor.execCommand('insertLink', { url: 'https://example.com', text: 'Link' });

undo()

Undo the last action

editor.undo();

redo()

Redo the last undone action

editor.redo();

focus()

Focus the editor

editor.focus();

blur()

Blur the editor

editor.blur();

destroy()

Destroy the editor and clean up

editor.destroy();

Events

change

Fired when content changes

editor.on('change', (content) => {
  console.log('Content changed:', content);
});

selectionChange

Fired when selection changes

editor.on('selectionChange', (selection) => {
  console.log('Selection:', selection);
});

focus

Fired when editor is focused

editor.on('focus', () => {
  console.log('Editor focused');
});

blur

Fired when editor loses focus

editor.on('blur', () => {
  console.log('Editor blurred');
});

Commands Reference

Text Formatting Commands

bold - Make text bold
italic - Make text italic
underline - Underline text
strikethrough - Strike through text
superscript - Superscript text
subscript - Subscript text

Heading Commands

editor.execCommand('heading', { level: 1 }); // H1
editor.execCommand('heading', { level: 2 }); // H2
// ... up to level 6
editor.execCommand('paragraph'); // Back to paragraph

List Commands

editor.execCommand('bulletList');
editor.execCommand('orderedList');
editor.execCommand('indent');
editor.execCommand('outdent');

Alignment Commands

editor.execCommand('alignLeft');
editor.execCommand('alignCenter');
editor.execCommand('alignRight');
editor.execCommand('justify');

Link Commands

editor.execCommand('insertLink', {
  url: 'https://example.com',
  text: 'Example',
  target: '_blank'
});
editor.execCommand('removeLink');

Color Commands

editor.execCommand('textColor', { color: '#ff0000' });
editor.execCommand('backgroundColor', { color: '#ffff00' });

History Commands

editor.execCommand('undo');
editor.execCommand('redo');
editor.execCommand('clearHistory');

React Component Props

Prop	Type	Description
`defaultValue`	string	Initial content
`onChange`	function	Content change callback
`onFocus`	function	Focus event handler
`onBlur`	function	Blur event handler
`plugins`	Plugin[]	Array of plugins

Examples

Basic Usage

import { createEditor } from '@editora/core';

const editor = createEditor({
  content: '<p>Hello World</p>'
});
editor.mount(document.getElementById('editor'));

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

React Usage

import { EditoraEditor } from '@editora/react';
import "@editora/themes/themes/default.css";

export default function Document() {
  const handleChange = (content) => {
    console.log('Content:', content);
  };

  return (
    <EditoraEditor
      defaultValue="<p>Start typing...</p>"
      onChange={handleChange}
    />
  );
}

With Plugins

import { createEditor } from '@editora/core';
import { MediaManagerPlugin } from '@editora/plugins';

const editor = createEditor({
  plugins: [
    MediaManagerPlugin({
      uploadUrl: '/api/upload'
    })
  ]
});
editor.mount(document.getElementById('editor'));

For more examples and advanced usage, visit the Examples page.

📚 API Reference