BlockEditorComponent

16 Dec 202524 minutes to read

Represents the Essential JS 2 Angular BlockEditor Component.

<ejs-blockeditor></ejs-blockeditor>

Properties

blockActionMenuSettings BlockActionMenuSettingsModel

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

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.

import { Component } from "@angular/core";
import { BlockEditorModule, BlockModel, BlockType, ContentType } from '@syncfusion/ej2-angular-blockeditor';

@Component({
    selector: "app-root",
    template: "<div ejs-blockeditor [blocks]='blocks'></div>",
    standalone: true,
    imports: [BlockEditorModule]
})
export class AppComponent {
    public blocks: BlockModel[] = [
    {
        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.'
        }]
    },
];
}

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.

import { Component } from "@angular/core";
import { BlockEditorModule, BlockType, CommandMenuSettingsModel } from '@syncfusion/ej2-angular-blockeditor';

@Component({
    selector: "app-root",
    template: "<div ejs-blockeditor [commandMenuSettings]='commandMenuSettings'></div>",
    standalone: true,
    imports: [BlockEditorModule]
})
export class AppComponent {
    public commandMenuSettings: CommandMenuSettingsModel = { 
      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' }
      ]
    }
}

Defaults to {}

contextMenuSettings ContextMenuSettingsModel

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

import { Component } from "@angular/core";
import { BlockEditorModule, BlockType, ContextMenuSettingsModel } from '@syncfusion/ej2-angular-blockeditor';

@Component({
    selector: "app-root",
    template: "<div ejs-blockeditor [contextMenuSettings]='contextMenuSettings'></div>",
    standalone: true,
    imports: [BlockEditorModule]
})
export class AppComponent {
    public contextMenuSettings: ContextMenuSettingsModel = {
      items: [
        { id: 'copy', text: 'Copy' },
        { id: 'paste', text: 'Paste' },
        { separator: true },
        { id: 'delete', text: 'Delete', iconCss: 'e-icons e-delete' }
      ]
    }
}

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.

import { Component } from "@angular/core";
import { BlockEditorModule } from '@syncfusion/ej2-angular-blockeditor';

@Component({
    selector: "app-root",
    template: "<div ejs-blockeditor [enableDragAndDrop]='true'></div>",
    standalone: true,
    imports: [BlockEditorModule]
})
export class AppComponent {
}

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.

import { Component } from "@angular/core";
import { BlockEditorModule } from '@syncfusion/ej2-angular-blockeditor';

@Component({
    selector: "app-root",
    template: "<div ejs-blockeditor [enableHtmlSanitizer]='true'></div>",
    standalone: true,
    imports: [BlockEditorModule]
})
export class AppComponent {
}

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.

import { Component } from "@angular/core";
import { BlockEditorModule, InlineToolbarSettingsModel } from '@syncfusion/ej2-angular-blockeditor';

@Component({
    selector: "app-root",
    template: "<div ejs-blockeditor [inlineToolbarSettings]='inlineToolbarSettings'></div>",
    standalone: true,
    imports: [BlockEditorModule]
})
export class AppComponent {
    public inlineToolbarSettings: InlineToolbarSettingsModel = {
      enable: true,
      items: [
        { id: 'bold', text: 'Bold', iconCss: 'e-icons e-bold' },
        { id: 'italic', text: 'Italic', iconCss: 'e-icons e-italic' }
      ],
    }
}

Defaults to {}

keyConfig { : }

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

import { Component } from "@angular/core";
import { BlockEditorModule } from '@syncfusion/ej2-angular-blockeditor';

@Component({
    selector: "app-root",
    template: "<div ejs-blockeditor [keyConfig]='keyConfig'></div>",
    standalone: true,
    imports: [BlockEditorModule]
})
export class AppComponent {
    public keyConfig: { [key: string]: string } = {
        bold: 'ctrl+B',
        italic: 'ctrl+I',
        underline: 'ctrl+U',
        undo: 'ctrl+Z',
        redo: 'ctrl+Y'
    }
}

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.

import { Component } from "@angular/core";
import { BlockEditorModule, LabelSettingsModel } from '@syncfusion/ej2-angular-blockeditor';

@Component({
    selector: "app-root",
    template: "<div ejs-blockeditor [labelSettings]='labelSettings'></div>",
    standalone: true,
    imports: [BlockEditorModule]
})
export class AppComponent {
    public labelSettings: LabelSettingsModel= {
        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' }
        ]
    }
}

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.

import { Component } from "@angular/core";
import { BlockEditorModule, PasteCleanupSettingsModel } from '@syncfusion/ej2-angular-blockeditor';

@Component({
    selector: "app-root",
    template: "<div ejs-blockeditor [pasteCleanupSettings]='pasteCleanupSettings'></div>",
    standalone: true,
    imports: [BlockEditorModule]
})
export class AppComponent {
    public pasteCleanupSettings: PasteCleanupSettingsModel= {
      keepFormat: true,
      deniedTags: ['script', 'style']
    }
}

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.

import { Component } from "@angular/core";
import { BlockEditorModule } from '@syncfusion/ej2-angular-blockeditor';

@Component({
    selector: "app-root",
    template: "<div ejs-blockeditor [readOnly]='true'></div>",
    standalone: true,
    imports: [BlockEditorModule]
})
export class AppComponent {
}

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.

import { Component } from "@angular/core";
import { BlockEditorModule } from '@syncfusion/ej2-angular-blockeditor';

@Component({
    selector: "app-root",
    template: "<div ejs-blockeditor [undoRedoStack]='10'></div>",
    standalone: true,
    imports: [BlockEditorModule]
})
export class AppComponent {
}

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.

import { Component } from "@angular/core";
import { BlockEditorModule, UserModel } from '@syncfusion/ej2-angular-blockeditor';

@Component({
    selector: "app-root",
    template: "<div ejs-blockeditor [users]='users'></div>",
    standalone: true,
    imports: [BlockEditorModule]
})
export class AppComponent {
    public users: UserModel[] = [
        {
            id: "user1",
            user: "Andrews"
        },
        {
            id: "user2",
            user: "Charlie"
        },
        {
            id: "user3",
            user: "Laura"
        }
    ];
}

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

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[]

getRange

Gets current selection range

Returns Range | null

getSelectedBlocks

Gets the block from current selection

Returns BlockModel[] | null

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

removeBlock

Removes a block from the editor

Parameter	Type	Description
blockId	string	ID of the block 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 (optional)	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

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);
}