BlockEditorComponent
23 Sep 202513 minutes to read
Represents the Essential JS 2 Angular BlockEditor Component.
<ejs-blockeditor></ejs-blockeditor>Properties
blockActionsMenu 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.
Defaults to []
commandMenu CommandMenuSettingsModel
Specifies configuration options for editor commands.
This property allows customization of command behaviors within the editor.
Defaults to {}
contextMenu ContextMenuSettingsModel
Specifies settings for the context menu.
This property configures the context menu options that appear on right-click actions.
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 ’’
enableAutoHttps boolean
Specifies whether URLs should automatically have “https://” added if the user does not include it.
If disabled, URLs will be entered as-is, without any protocol prepends.
This can be useful for internal links or specific use cases where the protocol is not required.
Defaults to true
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.
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.
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 ‘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
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.
Defaults to {}
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 {}
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 value of 30, it allows users to revert up to 30 operations.
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.
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 | BuiltInToolbar |
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 any
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
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
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.
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.
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.
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.