RadzenHtmlEditor Class

A rich text HTML editor component with WYSIWYG editing, formatting toolbar, image upload, and custom tool support. RadzenHtmlEditor provides a full-featured editor for creating and editing formatted content with a Microsoft Word-like interface. Allows users to create rich formatted content without knowing HTML. Features WYSIWYG (what-you-see-is-what-you-get) visual editing interface, formatting tools (bold, italic, underline, font selection, colors, alignment, lists, links, images), built-in image upload with configurable upload URL, custom toolbar buttons via RadzenHtmlEditorCustomTool, toggle between visual editing and HTML source code view, paste filtering to remove unwanted HTML when pasting from other sources, and programmatic execution of formatting commands via ExecuteCommandAsync(). The Value property contains HTML markup. Use UploadUrl to configure where images are uploaded. Add custom tools for domain-specific functionality like inserting templates or special content.

Inheritance

Object

ComponentBase

RadzenComponent

FormComponent<string>

RadzenHtmlEditor

Implements

IComponent

IHandleEvent

IHandleAfterRender

IRadzenFormComponent

Inherited Members

FormComponent<string>.GetValue

FormComponent<string>.NotifyFieldChanged

FormComponent<string>.GetClassList

FormComponent<string>.Name

FormComponent<string>.TabIndex

FormComponent<string>.Placeholder

FormComponent<string>.Disabled

FormComponent<string>.EditContext

FormComponent<string>.Form

FormComponent<string>.ValueChanged

FormComponent<string>.HasValue

FormComponent<string>.IsBound

FormComponent<string>.Value

FormComponent<string>.Change

FormComponent<string>.FieldIdentifier

FormComponent<string>.ValueExpression

FormComponent<string>.FormFieldContext

FormComponent<string>.CurrentPlaceholder

FormComponent<string>._value

RadzenComponent.OnMouseEnter

RadzenComponent.OnMouseLeave

RadzenComponent.GetCssClass

RadzenComponent.GetId

RadzenComponent.Debounce

RadzenComponent.Localize

RadzenComponent.RaiseContextMenu

RadzenComponent.RaiseMouseEnter

RadzenComponent.AddContextMenu

RadzenComponent.RaiseMouseLeave

RadzenComponent.OnBecameInvisible

RadzenComponent.Attributes

RadzenComponent.Element

RadzenComponent.MouseEnter

RadzenComponent.MouseLeave

RadzenComponent.ContextMenu

RadzenComponent.Culture

RadzenComponent.DefaultCulture

RadzenComponent.UICulture

RadzenComponent.DefaultUICulture

RadzenComponent.Style

RadzenComponent.Visible

RadzenComponent.UniqueID

RadzenComponent.JSRuntime

RadzenComponent.IsJSRuntimeAvailable

RadzenComponent.Reference

RadzenComponent.CurrentStyle

ComponentBase.OnInitializedAsync

ComponentBase.OnParametersSet

ComponentBase.OnParametersSetAsync

ComponentBase.StateHasChanged

ComponentBase.ShouldRender

ComponentBase.OnAfterRender

ComponentBase.InvokeAsync

ComponentBase.DispatchExceptionAsync

ComponentBase.RendererInfo

ComponentBase.Assets

ComponentBase.AssignedRenderMode

Namespace: Radzen.Blazor

Assembly: Radzen.Blazor.dll

Syntax

public class RadzenHtmlEditor : FormComponent<string>, IComponent, IHandleEvent, IHandleAfterRender, IRadzenFormComponent

Examples

Basic HTML editor:

<RadzenHtmlEditor @bind-Value=@htmlContent Style="height: 400px;" />
@code {
    string htmlContent = "<p>Enter content here...</p>";
}

Editor with image upload:

<RadzenHtmlEditor @bind-Value=@content UploadUrl="api/upload/image" UploadHeaders=@uploadHeaders>
    <RadzenHtmlEditorBold />
    <RadzenHtmlEditorItalic />
    <RadzenHtmlEditorUnderline />
    <RadzenHtmlEditorSeparator />
    <RadzenHtmlEditorImage />
