HtmlEditor component

This article demonstrates how to use RadzenHtmlEditor.

Get and set the value

As all Radzen Blazor input components the HtmlEditor has a Value property which gets and sets the value of the component. Use @bind-Value to get the user input.

<RadzenHtmlEditor @bind-Value=@htmlValue />
@code {
  string htmlValue = "<h1>Hello World!!!</h1>";
}

Tools

The HtmlEditor provides various tools for content editing - bold, italic, color, various text formatting etc. By default all tools are enabled. Here is how to specify a custom set of tools:

<RadzenHtmlEditor @bind-Value=@value>
  <RadzenHtmlEditorUndo />
  <RadzenHtmlEditorRedo />
  <RadzenHtmlEditorSeparator />
  <RadzenHtmlEditorBold />
  <RadzenHtmlEditorItalic />
  <RadzenHtmlEditorUnderline />
  <RadzenHtmlEditorStrikeThrough />
  <RadzenHtmlEditorSeparator />
  <RadzenHtmlEditorColor />
  <RadzenHtmlEditorBackground />
  <RadzenHtmlEditorRemoveFormat />
</RadzenHtmlEditor>

All tools

The Radzen HtmlEditor supports the following tools:

• RadzenHtmlEditorUndo - allows the user to undo the last action (result of other tool, typing or pasting).
• RadzenHtmlEditorRedo - allows the use to redo the last undone action.
• RadzenHtmlEditorSeparator - displays a vertical separator used to delimit group of similar tools.
• RadzenHtmlEditorBold - toggles the bold style of the selected text.
• RadzenHtmlEditorItalic - toggles the italic style of the selected text.
• RadzenHtmlEditorUnderline - toggles the underline style of the selected text.
• RadzenHtmlEditorStrikeThrough - toggles the strikethrough style of the selected text.
• RadzenHtmlEditorAlignLeft - toggles left text alignment.
• RadzenHtmlEditorAlignCenter - toggles center text alignment.
• RadzenHtmlEditorAlignRight - toggles right text alignment.
• RadzenHtmlEditorJustify - toggles justified text alignment.
• RadzenHtmlEditorIndent - indents the selected text.
• RadzenHtmlEditorOutdent - outdents the selected text.
• RadzenHtmlEditorUnorderedList - inserts unordered (bullet) list.
• RadzenHtmlEditorOrderedList - inserts ordered (numbered) list.
• RadzenHtmlEditorColor - sets the foreground color of the selected text.
• RadzenHtmlEditorBackground - sets the background color of the selected text.
• RadzenHtmlEditorRemoveFormat - removes the visual styling of the selected text.
• RadzenHtmlEditorSource - edit the HTML source as text.
• RadzenHtmlEditorSubscript - converts the selected text to subscript.
• RadzenHtmlEditorSuperscript - converts the selected text to superscript
• RadzenHtmlEditorLink - inserts a hyperlink.
• RadzenHtmlEditorUnlink - removes a hyperlink.
• RadzenHtmlEditorImage - allows the user to insert an image by either uploading a file or selecting a URL. Requires File upload to be implemented and the UploadUrl property of the HtmlEditor to be set.
• RadzenHtmlEditorFontName - set the font of the selected text.
• RadzenHtmlEditorFontSize - set the font size of the selected text.
• RadzenHtmlEditorFormatBlock - allows the user to format the selected text as heading or paragraph.
• RadzenHtmlEditorCustomTool - allows the developer to implement a custom tool.

Default tools

By default RadzenHtmlEditor uses these tools:

<RadzenHtmlEditorUndo />
<RadzenHtmlEditorRedo />
<RadzenHtmlEditorSeparator />
<RadzenHtmlEditorBold />
<RadzenHtmlEditorItalic />
<RadzenHtmlEditorUnderline />
<RadzenHtmlEditorStrikeThrough />
<RadzenHtmlEditorSeparator />
<RadzenHtmlEditorAlignLeft />
<RadzenHtmlEditorAlignCenter />
<RadzenHtmlEditorAlignRight />
<RadzenHtmlEditorJustify />
<RadzenHtmlEditorSeparator />
<RadzenHtmlEditorIndent />
<RadzenHtmlEditorOutdent />
<RadzenHtmlEditorUnorderedList />
<RadzenHtmlEditorOrderedList />
<RadzenHtmlEditorSeparator />
<RadzenHtmlEditorColor />
<RadzenHtmlEditorBackground />
<RadzenHtmlEditorRemoveFormat />
<RadzenHtmlEditorSeparator />
<RadzenHtmlEditorSubscript />
<RadzenHtmlEditorSuperscript />
<RadzenHtmlEditorSeparator />
<RadzenHtmlEditorLink />
<RadzenHtmlEditorUnlink />
<RadzenHtmlEditorImage />
<RadzenHtmlEditorFontName />
<RadzenHtmlEditorFontSize />
<RadzenHtmlEditorFormatBlock />
<RadzenHtmlEditorSeparator />
<RadzenHtmlEditorSource />

Custom tools

RadzenHtmlEditor allows the developer to create custom tools via the RadzenHtmlEditorCustomTool tag.

In its basic form you create a button and handle the Execute event of the HtmlEditor to implement the command.

<RadzenHtmlEditor Execute=@OnExecute>
    <RadzenHtmlEditorCustomTool CommandName="InsertToday" Icon="today" Title="Insert today" />
</RadzenHtmlEditor>
@code {
    async Task OnExecute(HtmlEditorExecuteEventArgs args)
    {
        if (args.CommandName == "InsertToday")
        {
            var date = DateTime.Now;
            await args.Editor.ExecuteCommandAsync(HtmlEditorCommands.InsertHtml, $"<strong>{date.ToLongDateString()}</strong>");
        }
    }
}

You can also specify custom UI via the Template of the RadzenHtmlEditorCustomTool.

<RadzenHtmlEditor>
    <RadzenHtmlEditorCustomTool>
        <Template Context="editor">
            <RadzenDatePicker Change=@(args => OnDateChange(args, editor)) TValue="DateTime" />
        </Template>
    </RadzenHtmlEditorCustomTool>
</RadzenHtmlEditor>
@code {
  async Task OnDateChange(DateTime? date, RadzenHtmlEditor editor)
  {
      if (date != null)
      {
          await editor.ExecuteCommandAsync(HtmlEditorCommands.InsertHtml, $"<strong>{date.Value.ToLongDateString()}</strong>");
      }
  }
}

Upload files

RadzenHtmlEditor requires file upload support to be implemented for uploading and pasting images. Here is a minimal implementation that stores the uploaded files in the wwwroot directory of the application and uses GUID for the file names to avoid naming conflicts.

• Page
• Controller

<RadzenHtmlEditor UploadUrl="upload/image" />