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.
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.
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.
Focus link
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.
Radzen Blazor Components, © 2018-2024 Radzen.
Source Code licensed under
MIT