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 95+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
To use the Telerik Editor for Blazor:
- Add the
<TelerikEditor>tag. - 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();
}
}
The result from the code snippet above
Component Reference
You can use the component reference to call its Methods, especially when creating custom tools. This snippet shows how to obtain a reference and its namespace.
@using Telerik.Blazor.Components
<TelerikEditor @ref="@TheEditorReference"></TelerikEditor>
@code{
TelerikEditor TheEditorReference { get; set; }
}
Dependencies
Authoring HTML content happens in the browser and relies on the browser HTML editing engine (see the contenteditable attribute). Thus, an HTML Editor component must rely on that and use JavaScript.
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.
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. You can read more about value binding and data binding here.
You can use the following features to get or set the editor content:
@bind-Value- the recommended approach of using two-way binding to get and set the content of the editor. It lets your view-model provide the initial value, and it will update the view-model as the user alters the HTML.DebounceDelay- the time in milliseconds that passes between updates on theValue. The default is100msand 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.Validation - the standard Data Annotation attributes are supported for validation, but for the performance reasons listed above, validation happens with the
DebounceDelaydelay, not immediately on every keystroke, like simpler inputs.The
ValueChangedevent lets you receive the value and act on it. If you use theValueChangedevent (no two-way binding), you can effectively cancel the user's input by not updating the view-model, or you can even alter it with something else.
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).
Content in the editor can become very large. For example, the user may have pasted an entire document, or pasted content has an image that will get converted to its base64 representation that is rather large. With a server-side Blazor application, large content can cause the SignalR connection to drop because the content might exceed its limit. To cater for such cases, you may need to increase that packet limit. You can do that with a line similar to this:
C#
services.AddServerSideBlazor().AddHubOptions(o =>
{
o.MaximumReceiveMessageSize = 4 * 1024 * 1024; // 4MB
});
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.
Methods
The editor reference exposes the ExecuteAsync method which lets you 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 />"));
}
}