Execute Command Programmatically

26 May 202611 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" });
Undo	Allows you to undo your actions.	CSHTML await this.RteObj.ExecuteCommandAsync(CommandName.Undo);
Format Block	Allows you to apply block-level formatting, such as headings (H1–H6) or paragraphs, to the selected text.	CSHTML await this.RteObj.ExecuteCommandAsync(CommandName.FormatBlock, "H3");
Heading	Allows you to directly apply the Heading 1 block style to the selected text.	CSHTML await this.RteObj.ExecuteCommandAsync(CommandName.Heading);
Insert Code Block	Allows you to insert a preformatted multi-line block by defining the syntax language identifier and its visual dropdown text label.	CSHTML await this.RteObj.ExecuteCommandAsync(CommandName.InsertCodeBlock, new CodeBlockCommandArgs() { Language = "typescript", Label = "TypeScript" });
Insert Paragraph	Allows you to insert a new paragraph block at the current cursor position.	CSHTML await this.RteObj.ExecuteCommandAsync(CommandName.InsertParagraph);
Insert Horizontal Rule	Allows you to insert a straight horizontal rule line element to serve as a thematic structural divider between text blocks.	CSHTML await this.RteObj.ExecuteCommandAsync(CommandName.InsertHorizontalRule);
Insert Br On Return	Configures the editor to insert a standard HTML line break element when the Enter key is pressed, rather than splitting the current block into a new paragraph.	CSHTML await this.RteObj.ExecuteCommandAsync(CommandName.InsertBrOnReturn);
Insert Code	Allows you to apply inline code formatting to the selected text for highlighting variables or short commands.	CSHTML await this.RteObj.ExecuteCommandAsync(CommandName.InsertCode);
Insert Table	Allows you to programmatically insert a structured HTML table layout component by declaring the exact row and column constraints.	CSHTML await this.RteObj.ExecuteCommandAsync(CommandName.InsertTable, new TableCommandArgs() { Row = 3, Columns = 3 });
Edit Image	Allows you to programmatically modify an existing image element's properties using specific source URLs, dimensions, and custom CSS classes.	CSHTML await this.RteObj.ExecuteCommandAsync( CommandName.EditImage, new ImageCommandsArgs() { Url = "https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Portrait.png", AltText = "Alternative description text", CssClass = "custom-img-style", Width = new CommandsWidth() { Width = "300px" }, Height = new CommandsHeight() { Height = "auto" } } );
Edit Link	Allows you to programmatically modify a hyperlink element by declaring the destination URL, display text, and title attributes.	CSHTML await this.RteObj.ExecuteCommandAsync( CommandName.EditLink, new LinkCommandsArgs() { Url = "https://", Text = "Syncfusion", Title = "Visit Home Page" } );
Video	Allows you to programmatically embed an interactive HTML5 video viewport by assigning specific media source URLs.	CSHTML await this.RteObj.ExecuteCommandAsync( CommandName.Video, new VideoCommandsArgs() { Url = "https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Ocean-Waves.mp4", CssClass = "e-rte-video" });
Audio	Allows you to programmatically embed an interactive HTML5 audio player tracking path by assigning specific media source URLs.	CSHTML await this.RteObj.ExecuteCommandAsync( CommandName.Audio, new AudioCommandsArgs() { Url = "https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Audio.wav", CssClass = "e-rte-audio" });
Checklist	Allows you to format the selected text as an interactive checklist.	CSHTML await this.RteObj.ExecuteCommandAsync(CommandName.Checklist);

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.