Represents the React BlockEditor Component
<BlockEditor></BlockEditor>Specifies the configuration settings for the block actions menu. This property allows customization of the actions menu within the editor.
Defaults to {}
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 []
Specifies configuration options for editor commands. This property allows customization of command behaviors within the editor.
Defaults to {}
Specifies settings for the context menu. This property configures the context menu options that appear on right-click actions.
Defaults to {}
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 ”
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
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
boolean
Specifies whether HTML encoding is enabled. This property determines if the content will be encoded to escape special HTML characters.
Defaults to false
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
boolean
Enable or disable persisting component’s state between page reloads.
Defaults to false
boolean
Enable or disable rendering component in right to left direction.
Defaults to false
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%’
Specifies settings for the formatting toolbar. This property configures the toolbar that provides text formatting options.
Defaults to {}
{ : }
Specifies custom keyboard shortcuts configuration. This property allows the definition of custom keyboard shortcuts for editor commands.
Defaults to null
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 {}
string
Specifies the locale for localization. This property sets the language and regional settings for the editor.
Defaults to ”
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 {}
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
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
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 []
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%’
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
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
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
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
Focuses the editor
Returns void
Removes focus from the editor
Returns void
Gets a block by ID
| Parameter | Type | Description |
|---|---|---|
| blockId | string |
ID of the block to retrieve |
Returns BlockModel | null
Gets total block count
Returns number
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
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
Gets current selection range
Returns Range | null
Gets the block from current selection
Returns BlockModel[] | null
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
Removes a block from the editor
| Parameter | Type | Description |
|---|---|---|
| blockId | string |
ID of the block to remove |
Returns void
Selects all blocks in the editor.
Returns void
Selects an entire block
| Parameter | Type | Description |
|---|---|---|
| blockId | string |
ID of the block to select |
Returns void
Selects the given range
| Parameter | Type | Description |
|---|---|---|
| range | Range |
DOM Range object to select |
Returns void
Sets cursor position
| Parameter | Type | Description |
|---|---|---|
| blockId | string |
ID of the target block |
| position | number |
Character offset position |
Returns void
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
Updates block properties
| Parameter | Type | Description |
|---|---|---|
| blockId | string |
ID of the block to update |
| properties | Partial |
Properties to update |
Returns boolean
Event triggered after a paste operation occurs in the block editor. This event provides details about the pasted content.
EmitType<BeforePasteEventArgs>
Event triggered before a paste operation occurs in the block editor. This event allows interception or modification of the pasted content.
Event triggered when a block is added to the block editor. This event provides details about the newly added block.
Event triggered during the dragging operation of a block. This event provides details about the drag operation.
Event triggered when the drag operation for a block starts. This event provides details about the initial stage of the drag.
Event triggered when a block is dropped after a drag operation. This event provides details about the block drop action.
Event triggered when a block is moved within the block editor. This event provides details about the moved block.
EmitType<BlockRemovedEventArgs>
Event triggered when a block is removed from the block editor. This event provides details about the block being removed.
Event triggered when the block editor loses focus. This event provides details about the blur action.
EmitType<ContentChangedEventArgs>
Event triggered when the content of the block editor is changed. This event provides details about the changes made to the content.
EmitType<Object>
Event triggered after the Blockeditor is rendered completely.
Event triggered when the block editor gains focus. This event provides details about the focus action.
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.
EmitType<SelectionChangedEventArgs>
Event triggered when the selection in the block editor changes. This event provides details about the new selection state.
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.