BlockEditor

16 Dec 202524 minutes to read

Represents the root class for the Block Editor component.
The BlockEditor is a block based editor that provides functionality for creating, editing, and managing blocks of content.
Blocks can include paragraph, lists, toggles, and other block types, organized hierarchically.

Properties

blockActionMenuSettings BlockActionMenuSettingsModel

Specifies the configuration settings for the block actions menu.
This property allows customization of the actions menu within the editor.

<div id="blockEditor"></div>

import { BlockEditor } from '@syncfusion/ej2-blockeditor';

let editorObj: BlockEditor = new BlockEditor({
    blockActionMenuSettings: {
      enable: true,
      popupWidth: '180px',
      popupHeight: '110px',
      items: [
        { id: 'duplicate', label: 'Duplicate' },
        { id: 'delete', label: 'Delete' },
        { id: 'moveUp', label: 'Move up' },
        { id: 'moveDown', label: 'Move down' }
      ]
    }
});
editorObj.appendTo("#blockEditor");

Defaults to {}

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.

<div id="blockEditor"></div>

import { BlockEditor, BlockType, ContentType } from '@syncfusion/ej2-blockeditor';

let editorObj: BlockEditor = new BlockEditor({
    blocks: [
        {
            id: 'heading-block',
            blockType: BlockType.Heading,
            properties: { level: 1 },
            content: [{ 
                id: 'heading-content',
                contentType: ContentType.Text,
                content: 'Block Editor Demo'
            }]
        },
        {
            id: 'intro-block',
            blockType: BlockType.Paragraph,
            content: [{ 
                id: 'intro-content',
                contentType: ContentType.Text,
                content: 'The Block Editor enables users to create, format, and organize content using various block types.'
            }]
        }
    ]
});
editorObj.appendTo("#blockEditor");

Defaults to []

codeBlockSettings CodeBlockSettingsModel

Configures settings related to code block in the editor.
This property utilizes the CodeBlockSettingsModel to specify various options for code block settings.

Defaults to {}

commandMenuSettings CommandMenuSettingsModel

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

<div id="blockEditor"></div>

import { BlockEditor, BlockType } from '@syncfusion/ej2-blockeditor';

let editorObj: BlockEditor = new BlockEditor({
    commandMenuSettings: {
      popupWidth: '350px',
      popupHeight: '400px',
      enableTooltip: false,
      commands: [
        { id: 'paragraph', blockType: BlockType.Paragraph, label: 'Paragraph' },
        { id: 'h1', blockType: BlockType.Heading, label: 'Heading 1' },
        { id: 'bulleted-list', blockType: BlockType.BulletList, label: 'Bulleted List' }
      ]
    }
});
editorObj.appendTo("#blockEditor");

Defaults to {}

contextMenuSettings ContextMenuSettingsModel

Specifies settings for the context menu.
This property configures the context menu options that appear on right-click actions.

<div id="blockEditor"></div>

import { BlockEditor } from '@syncfusion/ej2-blockeditor';

let editorObj: BlockEditor = new BlockEditor({
    contextMenuSettings: {
      items: [
        { id: 'copy', text: 'Copy' },
        { id: 'paste', text: 'Paste' },
        { separator: true },
        { id: 'delete', text: 'Delete', iconCss: 'e-icons e-delete' }
      ]
    }
});
editorObj.appendTo("#blockEditor");

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 ’’

enableDragAndDrop boolean

Specifies whether drag and drop functionality is enabled for the blocks.
This property enables or disables drag-and-drop operations within the block editor.

<div id="blockEditor"></div>

import { BlockEditor  } from '@syncfusion/ej2-blockeditor';

let editorObj: BlockEditor = new BlockEditor({
    enableDragAndDrop: true
});
editorObj.appendTo("#blockEditor");

Defaults to true

enableHtmlEncode boolean

Specifies whether HTML encoding is enabled.
This property determines if the content will be encoded to escape special HTML characters.

Defaults to false

enableHtmlSanitizer boolean

Specifies whether the HTML sanitizer is enabled.
This property determines if the HTML content will be sanitized to remove potentially harmful tags and attributes.

<div id="blockEditor"></div>

