Inline Content in Vue Block Editor component

20 Dec 202524 minutes to read

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 id, 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 set to Text.

Configure text content

To configure text content, set the contentType property to Text. This is the default content type if none is specified.

ContentType

// 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

Link settings control the behavior and properties of hyperlinks in your content. You can configure link settings using the properties property.

Link settings accepts the following options:

Option	Description	Default Value
url	Specifies the destination URL of the link.	''

ContentType & Properties

{
    blockType: 'Paragraph',
    content: [
        {
            contentType: 'Link',
            content: 'hyperlinks',
            properties: {
                url: 'https://ej2.syncfusion.com/documentation'
            }
        }
    ]
}

Configure Label

To render labels, set the contentType property to Label. The properties property allows you to specify which label to display.

Built-in items

The Block Editor comes with offers different built-in options. These include:

• 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

Labels with the same groupBy value will be grouped together in the label selection popup:

The below sample demonstrates the customization of labels in the Block Editor.

Composition API (~/src/App.vue)

<template>
  <div id='container'>
    <ejs-blockeditor :blocks="blocksData" :labelSettings="labelSettings"></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: '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: { lableId: 'feature'}
            },
            {
                contentType: ContentType.Text,
                content: ' '
            },
            {
                contentType: ContentType.Label,
                properties: { lableId: 'critical'}
            }
        ]
    }
];
const labelSettings = {
    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' }
    ]
};

</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>

Options API (~/src/App.vue)

<template>
  <div id='container'>
    <ejs-blockeditor :blocks="blocksData" :labelSettings="labelSettings"></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: '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' }
                }
            ]
        }
      ],
    labelSettings : {
        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' }
        ]
    }
    };
  },
  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 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 in the Block Editor.

ContentType

// Adding inline code
{
    blockType: 'Paragraph',
    content: [
        {
            contentType: 'Mention',
            properties: { userId: 'user1' }
        } 
    ]
}

Below is an example of how to configure different types of content in the Block Editor.

Composition API (~/src/App.vue)

<template>
  <div id='container'>
    <ejs-blockeditor :blocks="blocksData" :users="users" :labelSettings="labelSettings"></ejs-blockeditor>
  </div>
</template>

<script setup>
import { BlockEditorComponent as EjsBlockeditor, ContentType } from "@syncfusion/ej2-vue-blockeditor";

const users = [
    { id: 'user1', user: 'John Doe' }
];

const labelSettings = {
    items: [
        { id: 'label1', text: 'Bug', labelColor: '#ff5252', groupHeader: 'Status' }
    ]
};

const blocksData = [
    {
            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: '.'
                }
            ]
        }
];

</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>

Options API (~/src/App.vue)

<template>
  <div id='container'>
    <ejs-blockeditor :blocks="blocksData" :users="users" :labelSettings="labelSettings"></ejs-blockeditor>
  </div>
</template>

<script>
import { BlockEditorComponent, ContentType } from "@syncfusion/ej2-vue-blockeditor";

export default {
  components: {
    'ejs-blockeditor': BlockEditorComponent,
  },
  data() {
    return {
        users: [
            { id: 'user1', user: 'John Doe' }
        ],
        labelSettings: {
            items: [
                { id: 'label1', text: 'Bug', labelColor: '#ff5252', groupHeader: 'Status' }
            ]
        },
      blocksData: [
          {
            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: '.'
                }
            ]
        }
      ]
    };
  },
  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>

Applying Inline Styles

The Block Editor allows you to apply rich formatting to block contents using the styles property.

The styles property 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	Converts the text to InlineCode.	false

You can apply one or more of these styles to any content element for rich text formatting:

Composition API (~/src/App.vue)

<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: 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'
                }
                }
            }
        ]
    }
];

</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>

Options API (~/src/App.vue)

<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: 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'
                        }
                        }
                    }
                ]
            }
      ]
    };
  },
  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>