Editora - Api

Editor Constructor

const editor = new Editor(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

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
`defaultContent`	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 { Editor } from '@editora/core';

const editor = new Editor({
  element: '#editor',
  content: '<p>Hello World</p>'
});

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

React Usage

import EditoraEditor from '@editora/react';

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

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

With Plugins

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

const editor = new Editor({
  element: '#editor',
  plugins: [
    MediaManagerPlugin({
      uploadUrl: '/api/upload'
    })
  ]
});

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

📚 API Reference