Blocks in Vue Block Editor component
20 Dec 202524 minutes to read
The Syncfusion Block Editor uses blocks as the fundamental units for creating and managing content.The entire editor content is structured as a collection of these blocks, which are configured and managed through the blocks property.
Blocks
Blocks are the core building elements of the editor, where each block represents a distinct content unit, such as a Paragraph, Heading, List, or specialized content like a Code Snippet or Image. This block-based architecture makes it easy for users to rearrange, format, and manage discrete pieces of content independently.
You can configure blocks with various properties such as id,blockType, content to create a rich and 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. |
| Table | Block for displaying data in a tabular format with rows and columns. |
| 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.
<template>
<div id='container'>
<ejs-blockeditor :blocks="blocksData"></ejs-blockeditor>
</div>
</template>
<script setup>
import { BlockEditorComponent as EjsBlockeditor, ContentType } from "@syncfusion/ej2-vue-blockeditor";
const blocksData = [
{
blockType: 'Paragraph',
content: [
{
contentType: ContentType.Text,
content: 'This is a paragraph with no indentation (indent: 0)'
}
],
indent: 0
},
{
blockType: 'Paragraph',
content: [
{
contentType: ContentType.Text,
content: 'This paragraph has one level of indentation (indent: 1)'
}
],
indent: 1
},
{
blockType: 'Paragraph',
content: [
{
contentType: ContentType.Text,
content: 'This paragraph has two levels of indentation (indent: 2)'
}
],
indent: 2
},
{
blockType: 'Paragraph',
content: [
{
contentType: ContentType.Text,
content: 'Back to no indentation'
}
],
indent: 0
}
];
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-blockeditor/styles/fluent2.css';
</style><template>
<div id='container'>
<ejs-blockeditor :blocks="blocksData"></ejs-blockeditor>
</div>
</template>
<script>
import { BlockEditorComponent, ContentType } from "@syncfusion/ej2-vue-blockeditor";
export default {
components: {
'ejs-blockeditor': BlockEditorComponent,
},
data() {
return {
blocksData: [
{
blockType: 'Paragraph',
content: [
{
contentType: ContentType.Text,
content: 'This is a paragraph with no indentation (indent: 0)'
}
],
indent: 0
},
{
blockType: 'Paragraph',
content: [
{
contentType: ContentType.Text,
content: 'This paragraph has one level of indentation (indent: 1)'
}
],
indent: 1
},
{
blockType: 'Paragraph',
content: [
{
contentType: ContentType.Text,
content: 'This paragraph has two levels of indentation (indent: 2)'
}
],
indent: 2
},
{
blockType: 'Paragraph',
content: [
{
contentType: ContentType.Text,
content: 'Back to no indentation'
}
],
indent: 0
}
]
};
},
methods: {
}
};
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-blockeditor/styles/fluent2.css';
</style>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.
<template>
<div id='container'>
<ejs-blockeditor :blocks="blocksData"></ejs-blockeditor>
</div>
</template>
<script setup>
import { BlockEditorComponent as EjsBlockeditor, ContentType } from "@syncfusion/ej2-vue-blockeditor";
const blocksData = [
{
blockType: 'Heading',
properties: { level : 1},
content: [
{
contentType: ContentType.Text,
content: 'Custom CSS Classes in Block Editor'
}
]
},
{
blockType: 'Paragraph',
content: [
{
contentType: ContentType.Text,
content: 'Default paragraph block'
}
]
},
{
blockType: 'Paragraph',
content: [
{
contentType: ContentType.Text,
content: 'This is an info block'
}
],
cssClass: 'info-block'
},
{
blockType: 'Paragraph',
content: [
{
contentType: ContentType.Text,
content: 'This is a warning block'
}
],
cssClass: 'warning-block'
},
{
blockType: 'Paragraph',
content: [
{
contentType: ContentType.Text,
content: 'This is a success block'
}
],
cssClass: 'success-block'
},
{
blockType: 'Paragraph',
content: [
{
contentType: ContentType.Text,
content: 'This is an error block'
}
],
cssClass: 'error-block'
},
{
blockType: 'Paragraph',
content: [
{
contentType: ContentType.Text,
content: 'This is a custom font block'
}
],
cssClass: 'custom-font'
}
];
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-blockeditor/styles/fluent2.css';
/* 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;
}
</style><template>
<div id='container'>
<ejs-blockeditor :blocks="blocksData"></ejs-blockeditor>
</div>
</template>
<script>
import { BlockEditorComponent, ContentType } from "@syncfusion/ej2-vue-blockeditor";
export default {
components: {
'ejs-blockeditor': BlockEditorComponent,
},
data() {
return {
blocksData: [
{
blockType: 'Heading',
properties: { level : 1},
content: [
{
contentType: ContentType.Text,
content: 'Custom CSS Classes in Block Editor'
}
]
},
{
blockType: 'Paragraph',
content: [
{
contentType: ContentType.Text,
content: 'Default paragraph block'
}
]
},
{
blockType: 'Paragraph',
content: [
{
contentType: ContentType.Text,
content: 'This is an info block'
}
],
cssClass: 'info-block'
},
{
blockType: 'Paragraph',
content: [
{
contentType: ContentType.Text,
content: 'This is a warning block'
}
],
cssClass: 'warning-block'
},
{
blockType: 'Paragraph',
content: [
{
contentType: ContentType.Text,
content: 'This is a success block'
}
],
cssClass: 'success-block'
},
{
blockType: 'Paragraph',
content: [
{
contentType: ContentType.Text,
content: 'This is an error block'
}
],
cssClass: 'error-block'
},
{
blockType: 'Paragraph',
content: [
{
contentType: ContentType.Text,
content: 'This is a custom font block'
}
],
cssClass: 'custom-font'
}
]
};
},
methods: {
}
};
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-blockeditor/styles/fluent2.css';
/* 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;
}
</style>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.
<template>
<div id='container'>
<ejs-blockeditor :blocks="blocksData"></ejs-blockeditor>
</div>
</template>
<script setup>
import { BlockEditorComponent as EjsBlockeditor } from "@syncfusion/ej2-vue-blockeditor";
const blocksData = [
{
blockType: '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>`
}
];
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-blockeditor/styles/fluent2.css';
</style><template>
<div id='container'>
<ejs-blockeditor :blocks="blocksData"></ejs-blockeditor>
</div>
</template>
<script>
import { BlockEditorComponent } from "@syncfusion/ej2-vue-blockeditor";
export default {
components: {
'ejs-blockeditor': BlockEditorComponent,
},
data() {
return {
blocksData: [
{
blockType: '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>`
}
]
};
},
methods: {
}
};
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-blockeditor/styles/fluent2.css';
</style>