Editor

The Editor interface provides properties and methods for rendering and manipulating the editor.

Example:

import { Editor } from 'lakelib';

const editor = new Editor({
  root: '.my-content',
});
editor.render();
editor.setValue('<p>foo</p>');

Constructor

Creates a new Editor object.

• Parameters:

  config

  A key-value object. For more details, see the Editor config page.

• Return value:

  A new Editor object.

Example:

const editor = new Editor({
  root: '.my-content',
});

Static properties

version Read only

The current version of Lake.

• Type: string

Example:

const version = Editor.version;

box Read only

A BoxManager object that manages the box components.

• Type: BoxManager

Example:

const names = Editor.box.getNames();

plugin Read only

A Plugin object that manages a collection of plugins.

• Type: Plugin

Example:

Editor.plugin.add('selectAll', editor => {
  editor.command.add('selectAll', {
    execute: () => {
      const range = editor.selection.range;
      range.selectNodeContents(editor.container);
      range.shrink();
    },
  });
});

Instance properties

root Read only

An element to which the editor is appended.

• Type: Nodes

Example:

const root = editor.root;

toolbar Read only

A toolbar for the editor.

• Type: Toolbar

Example:

const toolbar = editor.toolbar;

config Read only

The configuration for the editor.

Example:

const config = editor.config;

container Read only

A contenteditable element where users can edit the editor's content.

• Type: Nodes

Example:

const container = editor.container;

overlayContainer Read only

An element to which overlays are appended.

• Type: Nodes

Example:

const overlayContainer = editor.overlayContainer;

event Read only

An EventEmitter object used to set up events. For more details, see the Instance events.

• Type: EventEmitter

Example:

editor.event.on('change', value => {
  console.log(value);
});

selection Read only

A Selection object representing the range of content selected by the user or the current position of the cursor.

• Type: Selection

Example:

editor.selection.insertContents('<strong>foo</strong>');

command Read only

A Command object managing all registered commands.

• Type: Command

Example:

editor.command.execute('bold');

history Read only

A History object that manages the undo and redo history.

• Type: History

Example:

editor.history.save();

keystroke Read only

A Keystroke object that manages keyboard shortcuts.

• Type: Keystroke

Example:

editor.keystroke.setKeydown('mod+b', event => {
  event.preventDefault();
  editor.command.execute('bold');
});

readonly Read only

A boolean value indicating whether the editor is in read-only mode.

• Type: boolean

Example:

const readonly = editor.readonly;

isComposing Read only

A boolean value indicating whether a user is entering a character using a text composition system such as an Input Method Editor (IME).

• Type: boolean

Example:

const isComposing = editor.isComposing;

popup Read only

A pop-up component which is currently displayed, such as LinkPopup, MentionMenu, and SlashMenu.

• Type: any

Example:

const popup = editor.popup;

locale Read only

Returns translation functions for the specified language.

• Type: TranslationFunctions

Example:

const locale = editor.locale;

Instance methods

setPluginConfig()

Sets the default config for the specified plugin.

• Parameters:

  name

  A string that specifies the name of the plugin.

  config

  A key-value object that specifies the default config for the plugin.

• Return value:

  None.

Example:

editor.setPluginConfig('image', {
  requestMethod: 'POST',
  requestTypes: ['image/gif', 'image/jpeg', 'image/png'],
});

fixContent()

Fixes incorrect content, such as adding paragraphs for void elements or removing empty tags.

• Parameters:

  None.

• Return value:

  false if the content has not changed. true if the content has changed.

Example:

editor.fixContent();

renderBoxes()

Renders all boxes that haven't been rendered yet.

• Parameters:

  None.

• Return value:

  None.

Example:

editor.renderBoxes();

scrollToCursor()

Scrolls to the cursor.

• Parameters:

  None.

• Return value:

  None.

Example:

editor.scrollToCursor();

hasFocus()

Checks whether the editor has focus.

• Parameters:

  None.

• Return value:

  false if the editor has no focus. true if the editor has focus.

Example:

const isFocused = editor.hasFocus();

focus()

Sets focus on the editor.

• Parameters:

  None.

• Return value:

  None.

Example:

editor.focus();

blur()

Removes focus from the editor.

• Parameters:

  None.

• Return value:

  None.

Example:

editor.blur();

setValue()

Sets the specified content to the editor.

• Parameters:

  value

  A string that conforms to the LML format.

• Return value:

  None.

Example:

editor.setValue('<p>foo<focus /></p>');

getValue()

Returns the editor's content.

• Parameters:

  None.

• Return value:

  A string that conforms to the LML format.

Example:

const content = editor.getValue();

render()

Renders an editing area and sets default content to it.

• Parameters:

  None.

• Return value:

  None.

Example:

editor.render();

unmount()

Destroys the editor.

• Parameters:

  None.

• Return value:

  None.

Example:

editor.unmount();

Instance events

change

Fired when the editor's content is changed. The value represents the editor's content and conforms to the LML format.

Example:

editor.event.on('change', value => {
  console.log(value);
});

statechange

Fired when the current selection is changed. The state is a SelectionState object representing the state of the current selection.

Example:

editor.event.on('statechange', state => {
  console.log(state);
});

click

Fired when the document is clicked. The targetNode is a Nodes object representing the clicked node.

Example:

editor.event.on('click', targetNode => {
  console.log(targetNode);
});

copy

Fired when the user initiates a copy action. The event is a ClipboardEvent object.

Example:

editor.event.on('copy', event => {
  console.log(event);
});

cut

Fired when the user initiates a cut action. The event is a ClipboardEvent object.

Example:

editor.event.on('cut', event => {
  console.log(event);
});

paste

Fired when the user initiates a paste action. The event is a ClipboardEvent object.

Example:

editor.event.on('paste', event => {
  console.log(event);
});