syncfusion-aspnetmvc-blockeditor

name	syncfusion-aspnetmvc-blockeditor
description	Implement Syncfusion ASP.NET MVC Block Editor control. Use when building block-based rich content editors, configuring block types (Paragraph, Heading, List, Code, Table, Image, Callout, Collapsible), handling drag-and-drop, editor menus (slash command, context, block action, inline toolbar), events, methods, paste cleanup, undo/redo, globalization, appearance, collaborative editing with real-time synchronization, version history, and user presence features in ASP.NET MVC Razor views.
metadata	{"author":"Syncfusion Inc","version":"34.1.29"}

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 
{
      id { ; ; }
      blockType { ; ; }
      properties { ; ; }
     List<> content { ; ; }
}


{
     blocks =  List<BlockModel>
    {
         BlockModel
        {
            id = ,
            blockType = ,
            properties =  { level =  },
            content =  List<>
            {
                 { contentType = , content =  }
            }
        },
         BlockModel
        {
            id = ,
            blockType = ,
            content =  List<>
            {
                 { contentType = , content =  }
            }
        }
    };
    ViewBag.BlocksData = blocks;
     View();
}