Execute Command Programmatically

7 Oct 20257 minutes to read

In the Rich Text Editor, the ExecuteCommand method runs HTML and Markdown commands programmatically to manipulate content in the current editable area.

HTML editor commands

The ExecuteCommand method supports the following HTML editor commands.

Commands	Description	Code snippets
Bold	Applies bold formatting to the selected content.	CSHTML await this.RteObj.ExecuteCommandAsync(CommandName.Bold);
Italic	Applies italic formatting to the selected content.	CSHTML await this.RteObj.ExecuteCommandAsync(CommandName.Italic);
Underline	Underlines the selected content.	CSHTML await this.RteObj.ExecuteCommandAsync(CommandName.Underline);
StrikeThrough	Applies single-line strikethrough formatting to the selected content.	CSHTML await this.RteObj.ExecuteCommandAsync(CommandName.StrikeThrough);
Superscript	Applies superscript (higher) formatting to the selected content.	CSHTML await this.RteObj.ExecuteCommandAsync(CommandName.Superscript);
Subscript	Applies subscript (lower) formatting to the selected content.	CSHTML await this.RteObj.ExecuteCommandAsync(CommandName.Subscript);
Uppercase	Changes the selected content to uppercase.	CSHTML await this.RteObj.ExecuteCommandAsync(CommandName.Uppercase);
Lowercase	Changes the selected content to lowercase.	CSHTML await this.RteObj.ExecuteCommandAsync(CommandName.Lowercase);
FontColor	Applies the specified font color to the selected content.	CSHTML await this.RteObj.ExecuteCommandAsync(CommandName.FontColor, "Red");
FontName	Applies the specified font family to the selected content.	CSHTML await this.RteObj.ExecuteCommandAsync(CommandName.FontName, "Impact");
FontSize	Applies the specified font size to the selected content.	CSHTML await this.RteObj.ExecuteCommandAsync(CommandName.FontSize, "10pt");
BackgroundColor	Applies the specified background color to the selected content.	CSHTML await this.RteObj.ExecuteCommandAsync(CommandName.BackgroundColor, "red");
JustifyCenter	Align the content with the centre margin.	CSHTML await this.RteObj.ExecuteCommandAsync(CommandName.JustifyCenter);
JustifyFull	Align the content with justify margin.	CSHTML await this.RteObj.ExecuteCommandAsync(CommandName.JustifyFull);
JustifyLeft	Align the content with the left margin.	CSHTML await this.RteObj.ExecuteCommandAsync(CommandName.JustifyLeft);
JustifyRight	Align the content with the margin on the right.	CSHTML await this.RteObj.ExecuteCommandAsync(CommandName.JustifyRight);
CreateLink	Creates a hyperlink from a text or image to a specific location in the content.	CSHTML await this.RteObj.ExecuteCommandAsync(CommandName.CreateLink, new LinkCommandsArgs() { Text = "Links", Url= "http://", Title = "Link"});
Indent	Increases the indentation level of the content.	CSHTML await this.RteObj.ExecuteCommandAsync(CommandName.Indent);
InsertHTML	Inserts the specified HTML at the current cursor position.	CSHTML await this.RteObj.ExecuteCommandAsync(CommandName.InsertHTML,"<div>Syncfusion Rich Text Editor</div>");
InsertOrderedList	Creates a new numbered list item.	CSHTML await this.RteObj.ExecuteCommandAsync(CommandName.InsertOrderedList);
InsertUnorderedList	Creates a new bulleted list item.	CSHTML await this.RteObj.ExecuteCommandAsync(CommandName.InsertUnorderedList);
NumberFormatList	Creates an ordered list with customizable numbering styles. See the available formats here.	CSHTML await this.RteObj.ExecuteCommandAsync(CommandName.NumberFormatList, "Decimal");
BulletFormatList	Creates an unordered list with customizable bullet styles. See the available formats here.	CSHTML await this.RteObj.ExecuteCommandAsync(CommandName.BulletFormatList, "Disc");
Outdent	Decreases the indentation level of the content.	CSHTML await this.RteObj.ExecuteCommandAsync(CommandName.Outdent);
Redo	Allows you to redo your actions.	CSHTML await this.RteObj.ExecuteCommandAsync(CommandName.Redo);
RemoveFormat	Remove all formatting styles (such as bold, italic, underline, color, superscript, subscript, and more) from the currently selected text.	CSHTML await this.RteObj.ExecuteCommandAsync(CommandName.RemoveFormat);
InsertText	Inserts text at the current cursor position.	CSHTML await this.RteObj.ExecuteCommandAsync(CommandName.InsertText, "Inserted text");
InsertImage	Inserts an image at the current cursor position.	CSHTML await this.RteObj.ExecuteCommandAsync(CommandName.InsertImage, new ImageCommandsArgs() { Url = "https://ej2.syncfusion.com/javascript/demos/src/rich-text-editor/images/RTEImage-Feather.png", CssClass = "rte-img" });

