Insert Table in Blazor Markdown Editor Component
18 Mar 20251 minute to read
The Syncfusion Blazor Markdown Editor provides built-in support for inserting tables, allowing users to create and customize tables effortlessly within the editor.
Enable Table Insertion in Blazor Markdown Editor
To enable the table insertion feature, add the CreateTable option to the toolbar items. Once added, users can click the Table icon in the toolbar to insert a table into the editor.
By default, when a table is inserted, it consists of:
- 2 rows and 2 columns
- A table header row
This ensures that users can start formatting and adding content immediately.
@using Syncfusion.Blazor.RichTextEditor
<SfRichTextEditor EditorMode="EditorMode.Markdown" Height="340px" Placeholder="Type Something" Value="@MarkdownValue">
<RichTextEditorToolbarSettings Items="@Tools" />
</SfRichTextEditor>
@code {
private string MarkdownValue { get; set; } = @"In Rich Text Editor, you click the toolbar buttons to format the words and
the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.";
private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>()
{
new ToolbarItemModel() { Command = ToolbarCommand.CreateTable }
};
}