Radzen Blazor Components

HtmlEditor

Demonstration and configuration of the Radzen Blazor HtmlEditor component.

Get and set the value link

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.

Hex
R
G
B
A
Hex
R
G
B
A
Font
Arial
Georgia
Helvetica
Monospace
Segoe UI
Tahoma
Times New Roman
Verdana
Font size
10px
13px
16px
18px
24px
32px
48px
Format block

Normal

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Console log

All tools link

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.
  • RadzenHtmlEditorSubscript - converts the selected text to subscript.
  • RadzenHtmlEditorSource - edit the HTML source as text.
  • 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.

Custom set of tools (text-editing only) link

Here is how to specify a custom set of tools.

Hex
R
G
B
A
Hex
R
G
B
A

Upload files link

Hex
R
G
B
A
Hex
R
G
B
A
Font
Arial
Georgia
Helvetica
Monospace
Segoe UI
Tahoma
Times New Roman
Verdana
Font size
10px
13px
16px
18px
24px
32px
48px
Format block

Normal

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Focus link

Hex
R
G
B
A
Hex
R
G
B
A
Font
Arial
Georgia
Helvetica
Monospace
Segoe UI
Tahoma
Times New Roman
Verdana
Font size
10px
13px
16px
18px
24px
32px
48px
Format block

Normal

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Keyboard Navigation link

The following keys or key combinations provide a way for users to navigate and interact with Radzen Blazor HTMLEditor component.

Press this key To do this
Windows, Chrome OS Mac
Tab Tab Navigate to a HTMLEditor component.
Ctrl + A + A Select all text.
Ctrl + C + C Copy.
Ctrl + V + V Paste.
Ctrl + B + B Bold.
Ctrl + I + I Italic.
Ctrl + U + U Underline.
Ctrl + K + K Insert or edit a link.
Ctrl + Z + Z Undo.
Ctrl + Shift + Z + Shift + Z Redo.

Supercharge your Blazor development with Radzen Blazor Studio

Radzen Blazor Studio is a software development environment that empowers developers to design, build and deploy Blazor applications without the traditional hurdles. Write less code and get more done.

open_in_new Learn More
>Radzen Blazor Studio

Radzen Blazor Components, © 2018-2024 Radzen.
Source Code licensed under MIT

Demos Configuration

Premium Themes

  • Material 3
  • Fluent
  • Material 3 Dark
  • Material Dark
  • Fluent Dark

Free Themes

  • Material
  • Standard
  • Default
  • Humanistic
  • Software
  • Dark
An error has occurred. This app may no longer respond until reloaded. Reload 🗙