NOTE

Provided support to apply execute commands which do not require direct DOM access.

The following code block demonstrates the usage of the ExecuteCommand in Rich Text Editor.

CSHTML

@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.RichTextEditor

<SfRichTextEditor @ref="@RteObj">
    <p>The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p>
</SfRichTextEditor>
<SfButton Content="Bold" @onclick="@OnBoldCommand" />
<SfButton Content="InsertHTML" @onclick="@OnInsertHtmlCommand" />

@code {
    SfRichTextEditor RteObj;

    private async Task OnBoldCommand()
    {
        await this.RteObj.ExecuteCommandAsync(CommandName.Bold);
    }

    private async Task OnInsertHtmlCommand()
    {
        await this.RteObj.ExecuteCommandAsync(CommandName.InsertHTML, "<div>Syncfusion Rich Text Editor component</div>");
    }
}

Markdown editor commands

The ExecuteCommand methods support following markdown commands.

Commands	Description	Code snippets
Bold	Make the selected content bold.	CSHTML await this.RteObj.ExecuteCommandAsync(CommandName.Bold);
Italic	Apply the italic style to the selected content.	CSHTML await this.RteObj.ExecuteCommandAsync(CommandName.Italic);
StrikeThrough	Apply single-line strikethrough formatting for the selected content.	CSHTML await this.RteObj.ExecuteCommandAsync(CommandName.StrikeThrough);
Superscript	Makes the selected content as superscript (higher).	CSHTML await this.RteObj.ExecuteCommandAsync(CommandName.Superscript);
Subscript	Makes the selected content as subscript (lower).	CSHTML await this.RteObj.ExecuteCommandAsync(CommandName.Subscript);
Uppercase	Change the selected content to upper case.	CSHTML await this.RteObj.ExecuteCommandAsync(CommandName.Uppercase);
Lowercase	Change the selected content to lower case.	CSHTML await this.RteObj.ExecuteCommandAsync(CommandName.Lowercase);
CreateLink	Creates a hyperlink from a text or image to a specific location in the content.	CSHTML await this.RteObj.ExecuteCommandAsync(CommandName.CreateLink, new LinkCommandsArgs() { Text = "Links", Url= "http://", Title = "Link"});
InsertOrderedList	Create a new list item(numbered).	CSHTML await this.RteObj.ExecuteCommandAsync(CommandName.InsertOrderedList);
InsertUnorderedList	Create a new list item(bulleted).	CSHTML await this.RteObj.ExecuteCommandAsync(CommandName.InsertUnorderedList);
Redo	Allows you to redo your actions.	CSHTML await this.RteObj.ExecuteCommandAsync(CommandName.Redo);
InsertText	Text will be inserted at the current cursor position.	CSHTML await this.RteObj.ExecuteCommandAsync(CommandName.InsertText, "Inserted text");
InsertImage	Insert an image to the current cursor position.	CSHTML await this.RteObj.ExecuteCommandAsync(CommandName.InsertImage, new ImageCommandsArgs() { Url = "https://ej2.syncfusion.com/javascript/demos/src/rich-text-editor/images/RTEImage-Feather.png", CssClass = "rte-img" });

CSHTML

@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.RichTextEditor

<SfRichTextEditor @ref="@RteObj" EditorMode="EditorMode.Markdown">
    <p>The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p>
</SfRichTextEditor>
<SfButton Content="Bold" @onclick="@OnBoldCommand" />
<SfButton Content="Insert Image" @onclick="@OnInsertImageCommand" />

@code {
    SfRichTextEditor RteObj;
    private async Task OnBoldCommand()
    {
        await this.RteObj.ExecuteCommandAsync(CommandName.Bold);
    }
    private async Task OnInsertImageCommand()
    {
        await this.RteObj.ExecuteCommandAsync(CommandName.InsertImage, new ImageCommandsArgs() { Url = "https://ej2.syncfusion.com/javascript/demos/src/rich-text-editor/images/RTEImage-Feather.png", CssClass = "rte-img" });
    }
}

NOTE

You can refer to our Blazor Rich Text Editor feature tour page for its groundbreaking feature representations. You can also explore our Blazor Rich Text Editor example to knows how to render and configure the rich text editor tools.