import { BlockEditor } from '@syncfusion/ej2-blockeditor';

let editorObj: BlockEditor = new BlockEditor({
    enableHtmlSanitizer: true
});
editorObj.appendTo("#blockEditor");

Defaults to true

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 ‘auto’

imageBlockSettings ImageBlockSettingsModel

Configures settings related to image block in the editor.
This property utilizes the ImageBlockSettingsModel to specify various options for image block settings.

Defaults to {}

inlineToolbarSettings InlineToolbarSettingsModel

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

<div id="blockEditor"></div>

import { BlockEditor } from '@syncfusion/ej2-blockeditor';

let editorObj: BlockEditor = new BlockEditor({
    inlineToolbarSettings: {
      enable: true,
      items: [
        { id: 'bold', text: 'Bold', iconCss: 'e-icons e-bold' },
        { id: 'italic', text: 'Italic', iconCss: 'e-icons e-italic' }
      ],
    }
});
editorObj.appendTo("#blockEditor");

Defaults to {}

keyConfig { : }

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

<div id="blockEditor"></div>

import { BlockEditor } from '@syncfusion/ej2-blockeditor';

let editorObj: BlockEditor = new BlockEditor({
  keyConfig: { 
      bold: 'ctrl+B',
      italic: 'ctrl+I',
      underline: 'ctrl+U',
      undo: 'ctrl+Z',
      redo: 'ctrl+Y'
    }
});
editorObj.appendTo("#blockEditor");

Defaults to null

labelSettings LabelSettingsModel

Configures settings related to label popup in the editor.
This property utilizes the LabelSettingsModel to specify various options and behaviors for paste operations.

<div id="blockEditor"></div>

import { BlockEditor } from '@syncfusion/ej2-blockeditor';

let editorObj: BlockEditor = new BlockEditor({
    labelSettings: {
        triggerChar: '#',
        items: [
            { id: 'bug', text: 'Bug', labelColor: '#ff5252', groupBy: 'Status' },
            { id: 'task', text: 'Task', labelColor: '#90caf9', groupBy: 'Status' },
            { id: 'feature', text: 'Feature', labelColor: '#81c784', groupBy: 'Status' },
            { id: 'enhancement', text: 'Enhancement', labelColor: '#ba68c8', groupBy: 'Status' }
        ]
    }
});
editorObj.appendTo("#blockEditor");

Defaults to {}

locale string

Specifies the locale for localization.
This property sets the language and regional settings for the editor.
The default locale value is ‘en-US’.

Defaults to ‘en-US’

pasteCleanupSettings PasteCleanupSettingsModel

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

<div id="blockEditor"></div>

import { BlockEditor } from '@syncfusion/ej2-blockeditor';

let editorObj: BlockEditor = new BlockEditor({
    pasteCleanupSettings: {
      keepFormat: true,
      deniedTags: ['script', 'style']
    }
});
editorObj.appendTo("#blockEditor");

Defaults to {}

readOnly boolean

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

<div id="blockEditor"></div>

import { BlockEditor } from '@syncfusion/ej2-blockeditor';

let editorObj: BlockEditor = new BlockEditor({
    readOnly: true
});
editorObj.appendTo("#blockEditor");

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 value of 30, it allows users to revert up to 30 operations.

<div id="blockEditor"></div>

import { BlockEditor } from '@syncfusion/ej2-blockeditor';

let editorObj: BlockEditor = new BlockEditor({
    undoRedoStack: 10
});
editorObj.appendTo("#blockEditor");

Defaults to 30

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.

<div id="blockEditor"></div>

import { BlockEditor } from '@syncfusion/ej2-blockeditor';

let editorObj: BlockEditor = new BlockEditor({
    users: [
        {
            id: 'user1',
            user: 'Andrews',
        },
        {
            id: 'user2',
            user: 'Charlie',
        },
        {
            id: 'user3',
            user: 'Laura',
        }
    ]
});
editorObj.appendTo("#blockEditor");

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

addBlock

Adds a new block to the editor

Parameter	Type	Description
block	BlockModel	The block model to add
targetId (optional)	string	The ID of the target block to insert the new block. If not provided, the block will be appended to the end of the editor.
isAfter (optional)	boolean	Specifies whether to insert the new block after the target block. Default is false.

