Blocks in EJ2 TypeScript Block Editor control

20 Aug 202522 minutes to read

The Block Editor control enables you to create block-based content editing solution using various types of blocks. The blocks property allows you to define and manage the content structure of your editor.

Blocks

Blocks are the fundamental building elements of the Block Editor. Each block represents a distinct content unit such as a paragraph, heading, list, or specialized content like code snippets or images. The Block Editor organizes content as a collection of blocks, allowing for better structure and formatting options.

You can configure blocks with various properties such as id, type, content, children and more to create rich, structured editor.

Block types

The Block Editor supports multiple block types. Each block type offers different formatting and functionality options:

Built-in Block Types	Description
Paragraph	Default block type for regular text content.
Heading1 to Heading4	Different levels of headings for document structure.
Checklist	Interactive to-do lists with checkable items.
BulletList	Unordered lists with bullet points.
NumberedList	Ordered lists with sequential numbering.
Code	Formatted code blocks with syntax highlighting.
Quote	Styled block for quotations.
Callout	Highlighted block for important information.
Divider	Horizontal separator line.
CollapsibleParagraph and CollapsibleHeading1-4	Collapsible content blocks.
Image	Block for displaying images.
Template	Predefined custom templates.

Configure indent

You can specify the indentation level of a block using the indent property. This property accepts a numeric value that determines how deeply a block is nested from the left margin.

By default, the indent property is set to 0.

index.ts
index.html
import { BlockEditor, BlockModel, ContentType } from "@syncfusion/ej2-blockeditor";

const blocksData: BlockModel[] = [
    {
        type: 'Paragraph',
        content: [
            {
                type: ContentType.Text,
                content: 'This is a paragraph with no indentation (indent: 0)'
            }
        ],
        indent: 0
    },
    {
        type: 'Paragraph',
        content: [
            {
                type: ContentType.Text,
                content: 'This paragraph has one level of indentation (indent: 1)'
            }
        ],
        indent: 1
    },
    {
        type: 'Paragraph',
        content: [
            {
                type: ContentType.Text,
                content: 'This paragraph has two levels of indentation (indent: 2)'
            }
        ],
        indent: 2
    },
    {
        type: 'Paragraph',
        content: [
            {
                type: ContentType.Text,
                content: 'Back to no indentation'
            }
        ],
        indent: 0
    }
];

const blockEditor = new BlockEditor({
    blocks: blocksData
});
blockEditor.appendTo('#blockEditor');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 - BlockEditor</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name="description" content="Essential JS 2" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-base/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-buttons/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-popups/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-blockeditor/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-inputs/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-navigations/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-splitbuttons/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-dropdowns/styles/fluent2.css" rel="stylesheet">

    <!--style reference from app-->
    <link href="index.css" rel="stylesheet" />

    <!--system js reference and configuration-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id='loader'>LOADING....</div>
    <div id="container">
        <div id="blockEditor"></div>
    </div>
</body>
<style>
    #container {
        visibility: hidden;
        margin: 50px;
    }

    #loader {
        color: #008cff;
        height: 40px;
        left: 45%;
        position: absolute;
        top: 45%;
        width: 30%;
    }
</style>

</html>

Configure CSS Class

You can apply custom styling to individual blocks using the cssClass property. This property accepts a string containing one or more CSS class names.

Custom CSS classes allow you to define specialized styling for specific blocks in your editor.

index.ts
index.html
index.css
import { BlockEditor, BlockModel, ContentType } from "@syncfusion/ej2-blockeditor";

const blocksData: BlockModel[] = [
    {
        type: 'Heading',
        props: {level : 1},
        content: [
            {
                type: ContentType.Text,
                content: 'Custom CSS Classes in Block Editor'
            }
        ]
    },
    {
        type: 'Paragraph',
        content: [
            {
                type: ContentType.Text,
                content: 'Default paragraph block'
            }
        ]
    },
    {
        type: 'Paragraph',
        content: [
            {
                type: ContentType.Text,
                content: 'This is an info block'
            }
        ],
        cssClass: 'info-block'
    },
    {
        type: 'Paragraph',
        content: [
            {
                type: ContentType.Text,
                content: 'This is a warning block'
            }
        ],
        cssClass: 'warning-block'
    },
    {
        type: 'Paragraph',
        content: [
            {
                type: ContentType.Text,
                content: 'This is a success block'
            }
        ],
        cssClass: 'success-block'
    },
    {
        type: 'Paragraph',
        content: [
            {
                type: ContentType.Text,
                content: 'This is an error block'
            }
        ],
        cssClass: 'error-block'
    },
    {
        type: 'Paragraph',
        content: [
            {
                type: ContentType.Text,
                content: 'This is a custom font block'
            }
        ],
        cssClass: 'custom-font'
    }
];

