Implement the Syncfusion JavaScript BlockEditor control - a modern block-based text editor with drag-and-drop, slash commands, and extensive formatting capabilities. Use this skill IMMEDIATELY for: BlockEditor implementation, block-based editors, content editing with blocks, document editors with block structure, text editing with modern UI, slash command menus, drag-and-drop content reordering, inline toolbars, collaborative editing features, structured content creation, @mentions and labels, code blocks with syntax highlighting, tables and lists, collapsible sections, or any Syncfusion EJ2 BlockEditor control usage in JavaScript applications.
The Syncfusion JavaScript BlockEditor is a modern, block-based text editor that enables users to create, format, and organize content using various block types. It provides an intuitive editing experience with features like drag-and-drop reordering, slash commands, inline toolbars, and extensive customization options. The BlockEditor control is built on a block-based architecture where content is organized into discrete blocks. Each block has a specific type (paragraph, heading, list, image, etc.) and can contain formatted content. Key characteristics:
📄 Read: references/getting-started.md
@syncfusion/ej2-blockeditor)📄 Read: references/methods-reference.md
📄 Read: references/events-reference.md
import { BlockEditor, BlockType, ContentType } from '@syncfusion/ej2-blockeditor';
// Initialize BlockEditor with sample content
const editor = new BlockEditor({
width: '100%',
height: '600px',
blocks: [
{
id: 'heading-1',
blockType: BlockType.Heading,
properties: { level: 1 },
content: [
{
id: 'h1-content',
contentType: ContentType.Text,
content: 'Welcome to BlockEditor'
}
]
},
{
id: 'intro-para',
blockType: BlockType.Paragraph,
content: [
{
id: 'intro-text',
contentType: ContentType.Text,
content: 'Start typing or press "/" to open the command menu.'
}
]
},
{
id: 'bullet-list',
blockType: BlockType.BulletList,
content: [
{
id: 'list-item-1',
contentType: ContentType.Text,
content: 'Drag blocks to reorder'
}
]
}
],
enableDragAndDrop: true,
enableHtmlSanitizer: true
});
// Render the editor
editor.appendTo('#blockeditor');
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind.css" rel="stylesheet" />
</head>
<body>
<div id="blockeditor"></div>
</body>
</html>
// Add a new paragraph block after a target block
const newBlock = {
id: 'new-para',
blockType: BlockType.Paragraph,
content: [
{
id: 'new-content',
contentType: ContentType.Text,
content: 'This is a new paragraph.'
}
]
};
editor.addBlock(newBlock, 'target-block-id', true); // true = after
// Get all content as HTML
const htmlContent = editor.getDataAsHtml();
// Get all content as JSON
const jsonContent = editor.getDataAsJson();
// Get specific block content
const blockHtml = editor.getDataAsHtml('block-id');
const blockJson = editor.getDataAsJson('block-id');
const editor = new BlockEditor({
blockChanged: (args) => {
console.log('Blocks changed:', args.changes);
// Auto-save functionality
saveContent(editor.getDataAsJson());
}
});
const editor = new BlockEditor({
commandMenuSettings: {
popupWidth: '350px',
commands: [
{
id: 'custom-quote',
type: BlockType.Quote,
label: 'Quote Block',
iconCss: 'e-icons e-quote',
groupBy: 'Basic'
},
{
id: 'timestamp',
label: 'Insert Timestamp',
iconCss: 'e-icons e-schedule',
groupBy: 'Actions'
}
],
itemSelect: (args) => {
if (args.command.id === 'timestamp') {
// Custom action: insert current timestamp
const timestamp = new Date().toLocaleString();
// Insert logic here
}
}
}
});
const editor = new BlockEditor({
imageBlockSettings: {
saveUrl: 'https://your-server.com/api/upload',
path: '/images/',
allowedTypes: ['.jpg', '.jpeg', '.png', '.gif'],
maxFileSize: 5000000, // 5MB
maxWidth: 1200,
maxHeight: 800,
enableResize: true,
saveFormat: 'Base64' // or 'Blob'
},
fileUploadSuccess: (args) => {
console.log('File uploaded:', args.fileUrl);
}
});
BlockModel[] - Initial content blocksstring | number - Editor width (default: '100%')string | number - Editor height (default: 'auto')boolean - Read-only mode (default: false)boolean - Drag-drop blocks (default: true)boolean - Sanitize HTML (default: true)number - Max undo/redo operations (default: 30)string - Custom CSS class for stylingCommandMenuSettingsModel - Slash command menu (/)BlockActionMenuSettingsModel - Block action menu (⋮)ContextMenuSettingsModel - Right-click context menuInlineToolbarSettingsModel - Text formatting toolbarTransformSettingsModel - Block transformation menuImageBlockSettingsModel - Image upload and configurationCodeBlockSettingsModel - Code syntax highlightingPasteCleanupSettingsModel - Paste formatting controlLabelSettingsModel - Labels/tags configuration ($label)UserModel[] - Users for mentions (@user){ [key: string]: string } - Custom keyboard shortcutsFontColorSettingsModel - Text color paletteBackgroundColorSettingsModel - Background/highlight color palettestring - Localization code (default: 'en-US')boolean - Right-to-left support (default: false)boolean - Persist state across reloads (default: false)