</RadzenHtmlEditor>

Editor with custom tool:

<RadzenHtmlEditor @bind-Value=@html Execute=@OnExecute>
    <RadzenHtmlEditorCustomTool CommandName="InsertDate" Icon="calendar_today" Title="Insert Current Date" />
</RadzenHtmlEditor>
@code {
    async Task OnExecute(HtmlEditorExecuteEventArgs args)
    {
        if (args.CommandName == "InsertDate")
        {
            await args.Editor.ExecuteCommandAsync(HtmlEditorCommands.InsertHtml, DateTime.Today.ToLongDateString());
        }
    }
}

Constructors

RadzenHtmlEditorLink to this section

A rich text HTML editor component with WYSIWYG editing, formatting toolbar, image upload, and custom tool support. RadzenHtmlEditor provides a full-featured editor for creating and editing formatted content with a Microsoft Word-like interface. Allows users to create rich formatted content without knowing HTML. Features WYSIWYG (what-you-see-is-what-you-get) visual editing interface, formatting tools (bold, italic, underline, font selection, colors, alignment, lists, links, images), built-in image upload with configurable upload URL, custom toolbar buttons via RadzenHtmlEditorCustomTool, toggle between visual editing and HTML source code view, paste filtering to remove unwanted HTML when pasting from other sources, and programmatic execution of formatting commands via ExecuteCommandAsync(). The Value property contains HTML markup. Use UploadUrl to configure where images are uploaded. Add custom tools for domain-specific functionality like inserting templates or special content.

Declaration
public RadzenHtmlEditor()

Properties

ChildContentLink to this section

Gets or sets the child content.

Declaration
public RenderFragment ChildContent { get; set; }
Property Value
Type Description
RenderFragmentGets or sets the child content.

ExecuteLink to this section

A callback that will be invoked when the user executes a command of the editor (e.g. by clicking one of the tools).

Declaration
public EventCallback<HtmlEditorExecuteEventArgs> Execute { get; set; }
Property Value
Type Description
EventCallback<HtmlEditorExecuteEventArgs>A callback that will be invoked when the user executes a command of the editor (e.g. by clicking one of the tools).
Examples
<RadzenHtmlEditor Execute=@OnExecute>
  <RadzenHtmlEditorCustomTool CommandName="InsertToday" Icon="today" Title="Insert today" />