Returns void

addEventListener

Adds the handler to the given event listener.

Parameter	Type	Description
eventName	string	A String that specifies the name of the event
handler	Function	Specifies the call to run when the event occurs.

Returns void

appendTo

Appends the control within the given HTML element

Parameter	Type	Description
selector (optional)	string | HTMLElement	Target element where control needs to be appended

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

disableToolbarItems

Disables one or more toolbar items.
This method allows the specified toolbar items to be disabled.

Parameter	Type	Description
itemId	string | string[]	The id(s) of the toolbar item(s) to disable.

Returns void

enableToolbarItems

Enables one or more toolbar items.
This method allows the specified toolbar items to be enabled.

Parameter	Type	Description
itemId	string | string[]	The id(s) of the toolbar item(s) to enable.

Returns void

executeToolbarAction

Executes the specified toolbar action on the editor.

Parameter	Type	Description
action	CommandName	The action to execute.
value (optional)	string	The value required if any (Optional).

Returns void

focusIn

Focuses the editor

Returns void

focusOut

Removes focus from the editor

Returns void

getBlock

Gets a block by ID

Parameter	Type	Description
blockId	string	ID of the block to retrieve

Returns BlockModel | null

getBlockCount

Gets total block count

Returns number

getDataAsHtml

Retrieves data from the editor as HTML.
If a block ID is provided, returns the data of that specific block; otherwise returns all content.

Parameter	Type	Description
blockId (optional)	string	Optional ID of the block to retrieve

Returns string

getDataAsJson

Retrieves data from the editor as JSON.
If a block ID is provided, returns the data of that specific block; otherwise returns all content.

Parameter	Type	Description
blockId (optional)	string	Optional ID of the block to retrieve

Returns BlockModel | BlockModel[]

getLocalData

Returns the persistence data for component

Returns any

getRange

Gets current selection range

Returns Range | null

getRootElement

Returns the route element of the component

Returns HTMLElement

getSelectedBlocks

Gets the block from current selection

Returns BlockModel[] | null

handleUnload

Handling unload event to persist data when enable persistence true

Returns void

moveBlock

Moves a block to a new position

Parameter	Type	Description
fromBlockId	string	ID of the block to move
toBlockId	string	ID of the target block to move to

Returns void

parseHtmlToBlocks

Parses an HTML string into an array of BlockModel objects.

Parameter	Type	Description
html	string	HTML string to parse.

Returns BlockModel[]

print

Prints all the block data.

Returns void

refresh

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

Returns void

removeBlock

Removes a block from the editor

Parameter	Type	Description
blockId	string	ID of the block to remove

Returns void

removeEventListener

Removes the handler from the given event listener.

Parameter	Type	Description
eventName	string	A String that specifies the name of the event to remove
handler	Function	Specifies the function to remove

Returns void

renderBlocksFromJson

Renders blocks from JSON data, either replacing all existing content or inserting at cursor position.

Parameter	Type	Description
json	object | string	The JSON data (object or string) containing block definitions
replace	boolean	Whether to replace all existing content (true) or insert at cursor (false). By default, it is set to false.
targetBlockId (optional)	string	ID of block to insert after (applicable only if replace is false).

Returns boolean

selectAllBlocks

Selects all blocks in the editor.

Returns void

selectBlock

Selects an entire block

Parameter	Type	Description
blockId	string	ID of the block to select

Returns void

selectRange

Selects the given range

Parameter	Type	Description
range	Range	DOM Range object to select

Returns void

setCursorPosition

Sets cursor position

Parameter	Type	Description
blockId	string	ID of the target block
position	number	Character offset position

Returns void

setSelection

Sets the selection range within a content.
This method selects content within the specified element using a start and end index.

Parameter	Type	Description
contentId	string	The ID of the content element.
startIndex	number	The starting index of the selection.
endIndex	number	The ending index of the selection.

Returns void

updateBlock

Updates block properties

Parameter	Type	Description
blockId	string	ID of the block to update
properties	Partial	Properties to update

Returns boolean

Inject

Dynamically injects the required modules to the component.

