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>.OnContextMenu

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.RaiseContextMenu

RadzenComponent.RaiseMouseEnter

RadzenComponent.AddContextMenu

RadzenComponent.RaiseMouseLeave

RadzenComponent.OnBecameInvisible

RadzenComponent.Attributes

RadzenComponent.Element

RadzenComponent.MouseEnter

RadzenComponent.MouseLeave

RadzenComponent.ContextMenu

RadzenComponent.Culture

RadzenComponent.DefaultCulture

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

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

Gets or sets the child content.

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

Executelink

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

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

Gets or sets the input.

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

Modelink

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

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

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

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.

UploadCompletelink

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

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

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

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

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

Disposelink

Declaration
public override void Dispose()

ExecuteCommandAsynclink

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

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

FocusAsynclink

Focuses the editor.

Declaration
public override ValueTask FocusAsync()
Returns
Type Description
ValueTask

GetComponentCssClasslink

Declaration
protected override string GetComponentCssClass()
Returns
Type Description
string

GetHeaderslink

Invoked by interop during uploads. Provides the custom headers.

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

GetModelink

Returns the current mode of the editor.

Declaration
public HtmlEditorMode GetMode()
Returns
Type Description
HtmlEditorMode

GetSelectionAttributeslink

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.

OnAfterRenderAsynclink

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

OnChangelink

Invoked via interop when the value of RadzenHtmlEditor changes.

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

OnErrorlink

Called on upload error.

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

OnInitializedlink

Declaration
protected override void OnInitialized()

OnPastelink

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

Invoked by interop when the RadzenHtmlEditor selection changes.

Declaration
public Task OnSelectionChange()
Returns
Type Description
Task

OnUploadCompletelink

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

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

Restores the last saved selection.

Declaration
public Task RestoreSelectionAsync()
Returns
Type Description
Task

SaveSelectionAsynclink

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

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

UnregisterShortcutlink

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 🗙