</RadzenHtmlEditor>
@code {
  string html = "@lt;strong>Hello</strong> world!";
  async Task OnExecute(HtmlEditorExecuteEventArgs args)
  {
    if (args.CommandName == "InsertToday")
    {
      await args.Editor.ExecuteCommandAsync(HtmlEditorCommands.InsertHtml, DateTime.Today.ToLongDateString());
    }
 }

ImmediateLink to this section

Gets or sets a value indicating whether the source editor should update the value on every keystroke. When true, typing in the HTML source textarea invokes change immediately instead of on blur. Set to false by default.

Declaration
public bool Immediate { get; set; }
Property Value
Type Description
boolGets or sets a value indicating whether the source editor should update the value on every keystroke. When true, typing in the HTML source textarea invokes change immediately instead of on blur. Set to false by default.

InputLink to this section

Gets or sets the input.

Declaration
public EventCallback<string> Input { get; set; }
Property Value
Type Description
EventCallback<string>Gets or sets the input.

ModeLink to this section

Gets or sets the editor mode determining whether users see the visual editor or HTML source code. Design mode shows WYSIWYG editing, Source mode shows raw HTML for advanced users.

Declaration
public HtmlEditorMode Mode { get; set; }
Property Value
Type Description
HtmlEditorModeGets or sets the editor mode determining whether users see the visual editor or HTML source code. Design mode shows WYSIWYG editing, Source mode shows raw HTML for advanced users.

PasteLink to this section

A callback that will be invoked when the user pastes content in the editor. Commonly used to filter unwanted HTML.

Declaration
public EventCallback<HtmlEditorPasteEventArgs> Paste { get; set; }
Property Value
Type Description
EventCallback<HtmlEditorPasteEventArgs>A callback that will be invoked when the user pastes content in the editor. Commonly used to filter unwanted HTML.
Examples
<RadzenHtmlEditor @bind-Value=@html Paste=@OnPaste />
@code {
  string html = "@lt;strong>Hello</strong> world!";
  void OnPaste(HtmlEditorPasteEventArgs args)
  {
    // Set args.Html to filter unwanted tags.
    args.Html = args.Html.Replace("<br>", "");
  }

ShowToolbarLink to this section

Gets or sets whether to display the formatting toolbar above the editor. When false, hides the toolbar but editing is still possible. Useful for read-only or simplified views.

Declaration
public bool ShowToolbar { get; set; }
Property Value
Type Description
boolGets or sets whether to display the formatting toolbar above the editor. When false, hides the toolbar but editing is still possible. Useful for read-only or simplified views.

StateLink to this section

Represents the current state of the toolbar commands and other functionalities within the RadzenHtmlEditor component. Updated dynamically based on user actions or programmatically invoked commands.

Declaration
public RadzenHtmlEditorCommandState State { get; set; }
Property Value
Type Description
RadzenHtmlEditorCommandStateRepresents the current state of the toolbar commands and other functionalities within the RadzenHtmlEditor component. Updated dynamically based on user actions or programmatically invoked commands.

TableSelectionLink to this section

Gets the current table selection state.

Declaration
public HtmlEditorTableSelection TableSelection { get; }
Property Value
Type Description
HtmlEditorTableSelectionGets the current table selection state.

TableStringsLink to this section

Gets or sets localizable strings used by the table tools.

Declaration
public HtmlEditorTableStrings TableStrings { get; set; }
Property Value
Type Description
HtmlEditorTableStringsGets or sets localizable strings used by the table tools.

UploadCompleteLink to this section

Gets or sets the callback which when a file is uploaded.

Declaration
public EventCallback<UploadCompleteEventArgs> UploadComplete { get; set; }
Property Value
Type Description
EventCallback<UploadCompleteEventArgs>Gets or sets the callback which when a file is uploaded.

UploadErrorLink to this section

A callback that will be invoked when there is an error during upload.

Declaration
public EventCallback<UploadErrorEventArgs> UploadError { get; set; }
Property Value
Type Description
EventCallback<UploadErrorEventArgs>A callback that will be invoked when there is an error during upload.

UploadHeadersLink to this section

Specifies custom headers that will be submit during uploads.

Declaration
public IDictionary<string, string> UploadHeaders { get; set; }
Property Value
Type Description
IDictionary<string, string>Specifies custom headers that will be submit during uploads.

UploadUrlLink to this section

Specifies the URL to which RadzenHtmlEditor will submit files.

Declaration
public string UploadUrl { get; set; }
Property Value
Type Description
stringSpecifies the URL to which RadzenHtmlEditor will submit files.

Methods

BuildRenderTreeLink to this section

Declaration
protected override void BuildRenderTree(Rendering.RenderTreeBuilder __builder)
Parameters
Type Name Description
Rendering.RenderTreeBuilder __builder

DisposeLink to this section

Declaration
public override void Dispose()

ExecuteCommandAsyncLink to this section

Executes the requested command with the provided value. Check HtmlEditorCommands for the list of supported commands.

Declaration
public Task ExecuteCommandAsync(string name, string value)
Parameters
Type Name Description
string name The name.
string value The value.
Returns
Type Description
Task

ExecuteShortcutAsyncLink to this section

Executes the action associated with the specified shortcut. Used internally by RadzenHtmlEditor.

Declaration
public Task ExecuteShortcutAsync(string shortcut)
Parameters
Type Name Description
string shortcut
Returns
Type Description
Task

ExecuteTableCommandAsyncLink to this section

Executes a table command for the currently selected table.

Declaration
public Task ExecuteTableCommandAsync(string name, HtmlEditorTableCommandArgs value)
Parameters
Type Name Description
string name The table command name.
HtmlEditorTableCommandArgs value Optional table command arguments.
Returns
Type Description
Task

FocusAsyncLink to this section

Focuses the editor.

Declaration
public override ValueTask FocusAsync()
Returns
Type Description
ValueTask

GetComponentCssClassLink to this section

Declaration
protected override string GetComponentCssClass()
Returns
Type Description
string

GetHeadersLink to this section

Invoked by interop during uploads. Provides the custom headers.

Declaration
public IDictionary<string, string> GetHeaders()
Returns
Type Description
IDictionary<string, string>

GetModeLink to this section

Returns the current mode of the editor.

Declaration
public HtmlEditorMode GetMode()
Returns
Type Description
HtmlEditorMode

GetSelectionAttributesLink to this section

Retrieves the specified attributes of a selection within the content editable area.

Declaration
public ValueTask<T> GetSelectionAttributes(string selector, String[] attributes)
Parameters
Type Name Description
string selector The CSS selector used to target the element.
String[] attributes An array of attribute names to retrieve.
Returns
Type Description
ValueTask<T>A task that represents the asynchronous operation, returning the attributes as an object of type T.

GetTableSelectionAsyncLink to this section

Gets information about the currently selected table, if any.

Declaration
public ValueTask<HtmlEditorTableSelection> GetTableSelectionAsync()
Returns
Type Description
ValueTask<HtmlEditorTableSelection>

OnAfterRenderAsyncLink to this section

Declaration
protected override Task OnAfterRenderAsync(bool firstRender)
Parameters
Type Name Description
bool firstRender
Returns
Type Description
Task

OnChangeLink to this section

Invoked via interop when the value of RadzenHtmlEditor changes.

Declaration
public void OnChange(string html)
Parameters
Type Name Description
string html The HTML.

OnContextMenuLink to this section

Invoked by interop when the user opens the context menu inside the editor.

Declaration
public Task OnContextMenu(double clientX, double clientY)
Parameters
Type Name Description
double clientX The horizontal mouse position.
double clientY The vertical mouse position.
Returns
Type Description
Task

OnErrorLink to this section

Called on upload error.

Declaration
public Task OnError(string error)
Parameters
Type Name Description
string error The error.
Returns
Type Description
Task

OnInitializedLink to this section

Declaration
protected override void OnInitialized()

OnPasteLink to this section

Invoked via interop when the user pastes content in RadzenHtmlEditor. Invokes Paste.

Declaration
public Task<string> OnPaste(string html)
Parameters
Type Name Description
string html The HTML.
Returns
Type Description
Task<string>

OnSelectionChangeLink to this section

Invoked by interop when the RadzenHtmlEditor selection changes.

Declaration
public Task OnSelectionChange()
Returns
Type Description
Task

OnUploadCompleteLink to this section

Invoked by interop when the upload is complete.

Declaration
public Task OnUploadComplete(string response)
Parameters
Type Name Description
string response
Returns
Type Description
Task

RegisterShortcutLink to this section

Registers a shortcut for the specified action.

Declaration
public void RegisterShortcut(string key, Func<Task> action)
Parameters
Type Name Description
string key The shortcut. Can be combination of keys such as CTRL+B.
Func<Task> action The action to execute.

RestoreSelectionAsyncLink to this section

Restores the last saved selection.

Declaration
public Task RestoreSelectionAsync()
Returns
Type Description
Task

SaveSelectionAsyncLink to this section

Saves the current selection. RadzenHtmlEditor will lose its selection when it loses focus. Use this method to persist the current selection.

Declaration
public Task SaveSelectionAsync()
Returns
Type Description
Task

SetParametersAsyncLink to this section

Declaration
public override Task SetParametersAsync(ParameterView parameters)
Parameters
Type Name Description
ParameterView parameters
Returns
Type Description
Task

UnregisterShortcutLink to this section

Unregisters the specified shortcut.

Declaration
public void UnregisterShortcut(string key)
Parameters
Type Name Description
string key
An error has occurred. This app may no longer respond until reloaded. Reload 🗙