Syncfusion ASP.NET MVC Block Editor

The Block Editor control provides a block-based rich content editing experience in ASP.NET MVC applications. Content is structured as a collection of typed blocks (Paragraph, Heading, List, Code, Table, Image, etc.), each independently configurable with content, properties, and inline styles.

Quick Start Example

@using Syncfusion.EJ2.BlockEditor

<div id='blockeditor-container'>
    @Html.EJS().BlockEditor("block-editor").Render()
</div>

<style>
    #blockeditor-container { margin: 20px auto; }
</style>

public ActionResult Index()
{
    return View();
}

With initial blocks:

@using Syncfusion.EJ2.BlockEditor

<div id='blockeditor-container'>
    @Html.EJS().BlockEditor("block-editor").Blocks((List<BlockModel>)ViewBag.BlocksData).Render()
</div>

public class BlockModel
{
    public string id { get; set; }
    public string blockType { get; set; }
    public object properties { get; set; }
    public List<object> content { get; set; }
}

public ActionResult Index()
{
    var blocks = new List<BlockModel>
    {
        new BlockModel
        {
            id = "heading-1",
            blockType = "Heading",
            properties = new { level = 1 },
            content = new List<object>
            {
                new { contentType = "Text", content = "My Document" }
            }
        },
        new BlockModel
        {
            id = "para-1",
            blockType = "Paragraph",
            content = new List<object>
            {
                new { contentType = "Text", content = "Start writing here." }
            }
        }
    };
    ViewBag.BlocksData = blocks;
    return View();
}

Documentation and Navigation Guide

Getting Started & Installation

📄 Read: [references/getting-started.md](references/getting-started.md)

When user needs to:

• Install Syncfusion.EJ2.MVC5 NuGet package
• Add namespace reference in Web.config
• Link CDN stylesheet and script in _Layout.cshtml
• Register the Syncfusion script manager
• Render a minimal Block Editor on a page

Block Types & Configuration

📄 Read: [references/block-types.md](references/block-types.md)

When user needs to:

• Understand all supported block types (Paragraph, Heading, List, Code, Quote, Callout, Divider, Image, Table, Collapsible, Template)
• Configure blockType, content, properties, indent, cssClass on individual blocks
• Set heading levels (1–4), list types (BulletList, NumberedList, Checklist), checklist isChecked state
• Add placeholder text to blocks
• Apply per-block CSS classes for custom styling
• Use Template blocks for custom HTML content

Inline Content & Styles

📄 Read: [references/inline-content.md](references/inline-content.md)

When user needs to:

• Configure contentType (Text, Link, Code, Mention, Label)
• Set hyperlink properties (url, openInNewWindow) on Link content
• Configure Label content with labelId, trigger character (TriggerChar default: "$"), and LabelSettings
• Configure the Users collection and UserModel for Mention content
• Configure Mention content with userId
• Apply inline text styles: bold, italic, underline, strikethrough, color, backgroundColor, superscript, subscript, uppercase, lowercase, inlineCode

Nested Blocks (Collapsible, Quote, Callout)

📄 Read: [references/nested-blocks.md](references/nested-blocks.md)

When user needs to:

• Configure CollapsibleHeading or CollapsibleParagraph with children, isExpanded, level
• Configure Quote blocks with nested child Paragraph blocks
• Configure Callout blocks with nested children
• Set parentId (top-level on BlockModel) to establish parent-child relationships

Embed Blocks (Image & Code)

📄 Read: [references/embed-blocks.md](references/embed-blocks.md)

When user needs to:

• Render an Image block with src, altText, width, height
• Configure global ImageBlockSettings (saveUrl, path, saveFormat, allowedTypes, maxFileSize, enableResize)
• Upload images to a server via controller action
• Handle image upload lifecycle: BeforeFileUpload (validate/cancel), FileUploading (add auth headers), FileUploadSuccess (read saved URL), FileUploadFailed (error feedback)
• Configure Code blocks with syntax highlighting and language selection
• Set global CodeBlockSettings (defaultLanguage default: "javascript", languages array)

Table Blocks

📄 Read: [references/table-block.md](references/table-block.md)

When user needs to:

• Render a Table block with columns, rows, and cells
• Configure enableHeader, enableRowNumbers, readOnly, width on a table
• Define column headers (headerText) and row cells with columnId and nested blocks
• Understand table resizing and multi-row/column selection/deletion

Editor Menus

📄 Read: [references/editor-menus.md](references/editor-menus.md)

When user needs to:

• Customize the Slash Command menu (CommandMenuSettings): popup size, custom commands, tooltip, Filtering/ItemSelect events
• Customize the Context menu (ContextMenuSettings): enable, custom items, submenus, ShowItemOnClick, Opening/Closing/ItemSelect events
• Customize the Block Action menu (BlockActionsMenuSettings): custom items, tooltip, popup size, Opening/Closing/ItemSelect events
• Customize the Inline Toolbar (InlineToolbarSettings): enable, items, popup width, tooltip, ItemClick event
• Add Transform, InlineCode, Link items to the Inline Toolbar
• Configure font color and background color pickers (FontColorSettings, BackgroundColorSettings)

