Blazor Editor Overview
The Blazor HTML Editor component enables your users to create rich textual content through a What-You-See-Is-What-You-Get (WYSIWYG) interface and delivers a set of tools for creating, editing, and formatting text, paragraphs, lists, and other HTML elements.
The Editor component is part of Telerik UI for Blazor, a
professional grade UI library with 100+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
Creating Editor
- Use the
TelerikEditortag to add the component to your razor page. - Bind its
Valueto thestringfield you want to get the HTML content in.
@* This sample simulates loading some content from a data source and lets the Editor alter it in the view-model *@
<TelerikEditor @bind-Value="@TheEditorValue" Width="650px" Height="400px"></TelerikEditor>
@code{
string TheEditorValue { get; set; }
protected override Task OnInitializedAsync()
{
TheEditorValue = @"
<p>
The Blazor Editor allows your users to edit HTML in a familiar, user-friendly way. Your users do not have to understand HTML in order to create it.
</p>
<p>
The widget <strong>outputs identical HTML</strong> across all major browsers, follows
accessibility standards, and provides API for content manipulation.
</p>
<p>Features include:</p>
<ul>
<li>Text formatting</li>
<li>Bulleted and numbered lists</li>
<li>Hyperlinks</li>
<li>Cross-browser support</li>
<li>Identical HTML output across browsers</li>
<li>Ability to create custom tools, dropdowns, dialogs</li>
</ul>
";
return base.OnInitializedAsync();
}
}
Get/Set Content
The Blazor HTML Editor interacts with its content (value) like all standard components - through its Value parameter. You can use it to get and set the HTML string the editor will work with. Read more about value binding and data binding...
The application must sanitize the content before passing it to the editor and, optionally, before saving it to its storage after obtaining it from the editor. It is up to the application to ensure there is no malicious content (such as input sanitization, XSS attack prevention and other security concerns).
Validation
You can use the standard Data Annotation attributes to validate the content of the Editor. For the performance reasons listed above, validation happens with the DebounceDelay delay, not immediately on every keystroke, like simpler inputs. See the Validation article for an example on how to validate the content of the Editor...
Large Content Support
This section applies only to Blazor Server apps. Blazor WebAssembly apps do not require additional configuration for the Editor to work with large content.
Blazor Server apps use the SignalR WebSocket to send the Editor Value from the browser to the server .NET runtime and vice-versa. The default SignalR maximum message size is 32 KB. To work with larger content (especially paste images as Base64 strings), increase the max WebSocket message size for the Blazor application.
Resizing
The Editor allows you to resize:
Tables
Tables, their columns, and rows in the content area of Editor are resizable. To grab the resize handles, hover on the column or row borders.
Images
Images in the content area of the Editor are resizable. To grab the resize handles, hover on the borders of the image.
Dependencies
The Telerik UI for Blazor Editor uses the ProseMirror engine and it depends on it. You do not need to add any extra assets or references yourself, though, we have taken care of everything internally.
Editor Parameters
The following table lists Editor parameters, which are not discussed elsewhere in the component documentation.
| Parameter | Type and Default value | Description |
|---|---|---|
Value |
string |
The value of the component. It supports two-way binding or alternatively, use it with the ValueChanged event. |
DebounceDelay |
int ( 100) |
The time in milliseconds that passes between updates on the Value. The default is 100ms and if that causes performance issues with many repaints on your view, you can increase it. Since the editor is expected to handle longer editing sessions and larger content than regular inputs, we added this parameter to debounce the view-model updates and events. |
Adaptive |
bool |
Defines if the toolbar should adapt to changes in the width of the component and automatically hide and show the overflowing items in a popup. |
Width |
string |
Defines the width of the Editor. The default width is null but the themes apply 100%. |
Height |
string ( 250px) |
Defines the height of the Editor. |
AriaLabelledBy |
string |
Maps to the area-labelledby attribute. Use this parameter to reference another element to define its accessible name. |
AriaDescribedBy |
string |
Maps to the area-describedby attribute. Use this parameter to establish a relationship between widgets or groups and the text that describes them. |
Editor Reference and Methods
You can use the component reference to call its ExecuteAsync method, especially when creating custom tools. This method allows you to call programmatically the tools and commands of the editor (such as the Bold too, or a Back Color tool, or inserting HTML).
You can find the reference for the available commands and their respective arguments in the Built-in Tools list section of the documentation.
Paste at the cursor position
@* This snippet shows how to insert a horizontal rule (<hr /> tag) at the cursor position.
You can replace that string with any other content you can generate/obtain according to your application needs*@
@using Telerik.Blazor.Components.Editor
<TelerikButton OnClick="@InsertHr">insert hr</TelerikButton>
<TelerikEditor @ref="@TheEditor" @bind-Value="@TheContent"></TelerikEditor>
@code{
TelerikEditor TheEditor { get; set; }
string TheContent { get; set; } = "<p>Lorem ipsum.</p><p>Dolor sit amet.</p>";
async Task InsertHr()
{
await TheEditor.ExecuteAsync(new HtmlCommandArgs("insertHtml", "<hr />"));
}
}
Next Steps
- Explore the Built-in Tools and Commands
- Create Custom Tools
- Explore the Editor Edit Modes
- Import and Export Data
- Learn more about the Editor Events