Inline Content in Angular Block Editor
In the Syncfusion Block Editor, all content is organized within blocks. Each block contains an array of content property that define the text and functionality within that block.
Each contentModel is an object with properties such as contentType, content, and properties, allowing for granular control over its appearance and behavior.
Setting content type
The Block Editor supports several inline content types through the ContentType enum, which can be set using the contentType property.
| Built-in Content Type | Description |
|---|---|
| Text | Represents plain text content. |
| Link | Represents a hyperlink. |
| Mention | Represents a user mention. |
| Label | Represents a label or tag. |
By default, the content type is Text.
Configure text content
To configure text content, set the contentType property to Text. This is the default content type if none is specified.
Content type
// Adding inline text
{
blockType: 'Paragraph',
content: [
{
contentType: 'Text',
content: 'Inline Text'
}
]
}Configure hyperlink
To create a hyperlink, set the contentType property to Link. You can configure the link’s URL using the properties property.
Configure link properties
You can configure a hyperlink’s behavior through the content item’s properties object. The supported options are:
| Property | Description | Default Value |
|---|---|---|
| url | Destination URL the link navigates to. | '' |
ContentType & Properties
{
blockType: 'Paragraph',
content: [
{
contentType: 'Link',
content: 'hyperlinks',
properties: {
url: 'https://ej2.syncfusion.com/documentation',
}
}
]
}Configure labels
To render a label inline, set the contentType of a content item to Label. The content item’s properties.labelId selects which label definition to render.
Built-in items
The Block Editor ships with the following built-in label groups, ready to use without any custom configuration:
- Progress: In-progress, On-hold, Done
- Priority: High, Medium, Low
Customize label
You can customize the labels by using the properties property along with contentType Label.
ContentType & Properties
// Adding inline label
{
blockType: 'Paragraph',
content: [
{
contentType: 'Label',
properties: { labelId: 'progress' }
}
]
}Trigger Character configuration
Use the triggerChar property to define the character that opens the label suggestions popup. The default trigger character is $.
Label items configuration
Define the labels using the items array. When a user types the trigger character, a popup will show the given items.
Each item in the items array supports the following properties:
| Property | Description |
|---|---|
| id | A unique identifier for the label. |
| text | The display text for the label. |
| groupBy | The category name for grouping similar labels. |
| labelColor | The background color of the label. |
| iconCss | A CSS class for an icon to display with the label. |
When users type the trigger character followed by text, a popup will appear showing matching label items from which they can select. The selected label will be inserted into the content as a Label content item.
Using labels with group headers
Label items that share the same groupBy value are grouped together under a header in the label selection popup, as shown in the following labelSettings example:
public labelSettings: LabelSettingsModel = {
triggerChar: '#',
items: [
{ id: 'bug', text: 'Bug', labelColor: '#ff5252', groupBy: 'Status' },
{ id: 'task', text: 'Task', labelColor: '#90caf9', groupBy: 'Status' },
{ id: 'low', text: 'Low Priority', labelColor: '#c5e1a5', groupBy: 'Priority' },
{ id: 'high', text: 'High Priority',labelColor: '#ffab91', groupBy: 'Priority' }
]
};The complete sample below demonstrates label customization in the Block Editor.
import { Component } from '@angular/core';
import { BlockEditorModule } from "@syncfusion/ej2-angular-blockeditor";
import { BlockModel, ContentType, LabelSettingsModel } from "@syncfusion/ej2-blockeditor";
@Component({
imports: [BlockEditorModule],
standalone: true,
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
public labelSettings: LabelSettingsModel = {
triggerChar: '#',
items: [
{ id: 'bug', text: 'Bug', labelColor: '#ff5252', groupBy: 'Status' },
{ id: 'task', text: 'Task', labelColor: '#90caf9', groupBy: 'Status' },
{ id: 'feature', text: 'Feature', labelColor: '#81c784', groupBy: 'Status' },
{ id: 'enhancement', text: 'Enhancement', labelColor: '#ba68c8', groupBy: 'Status' },
{ id: 'low', text: 'Low Priority', labelColor: '#c5e1a5', groupBy: 'Priority' },
{ id: 'medium', text: 'Medium Priority', labelColor: '#fff59d', groupBy: 'Priority' },
{ id: 'high', text: 'High Priority', labelColor: '#ffab91', groupBy: 'Priority' },
{ id: 'critical', text: 'Critical', labelColor: '#ef9a9a', groupBy: 'Priority' }
]
};
public blocksData: BlockModel[] = [
{
blockType: 'Heading',
properties: { level: 1},
content: [
{
contentType: ContentType.Text,
content: 'Project Planning with Custom Labels'
}
]
},
{
blockType: 'Paragraph',
content: [
{
contentType: ContentType.Text,
content: 'Type # to add status labels to your tasks.'
}
]
},
{
blockType: 'Paragraph',
content: [
{
contentType: ContentType.Text,
content: 'Fix homepage layout issue - '
},
{
contentType: ContentType.Label,
properties: { labelId: 'bug'}
},
{
contentType: ContentType.Text,
content: ' '
},
{
contentType: ContentType.Label,
properties: { labelId: 'high'}
}
]
},
{
blockType: 'Paragraph',
content: [
{
contentType: ContentType.Text,
content: 'Update user documentation - '
},
{
contentType: ContentType.Label,
properties: { labelId: 'task'}
},
{
contentType: ContentType.Text,
content: ' '
},
{
contentType: ContentType.Label,
properties: { labelId: 'medium'}
}
]
},
{
blockType: 'Paragraph',
content: [
{
contentType: ContentType.Text,
content: 'Implement payment gateway - '
},
{
contentType: ContentType.Label,
properties: { labelId: 'feature'}
},
{
contentType: ContentType.Text,
content: ' '
},
{
contentType: ContentType.Label,
properties: { labelId: 'critical'}
}
]
}
];
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent).catch((err) => console.error(err));<div id="container">
<ejs-blockeditor id="blockeditor" [blocks]="blocksData" [labelSettings]="labelSettings" />
</div>Configure mention
Mentions are references to users or entities that can be inserted into your content. You can configure mention content by setting the contentType property to Mention.
Mentions are typically triggered by the @ character and are linked to the users collection defined on the Block Editor component. Each mention in your content references a user by userId and the editor resolves it to the corresponding user record.
ContentType
// Adding an inline mention
{
blockType: 'Paragraph',
content: [
{
contentType: 'Mention',
properties: { userId: 'user1' }
}
]
}The sample below also configures the editor’s users and labelSettings properties so that Mention and Label items resolve correctly:
<ejs-blockeditor id="blockeditor"
[blocks]="blocksData"
[users]="users"
[labelSettings]="labelSettings" />import { Component } from '@angular/core';
import { BlockEditorModule } from "@syncfusion/ej2-angular-blockeditor";
import { BlockModel, ContentType } from "@syncfusion/ej2-blockeditor";
@Component({
imports: [BlockEditorModule],
standalone: true,
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
public users = [
{ id: 'user1', user: 'John Doe' }
];
public labelSettings = {
items: [
{ id: 'label1', text: 'Bug', labelColor: '#ff5252', groupBy: 'Status' }
]
};
public blocksData: BlockModel[] = [
{
blockType: 'Heading',
properties: { level: 2 },
content: [
{
contentType: ContentType.Text,
content: 'Different Content Types'
}
]
},
{
blockType: 'Paragraph',
content: [
{
contentType: ContentType.Text,
content: 'The Block Editor supports various content types: '
},
{
contentType: ContentType.Link,
content: 'hyperlinks',
properties: {
url: 'https://ej2.syncfusion.com/documentation/',
}
},
{
contentType: ContentType.Text,
content: ', inline ',
},
{
contentType: ContentType.Text,
content: 'code snippets.',
properties: {
styles: { inlineCode: true },
}
},
{
contentType: ContentType.Text,
content: '\nUser mentions like'
},
{
contentType: ContentType.Mention,
properties: { userId: "user1" }
},
{
contentType: ContentType.Text,
content: ', and labels such as '
},
{
contentType: ContentType.Label,
properties: { labelId: 'label1' }
},
{
contentType: ContentType.Text,
content: '.'
}
]
}
];
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent).catch((err) => console.error(err));<div id="container">
<ejs-blockeditor id="blockeditor" [blocks]="blocksData" [users]="users" [labelSettings]="labelSettings" />
</div>Applying inline styles
The Block Editor allows you to apply rich formatting to a content item by setting properties.styles on that content model. The styles object supports the following options:
| Style Property | Description | Default Value |
|---|---|---|
| bold | Makes the text bold. | false |
| italic | Makes the text italicized. | false |
| underline | Adds an underline to the text. | false |
| strikethrough | Adds a line through the text. | false |
| color | Sets the text color (HEX or RGBA format). | '' |
| backgroundColor | Sets the background color for the text. | '' |
| superscript | Renders the text as superscript. | false |
| subscript | Renders the text as subscript. | false |
| uppercase | Converts the text to uppercase. | false |
| lowercase | Converts the text to lowercase. | false |
| inlineCode | Renders the text as an inline code span. | false |
You can apply one or more of these styles to any supported content element for rich text formatting.
import { Component } from '@angular/core';
import { BlockEditorModule } from "@syncfusion/ej2-angular-blockeditor";
import { BlockModel, ContentType} from "@syncfusion/ej2-blockeditor";
@Component({
imports: [BlockEditorModule],
standalone: true,
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
public blocksData: BlockModel[] = [
{
blockType: 'Heading',
properties: { level: 2},
content: [
{
contentType: ContentType.Text,
content: 'Content Styling Options'
}
]
},
{
blockType: 'Paragraph',
content: [
{
contentType: ContentType.Text,
content: 'Bold text: ',
properties: {
styles: {
bold: true,
color: '#1976d2'
}
}
},
{
contentType: ContentType.Text,
content: 'This text is bold.',
properties:{
styles: {
bold: true
}
}
}
]
},
{
blockType: 'Paragraph',
content: [
{
contentType: ContentType.Text,
content: 'Italic text: ',
properties:{
styles: {
bold: true,
color: '#1976d2'
}
}
},
{
contentType: ContentType.Text,
content: 'This text is italicized.',
properties:{
styles: {
italic: true
}
}
}
]
},
{
blockType: 'Paragraph',
content: [
{
contentType: ContentType.Text,
content: 'Text with color: ',
properties:{
styles: {
bold: true,
color: '#1976d2'
}
}
},
{
contentType: ContentType.Text,
content: 'This text has custom color.',
properties:{
styles: {
color: '#e91e63'
}
}
}
]
},
{
blockType: 'Paragraph',
content: [
{
contentType: ContentType.Text,
content: 'Text with background: ',
properties:{
styles: {
bold: true,
color: '#1976d2'
}
}
},
{
contentType: ContentType.Text,
content: 'This text has background color.',
properties:{
styles: {
backgroundColor: '#fff9c4'
}
}
}
]
},
{
blockType: 'Paragraph',
content: [
{
contentType: ContentType.Text,
content: 'Multiple styles: ',
properties:{
styles: {
bold: true,
color: '#1976d2'
}
}
},
{
contentType: ContentType.Text,
content: 'This text combines multiple styles.',
properties:{
styles: {
bold: true,
italic: true,
underline: true,
color: '#4caf50'
}
}
}
]
}
];
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent).catch((err) => console.error(err));<div id="container">
<ejs-blockeditor id="blockeditor" [blocks]="blocksData" />
</div>