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.

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.

Supercharge your Blazor development with Radzen

Whether you prefer a standalone environment or integration directly within Visual Studio, Radzen provides a powerful toolkit to increase development speed, reduce repetitive coding, and focus on building exceptional applications.

Pro

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.

See in Action Learn More

New

Radzen Blazor for Visual Studio

Radzen Blazor for Visual Studio extension streamlines Blazor development within the Visual Studio environment. The Blazor extension you need to boost productivity!

Download Learn More

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