Execute Command Programmatically

16 Nov 20226 minutes to read

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

HTML editor commands

The ExecuteCommand methods support following HTML editor 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);

    Underline

    Underline the selected content.

  • CSHTML
  • await this.RteObj.ExecuteCommandAsync(CommandName.Underline);

    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);

    FontColor

    Apply the specified font color to the selected content.

  • CSHTML
  • await this.RteObj.ExecuteCommandAsync(CommandName.FontColor, "Red");

    FontName

    Apply the specified font name to the selected content.

  • CSHTML
  • await this.RteObj.ExecuteCommandAsync(CommandName.FontName, "Impact");

    FontSize

    Apply the specified font size to the selected content.

  • CSHTML
  • await this.RteObj.ExecuteCommandAsync(CommandName.FontSize, "10pt");

    BackgroundColor

    Apply 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

    Allows you to increase the content's indentation level.

  • CSHTML
  • await this.RteObj.ExecuteCommandAsync(CommandName.Indent);

    InsertHTML

    Insert the HTML content at the current cursor position.

  • CSHTML
  • await this.RteObj.ExecuteCommandAsync(CommandName.InsertHTML,"<div>Syncfusion Rich Text Editor</div>");

    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);

    Outdent

    Allows you to decrease the content's indentation level.

  • 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

    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" });

    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.

    @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>");
        }
    }

    Blazor RichTextEditor execute command

    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" });
    @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" });
        }
    }

    Execute Command in Markdown Blazor RichTextEditor

    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.