BlockEditorModel

16 Dec 202517 minutes to read

Interface for a class BlockEditor

Properties

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

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

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

codeBlockSettings CodeBlockSettingsModel

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

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

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

cssClass string

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

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

enableHtmlEncode boolean

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

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

enablePersistence boolean

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

enableRtl boolean

Enable or disable rendering component in right to left direction.

height string|number

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

imageBlockSettings ImageBlockSettingsModel

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

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

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

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

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

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

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

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

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

width string|number

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

Search docs

Ask HelpBot