Parameter	Type	Description
moduleList	Function[]	?

Returns void

Events

afterPasteCleanup EmitType<AfterPasteCleanupEventArgs>

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

<div id="blockEditor"></div>

import { BlockEditor, AfterPasteCleanupEventArgs } from '@syncfusion/ej2-blockeditor';

let editorObj: BlockEditor = new BlockEditor({
    afterPaste: onAfterPaste
});
editorObj.appendTo("#blockEditor");

function onAfterPaste(args: AfterPasteCleanupEventArgs): void {
  console.log(args);
}

beforePasteCleanup EmitType<BeforePasteCleanupEventArgs>

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

<div id="blockEditor"></div>

import { BlockEditor, BeforePasteCleanupEventArgs } from '@syncfusion/ej2-blockeditor';

let editorObj: BlockEditor = new BlockEditor({
    beforePaste: onBeforePaste
});
editorObj.appendTo("#blockEditor");

function onBeforePaste(args: BeforePasteCleanupEventArgs): void {
  console.log(args);
}

blockChanged EmitType<BlockChangedEventArgs>

Event triggered when the editor blocks are changed.
This event provides details about the changes made to the editor blocks.

<div id="blockEditor"></div>

import { BlockEditor, BlockChangedEventArgs } from '@syncfusion/ej2-blockeditor';

let editorObj: BlockEditor = new BlockEditor({
    blockChanged: onBlockChange,
});
editorObj.appendTo("#blockEditor");

function onBlockChange(args: BlockChangedEventArgs): void {
  console.log(args);
}

blockDragStart EmitType<BlockDragEventArgs>

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

<div id="blockEditor"></div>

import { BlockEditor, BlockDragEventArgs } from '@syncfusion/ej2-blockeditor';

let editorObj: BlockEditor = new BlockEditor({
    blockDragStart: onBlockDragStart
});
editorObj.appendTo("#blockEditor");

function onBlockDragStart(args: BlockDragEventArgs): void {
  console.log(args);
}

blockDragging EmitType<BlockDragEventArgs>

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

<div id="blockEditor"></div>

import { BlockEditor, BlockDragEventArgs } from '@syncfusion/ej2-blockeditor';

let editorObj: BlockEditor = new BlockEditor({
    blockDragging: onBlockDragging
});
editorObj.appendTo("#blockEditor");

function onBlockDragging(args: BlockDragEventArgs): void {
  console.log(args);
}

blockDropped EmitType<BlockDropEventArgs>

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

<div id="blockEditor"></div>

import { BlockEditor, BlockDropEventArgs  } from '@syncfusion/ej2-blockeditor';

let editorObj: BlockEditor = new BlockEditor({
    blockDropped: onBlockDropped
});
editorObj.appendTo("#blockEditor");

function onBlockDropped(args: BlockDropEventArgs): void {
  console.log(args);
}

blur EmitType<BlurEventArgs>

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

<div id="blockEditor"></div>

import { BlockEditor, BlurEventArgs } from '@syncfusion/ej2-blockeditor';

let editorObj: BlockEditor = new BlockEditor({
    blur: onBlur
});
editorObj.appendTo("#blockEditor");

function onBlur(args: BlurEventArgs): void {
  console.log(args);
}

created EmitType<Object>

Event triggered after the Blockeditor is rendered completely.

focus EmitType<FocusEventArgs>

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

<div id="blockEditor"></div>

import { BlockEditor, FocusEventArgs } from '@syncfusion/ej2-blockeditor';

let editorObj: BlockEditor = new BlockEditor({
    focus: onFocus
});
editorObj.appendTo("#blockEditor");

function onFocus(args: FocusEventArgs): void {
  console.log(args);
}

selectionChanged EmitType<SelectionChangedEventArgs>

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

<div id="blockEditor"></div>

import { BlockEditor, SelectionChangedEventArgs } from '@syncfusion/ej2-blockeditor';

let editorObj: BlockEditor = new BlockEditor({
    selectionChanged: onSelectionChanged,
});
editorObj.appendTo("#blockEditor");

function onSelectionChanged(args: SelectionChangedEventArgs): void {
  console.log(args);
}