Class RadzenHtmlEditor

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

IDisposable

IRadzenFormComponent

Inherited Members

FormComponent<string>._value

FormComponent<string>.GetValue()

FormComponent<string>.OnContextMenu(MouseEventArgs)

FormComponent<string>.GetClassList(string)

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

RadzenComponent.OnMouseEnter()

RadzenComponent.OnMouseLeave()

RadzenComponent.GetCssClass()

RadzenComponent.GetId()

RadzenComponent.Debounce(Func<Task>, int)

RadzenComponent.RaiseContextMenu(MouseEventArgs)

RadzenComponent.RaiseMouseEnter()

RadzenComponent.AddContextMenu()

RadzenComponent.RaiseMouseLeave()

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(bool)

ComponentBase.InvokeAsync(Action)

ComponentBase.InvokeAsync(Func<Task>)

ComponentBase.DispatchExceptionAsync(Exception)

object.GetType()

object.MemberwiseClone()

object.ToString()

object.Equals(object)

object.Equals(object, object)

object.ReferenceEquals(object, object)

object.GetHashCode()

Namespace: Radzen.Blazor

Assembly: Radzen.Blazor.dll

Syntax

public class RadzenHtmlEditor : FormComponent<string>, IComponent, IHandleEvent, IHandleAfterRender, IDisposable, 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

RadzenHtmlEditor()

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

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

Properties

ChildContent

Gets or sets the child content.

Declaration

[Parameter]
public RenderFragment ChildContent { get; set; }

Property Value

Type	Description
RenderFragment	The child content.

Execute

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

Declaration

[Parameter]
public EventCallback<HtmlEditorExecuteEventArgs> Execute { get; set; }

Property Value

Type	Description
EventCallback<HtmlEditorExecuteEventArgs>

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

Input

Gets or sets the input.

Declaration

[Parameter]
public EventCallback<string> Input { get; set; }

Property Value

Type	Description
EventCallback<string>	The input.

Mode

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

[Parameter]
public HtmlEditorMode Mode { get; set; }

Property Value

Type	Description
HtmlEditorMode	The editor mode. Default is Design.

Paste

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

Declaration

[Parameter]
public EventCallback<HtmlEditorPasteEventArgs> Paste { get; set; }

Property Value

Type	Description
EventCallback<HtmlEditorPasteEventArgs>

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

ShowToolbar

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

[Parameter]
public bool ShowToolbar { get; set; }

Property Value

Type	Description
bool	true to show the toolbar; false to hide it. Default is true.

State

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
RadzenHtmlEditorCommandState

UploadComplete

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

Declaration

[Parameter]
public EventCallback<UploadCompleteEventArgs> UploadComplete { get; set; }

Property Value

Type	Description
EventCallback<UploadCompleteEventArgs>	The complete callback.

UploadError

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

Declaration

[Parameter]
public EventCallback<UploadErrorEventArgs> UploadError { get; set; }

Property Value

Type	Description
EventCallback<UploadErrorEventArgs>

UploadHeaders

Specifies custom headers that will be submit during uploads.

Declaration

[Parameter]
public IDictionary<string, string> UploadHeaders { get; set; }

Property Value

Type	Description
IDictionary<string, string>

UploadUrl

Specifies the URL to which RadzenHtmlEditor will submit files.

Declaration

[Parameter]
public string UploadUrl { get; set; }

Property Value

Type	Description
string

Methods

BuildRenderTree(RenderTreeBuilder)

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

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
RenderTreeBuilder	__builder

Overrides

ComponentBase.BuildRenderTree(RenderTreeBuilder)

Dispose()

Disposes this instance.

Declaration

public override void Dispose()

Overrides

FormComponent<string>.Dispose()

ExecuteCommandAsync(string, string)

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

Declaration

public Task ExecuteCommandAsync(string name, string value = null)

Parameters

Type	Name	Description
string	name	The name.
string	value	The value.

Returns

Type	Description
Task

ExecuteShortcutAsync(string)

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

Declaration

[JSInvokable("ExecuteShortcutAsync")]
public Task ExecuteShortcutAsync(string shortcut)

Parameters

Type	Name	Description
string	shortcut

Returns

Type	Description
Task

FocusAsync()

Focuses the editor.

Declaration

public override ValueTask FocusAsync()

Returns

Type	Description
ValueTask

Overrides

FormComponent<string>.FocusAsync()

GetComponentCssClass()

Gets the component CSS class.

Declaration

protected override string GetComponentCssClass()

Returns

Type	Description
string

Overrides

RadzenComponent.GetComponentCssClass()

GetHeaders()

Invoked by interop during uploads. Provides the custom headers.

Declaration

[JSInvokable("GetHeaders")]
public IDictionary<string, string> GetHeaders()

Returns

Type	Description
IDictionary<string, string>

GetMode()

Returns the current mode of the editor.

Declaration

public HtmlEditorMode GetMode()

Returns

Type	Description
HtmlEditorMode

GetSelectionAttributes<T>(string, string[])

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

Declaration

public ValueTask<T> GetSelectionAttributes<T>(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.

Type Parameters

Name	Description
T	The type of attributes to retrieve.

OnAfterRenderAsync(bool)

Called by the Blazor runtime.

Declaration

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

Type	Name	Description
bool	firstRender

Returns

Type	Description
Task

Overrides

RadzenComponent.OnAfterRenderAsync(bool)

OnChange(string)

Invoked via interop when the value of RadzenHtmlEditor changes.

Declaration

[JSInvokable]
public void OnChange(string html)

Parameters

Type	Name	Description
string	html	The HTML.

OnError(string)

Called on upload error.

Declaration

[JSInvokable("OnError")]
public Task OnError(string error)

Parameters

Type	Name	Description
string	error	The error.

Returns

Type	Description
Task

OnInitialized()

Called by the Blazor runtime.

Declaration

protected override void OnInitialized()

Overrides

RadzenComponent.OnInitialized()

OnPaste(string)

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

Declaration

[JSInvokable]
public Task<string> OnPaste(string html)

Parameters

Type	Name	Description
string	html	The HTML.

Returns

Type	Description
Task<string>

OnSelectionChange()

Invoked by interop when the RadzenHtmlEditor selection changes.

Declaration

[JSInvokable]
public Task OnSelectionChange()

Returns

Type	Description
Task

OnUploadComplete(string)

Invoked by interop when the upload is complete.

Declaration

[JSInvokable("OnUploadComplete")]
public Task OnUploadComplete(string response)

Parameters

Type	Name	Description
string	response

Returns

Type	Description
Task

RegisterShortcut(string, Func<Task>)

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.

RestoreSelectionAsync()

Restores the last saved selection.

Declaration

public Task RestoreSelectionAsync()

Returns

Type	Description
Task

SaveSelectionAsync()

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

SetParametersAsync(ParameterView)

Sets the parameters asynchronous.

Declaration

public override Task SetParametersAsync(ParameterView parameters)

Parameters

Type	Name	Description
ParameterView	parameters	The parameters.

Returns

Type	Description
Task	Task.

Overrides

FormComponent<string>.SetParametersAsync(ParameterView)

UnregisterShortcut(string)

Unregisters the specified shortcut.

Declaration

public void UnregisterShortcut(string key)

Parameters

Type	Name	Description
string	key

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable

IRadzenFormComponent