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 images link

You can insert images by pasting them or using the RadzenHtmlEditorImage tool. By default images are inserted as base64 encoded strings. To upload images to the server you need to implement a file upload endpoint and set the UploadUrl property of the RadzenHtmlEditor component: <RadzenHtmlEditor @bind-Value=@htmlValue UploadUrl="upload/image" />. For a sample implementation check the UploadController.cs tab.

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
  • Material 3 Dark
  • Fluent
  • Fluent Dark

Free Themes

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