Execute Command Programmatically
8 Jun 20229 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 | Bold the selected content. | await this.RteObj.ExecuteCommandAsync(CommandName.Bold); |
Italic | Apply the italic style for the selected content. | await this.RteObj.ExecuteCommandAsync(CommandName.Italic); |
Underline | Underline the selected content | await this.RteObj.ExecuteCommandAsync(CommandName.Underline); |
StrikeThrough | Apply single line strike through formatting for the selected content. | await this.RteObj.ExecuteCommandAsync(CommandName.StrikeThrough); |
Superscript | Makes the selected content as superscript (higher). | await this.RteObj.ExecuteCommandAsync(CommandName.Superscript); |
Subscript | Makes the selected content as subscript (lower). | await this.RteObj.ExecuteCommandAsync(CommandName.Subscript); |
Uppercase | Change the selected content into upper case. | await this.RteObj.ExecuteCommandAsync(CommandName.Uppercase); |
Lowercase | Change the selected content into lower case. | await this.RteObj.ExecuteCommandAsync(CommandName.Lowercase); |
FontColor | Apply the specified font color for the selected content. | await this.RteObj.ExecuteCommandAsync(CommandName.FontColor, "Red"); |
FontName | Apply the specified font name for the selected content. | await this.RteObj.ExecuteCommandAsync(CommandName.FontName, "Impact"); |
FontSize | Apply the specified font size for the selected content. | await this.RteObj.ExecuteCommandAsync(CommandName.FontSize, "10pt"); |
BackgroundColor | Apply the specified background color the selected content. | await this.RteObj.ExecuteCommandAsync(CommandName.BackgroundColor, "red"); |
JustifyCenter | Align the content with center margin. | await this.RteObj.ExecuteCommandAsync(CommandName.JustifyCenter); |
JustifyFull | Align the content with justify margin. | await this.RteObj.ExecuteCommandAsync(CommandName.JustifyFull); |
JustifyLeft | Align the content with left margin. | await this.RteObj.ExecuteCommandAsync(CommandName.JustifyLeft); |
JustifyRight | Align the content with right margin. | await this.RteObj.ExecuteCommandAsync(CommandName.JustifyRight); |
CreateLink | Creates a hyperlink to a text or image to a specific location in the content. | await this.RteObj.ExecuteCommandAsync(CommandName.CreateLink, new LinkCommandsArgs() { Text = "Links", Url= "http://", Title = "Link"});} |
Indent | Allows to increase the indent level of the content. | await this.RteObj.ExecuteCommandAsync(CommandName.Indent); |
InsertHTML | Insert the html content to the current cursor position. | await this.RteObj.ExecuteCommandAsync(CommandName.InsertHTML,"<div>Syncfusion Rich Text Editor |
InsertOrderedList | Create a new list item(numbered). | await this.RteObj.ExecuteCommandAsync(CommandName.InsertOrderedList); |
InsertUnorderedList | Create a new list item(bulleted). | await this.RteObj.ExecuteCommandAsync(CommandName.InsertUnorderedList); |
Outdent | Allows to decrease the indent level of the content. | await this.RteObj.ExecuteCommandAsync(CommandName.Outdent); |
Redo | Allows to redo the actions | await this.RteObj.ExecuteCommandAsync(CommandName.Redo); |
RemoveFormat | Remove all formatting styles (such as bold, italic, underline, color, superscript, subscript, and more) from currently selected text. | await this.RteObj.ExecuteCommandAsync(CommandName.RemoveFormat); |
InsertText | Insert text to the current cursor position. | await this.RteObj.ExecuteCommandAsync(CommandName.InsertText, "Inserted text"); |
InsertImage | Insert an image to the current cursor position. | 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>");
}
}
Markdown editor commands
The ExecuteCommand
methods support following Markdown commands.
Commands | Description | Code snippets |
---|---|---|
Bold | Bold the selected content in markdown mode. | await this.RteObj.ExecuteCommandAsync(CommandName.Bold); |
Italic | Apply the italic style for the selected content in markdown mode. | await this.RteObj.ExecuteCommandAsync(CommandName.Italic); |
StrikeThrough | Apply single line strike through formatting for the selected content in markdown mode. | await this.RteObj.ExecuteCommandAsync(CommandName.StrikeThrough); |
Superscript | Makes the selected content as superscript (higher) in markdown mode. | await this.RteObj.ExecuteCommandAsync(CommandName.Superscript); |
Subscript | Makes the selected content as subscript (lower) in markdown mode. | await this.RteObj.ExecuteCommandAsync(CommandName.Subscript); |
Uppercase | Change the selected content into upper case in markdown mode. | await this.RteObj.ExecuteCommandAsync(CommandName.Uppercase); |
Lowercase | Change the selected content into lower case in markdown mode. | await this.RteObj.ExecuteCommandAsync(CommandName.Lowercase); |
CreateLink | Creates a hyperlink to a content or image to a specific location in the content in markdown mode. | await this.RteObj.ExecuteCommandAsync(CommandName.CreateLink, new LinkCommandsArgs() { Text = "Links", Url= "http://", Title = "Link"});} |
InsertOrderedList | Create a new list item(numbered) in markdown mode. | await this.RteObj.ExecuteCommandAsync(CommandName.InsertOrderedList); |
InsertUnorderedList | Create a new list item(bulleted) in markdown mode. | await this.RteObj.ExecuteCommandAsync(CommandName.InsertUnorderedList); |
Redo | Allows to redo the actions | await this.RteObj.ExecuteCommandAsync(CommandName.Redo); |
InsertImage | Insert an image to the current cursor position in markdowm mode. | 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.RichTextEditor
@using Syncfusion.Blazor.Buttons
<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" });
}
}
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.