const blockEditor = new BlockEditor({
    blocks: blocksData
});
blockEditor.appendTo('#blockEditor');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 - BlockEditor</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name="description" content="Essential JS 2" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-base/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-buttons/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-popups/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-blockeditor/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-inputs/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-navigations/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-splitbuttons/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-dropdowns/styles/fluent2.css" rel="stylesheet">

    <!--style reference from app-->
    <link href="index.css" rel="stylesheet" />

    <!--system js reference and configuration-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id='loader'>LOADING....</div>
    <div id="container">
        <div id="blockEditor"></div>
    </div>
</body>
<style>
    #container {
        visibility: hidden;
        margin: 50px;
    }

    #loader {
        color: #008cff;
        height: 40px;
        left: 45%;
        position: absolute;
        top: 45%;
        width: 30%;
    }
</style>

</html>
/* Custom CSS for blocks  */
.e-block.info-block, .e-block.warning-block, .e-block.success-block, .e-block.error-block {
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 4px;
    margin-bottom: 5px;
    border-left: 4px solid;
}

.e-block.info-block {
    background-color: #e6f3ff;
    border-left-color: #007bff;
    color: #004085;
}

.e-block.warning-block {
    background-color: #fff8e1;
    border-left-color: #ffc107;
    color: #856404;
}

.e-block.success-block {
    background-color: #e8f5e9;
    border-left-color: #28a745;
    color: #155724;
}

.e-block.error-block {
    background-color: #fdecea;
    border-left-color: #dc3545;
    color: #721c24;
}

.e-block.custom-font {
    font-family: 'Georgia', serif;
    font-size: 18px;
    color: #4a4a4a;
    border-bottom: 2px dotted #ccc;
    padding-top: 10px;
    padding-bottom: 10px;
}

Configure templates

The Block Editor allows you to use custom templates for specialized content using the template property. Templates can be defined as strings, functions, or HTML elements.

index.ts
index.html
index.css
import { BlockEditor, BlockModel, ContentType } from "@syncfusion/ej2-blockeditor";

const blocksData: BlockModel[] = [
    {
        type: 'Template',
        template: `<div class="notification-card">
            <div class="notification-header">
                <span class="notification-icon">📢</span>
                <h3 class="notification-title">Important Announcement</h3>
            </div>
            <div class="notification-content">
                <p>The system will be undergoing maintenance on Saturday from 2:00 AM to 4:00 AM.</p>
                <p>Please save your work before this time to prevent any data loss.</p>
            </div>
        </div>`
    }
];

const blockEditor = new BlockEditor({
    blocks: blocksData
});
blockEditor.appendTo('#blockEditor');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 - BlockEditor</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name="description" content="Essential JS 2" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-base/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-buttons/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-popups/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-blockeditor/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-inputs/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-navigations/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-splitbuttons/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-dropdowns/styles/fluent2.css" rel="stylesheet">

    <!--style reference from app-->
    <link href="index.css" rel="stylesheet" />

    <!--system js reference and configuration-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id='loader'>LOADING....</div>
    <div id="container">
        <div id="blockEditor"></div>
    </div>
</body>
<style>
    #container {
        visibility: hidden;
        margin: 50px;
    }

    #loader {
        color: #008cff;
        height: 40px;
        left: 45%;
        position: absolute;
        top: 45%;
        width: 30%;
    }
</style>

</html>
.e-block-template .notification-card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px;
    background-color: #f9f9f9;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif;
}
.e-block-template .notification-header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}
.e-block-template .notification-icon {
    font-size: 24px;
    margin-right: 8px;
}
.e-block-template .notification-title {
    margin: 0;
    color: #d32f2f;
    font-size: 18px;
}
.e-block-template .notification-content {
    margin-bottom: 16px;
}
.e-block-template .notification-content p {
    margin: 8px 0;
    line-height: 1.5;
}