BlockEditor

Represents the root class for the Block Editor component. The BlockEditor is a rich text editor that provides functionality for creating, editing, and managing blocks of content. Blocks can include text, images, videos, and other content types, organized hierarchically.

<div id='editor'></div>
<script>
var blockEditor = new BlockEditor({
  blocks: [
    {
      id: 'block-1',
      type: 'Paragraph',
      content: [{ text: 'This is the first block.' }],
      allowDragging: true,
      cssClass: 'custom-block',
    },
  ]
});
</script>

Properties

blocks

BlockModel[]

Specifies an array of block models representing the content of the editor. This property holds the various blocks that make up the editor’s content.

Defaults to []

commandMenu

CommandMenuSettingsModel

Specifies configuration options for editor commands. This property allows customization of command behaviors within the editor.

Defaults to {}

cssClass

string

Specifies a custom CSS class to apply to the editor. This property allows for additional styling by applying a custom CSS class.

Defaults to ”

currentUserId

string

Specifies the ID of the currently active user. This property holds the unique identifier of the selected user.

Defaults to ”

enablePersistence

boolean

Enable or disable persisting component’s state between page reloads.

Defaults to false

enableRtl

boolean

Enable or disable rendering component in right to left direction.

Defaults to false

height

string | number

Specifies the height of the editor. This property sets the height of the editor, which can be a string or number.

Defaults to ‘100%’

inlineToolbar

InlineToolbarSettingsModel

Specifies settings for the formatting toolbar. This property configures the toolbar that provides text formatting options.

Defaults to {}

keyConfig

{ : }

Specifies custom keyboard shortcuts configuration. This property allows the definition of custom keyboard shortcuts for editor commands.

Defaults to null

locale

string

Specifies the locale for localization. This property sets the language and regional settings for the editor.

Defaults to ”

pasteSettings

PasteSettingsModel

Configures settings related to pasting content in the editor. This property utilizes the PasteSettingsModel to specify various options and behaviors for paste operations.

Defaults to {}

placeholder

string

Specifies placeholder text to display when the editor is empty. This property provides a hint to the user about what to write.

Defaults to ‘Write something or ‘/’ for commands.’

readOnly

boolean

Specifies whether the editor is in read-only mode. This property prevents users from editing the content when set to true.

Defaults to false

undoRedoStack

number

Specifies the maximum size of the undo/redo stack. This property determines how many actions are stored for undo and redo functionality. With a default of 10, allowing users to revert up to 10 operations.

Defaults to 10

users

UserModel[]

Specifies an array of user models representing the list of users. This property holds user details such as name, ID, and other properties.

Defaults to []

width

string | number

Specifies the width of the editor. This property sets the width of the editor, which can be a string or number.

Defaults to ‘100%’

Methods

addEventListener

Adds the handler to the given event listener.

Returns void

appendTo

Appends the control within the given HTML element

Returns void

attachUnloadEvent

Adding unload event to persist data when enable persistence true

Returns void

dataBind

When invoked, applies the pending property changes immediately to the component.

Returns void

detachUnloadEvent

Removing unload event to persist data when enable persistence true

Returns void

getLocalData

Returns the persistence data for component

Returns any

getRootElement

Returns the route element of the component

Returns HTMLElement

handleUnload

Handling unload event to persist data when enable persistence true

Returns void

refresh

Applies all the pending property changes and render the component again.

Returns void

removeEventListener

Removes the handler from the given event listener.

Returns void

Inject

Dynamically injects the required modules to the component.

Returns void

Events

afterPaste

EmitType<AfterPasteEventArgs>

Event triggered after a paste operation occurs in the block editor. This event provides details about the pasted content.

beforePaste

EmitType<BeforePasteEventArgs>

Event triggered before a paste operation occurs in the block editor. This event allows interception or modification of the pasted content.

blockAdded

EmitType<BlockAddedEventArgs>

Event triggered when a block is added to the block editor. This event provides details about the newly added block.

blockDrag

EmitType<BlockDragEventArgs>

Event triggered during the dragging operation of a block. This event provides details about the drag operation.

blockDragStart

EmitType<BlockDragEventArgs>

Event triggered when the drag operation for a block starts. This event provides details about the initial stage of the drag.

blockDrop

EmitType<BlockDropEventArgs>

Event triggered when a block is dropped after a drag operation. This event provides details about the block drop action.

blockMoved

EmitType<BlockMovedEventArgs>

Event triggered when a block is moved within the block editor. This event provides details about the moved block.

blockRemoved

EmitType<BlockRemovedEventArgs>

Event triggered when a block is removed from the block editor. This event provides details about the block being removed.

blur

EmitType<BlurEventArgs>

Event triggered when the block editor loses focus. This event provides details about the blur action.

collaborationUpdate

EmitType<CollaborationUpdateEventArgs>

Event triggered when a collaboration update is received in the block editor. This event provides details about the collaboration update.

contentChanged

EmitType<ContentChangedEventArgs>

Event triggered when the content of the block editor is changed. This event provides details about the changes made to the content.

focus

EmitType<FocusEventArgs>

Event triggered when the block editor gains focus. This event provides details about the focus action.

keyActionExecuted

EmitType<KeyActionExecutedEventArgs>

Event triggered when a key action (both built-in and custom) is executed in the block editor component. This event provides detailed information about the executed key action, including the key combination, the action performed, whether the action was triggered by a custom key configuration, and the platform.

selectionChanged

EmitType<SelectionChangedEventArgs>

Event triggered when the selection in the block editor changes. This event provides details about the new selection state.

undoRedoPerformed

EmitType<UndoRedoEventArgs>

Event triggered when an undo or redo operation is performed in the block editor. This event provides details about the undo/redo action that was executed.