Events

📄 Read: [references/events.md](references/events.md)

When user needs to:

• Handle editor lifecycle: Created, Focus, Blur
• Respond to content changes: BlockChanged, SelectionChanged
• Handle drag operations: BlockDragStart, BlockDragging, BlockDropped
• Intercept paste operations: BeforePasteCleanup, AfterPasteCleanup
• Handle image upload lifecycle: BeforeFileUpload, FileUploading, FileUploadSuccess, FileUploadFailed

Methods

📄 Read: [references/methods.md](references/methods.md)

When user needs to:

• Add, remove, move, update, or get blocks programmatically (addBlock, removeBlock, moveBlock, updateBlock, getBlock, getBlockCount)
• Manage selection and cursor: setSelection, setCursorPosition, getSelectedBlocks, getRange, selectRange, selectBlock, selectAllBlocks
• Manage focus: focusIn, focusOut
• Apply formatting: executeToolbarAction, enableToolbarItems, disableToolbarItems
• Export content: getDataAsJson, getDataAsHtml, renderBlocksFromJson, parseHtmlToBlocks, print
• Always retrieve the component instance via ej.base.getInstance in the Created event

Appearance & Read-Only

📄 Read: [references/appearance.md](references/appearance.md)

When user needs to:

• Set editor Width and Height
• Enable ReadOnly mode (view-only, no edits)
• Apply a custom CssClass to the editor container
• Persist editor state across page reloads with EnablePersistence

Paste Cleanup

📄 Read: [references/paste-cleanup.md](references/paste-cleanup.md)

When user needs to:

• Configure PasteCleanupSettings: DeniedTags, KeepFormat, PlainText
• Strip unwanted tags (script, iframe) from pasted content
• Paste as plain text stripping all formatting

Undo/Redo & Keyboard Shortcuts

📄 Read: [references/undo-redo-keyboard.md](references/undo-redo-keyboard.md)

When user needs to:

• Configure UndoRedoStack size (default: 30)
• Know all built-in keyboard shortcuts for formatting, block creation, block management
• Customize shortcuts via KeyConfig property

Globalization & Accessibility

📄 Read: [references/globalization.md](references/globalization.md)

When user needs to:

• Set Locale for localized UI strings (e.g., de for German)
• Enable RTL layout with EnableRtl
• Know the full localization key table

Drag & Drop

📄 Read: [references/drag-drop.md](references/drag-drop.md)

When user needs to:

• Enable or disable drag and drop with EnableDragAndDrop
• Understand single vs. multiple block dragging behavior

Security (XSS Prevention)

📄 Read: [references/security.md](references/security.md)

When user needs to:

• Understand the built-in EnableHtmlSanitizer protection (default: true)
• Know which elements are automatically removed
• Escape HTML characters in output using EnableHtmlEncode (default: false)

Collaborative Editing

📄 Read: [references/collaborative-editing.md](references/collaborative-editing.md)

When user needs to:

• Set up real-time collaborative editing using Yjs and providers (y-websocket, y-webrtc, Hocuspocus, Liveblocks, PartyKit)
• Configure CollaborationSettings with adapter and provider
• Enable user presence and remote cursors with EnableAwareness
• Track active collaborators with Users and CurrentUserId
• Implement version history with snapshots (create, restore, compare, export, import)
• Configure custom snapshot storage using IVersionStorage interface (IndexedDB, database, cloud)
• Handle collaboration events: SnapshotCreated, SnapshotRestored
• Resolve synchronization issues and optimize performance for multiple users

Key Properties at a Glance

Common Patterns

Pattern 1 — Get Component Instance

Always capture the instance in Created; all method calls require this reference:

var blockEditorObj;
function onCreated() {
    blockEditorObj = ej.base.getInstance(
        document.getElementById('block-editor'),
        ejs.blockeditor.BlockEditor
    );
}

@Html.EJS().BlockEditor("block-editor").Created("onCreated").Render()

Pattern 2 — Export Content as JSON

var jsonData = blockEditorObj.getDataAsJson();
// Send to server or store in state

Pattern 3 — Programmatically Add a Block

var newBlock = {
    id: 'new-para',
    blockType: 'Paragraph',
    content: [{ contentType: 'Text', content: 'Added programmatically' }]
};
blockEditorObj.addBlock(newBlock, 'existing-block-id', true); // true = insert after

Pattern 4 — Toggle Read-Only at Runtime

blockEditorObj.readOnly = true;  // enable read-only
blockEditorObj.readOnly = false; // re-enable editing