ASP.NET Core Editor Overview
The Editor is part of Telerik UI for ASP.NET Core, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
The Telerik UI Editor TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI Editor widget.
The Editor allows you to create rich textual content through a What-You-See-Is-What-You-Get (WYSIWYG) interface and generate widget value as an XHTML markup.
Initializing the Editor
The following example demonstrates how to define the Editor.
@(Html.Kendo().Editor()
.Name("editor")
.Value(@<text>
<p>
Kendo UI Editor allows your users to edit HTML in a familiar, user-friendly way.
</p>
</text>)
)
<kendo-editor name="editor">
</kendo-editor>
Basic Configuration
@(Html.Kendo().Editor()
.Name("editor")
.Tools(tools => tools
.Clear()
.Bold()
.Italic()
.Underline()
.FontName()
)
)
<kendo-editor name="editor">
<tools>
<tool name="bold" />
<tool name="italic" />
<tool name="underline" />
<tool name="fontName" />
</tools>
</kendo-editor>
You can adjust and set up the tools in the tools collection through the tools attribute.
@(Html.Kendo().Editor()
.Name("editor")
.Tools(tools => {
tools.Clear();
tools.FontName(items => items
.Add("Default site font", "Arial, Verdana, sans - serif")
.Add("Monospaced", "monospace")
);
})
)
<kendo-editor name="editor">
<tools>
<tool name="fontName">
<tool-items>
<tool-item text="Default site font" value="Arial,Verdana,sans-serif" />
<tool-item text="Monospaced font" value="monospace" />
</tool-items>
</tool>
</tools>
</kendo-editor>
The example below illustrates how to bind the Editor to a Model property that is passed to the View.
@model ProductViewModel
@(Html.Kendo().EditorFor(m => m.ProductName)
.Tools(tools => tools
.Clear()
.Bold()
.Italic()
.Underline()
.FontName()
)
)
@model ProductViewModel
<kendo-editor for="@Model.ProductName">
<tools>
<tool name="bold" />
<tool name="italic" />
<tool name="underline" />
<tool name="fontName" />
</tools>
</kendo-editor>
public IActionResult Index()
{
ProductViewModel product = new ProductViewModel() { ProductName = "Name 1" };
return View(product);
}
Functionality and Features
| Feature | Description |
|---|---|
| Modes of operation | The Editor supports two operation modes: classic and inline. |
| Tools | The Editor allows you to enable a large set of built-in text editing tools. You can also add your custom tools. |
| Pasting content | The users can paste content from HTML and Microsoft Word documents into the Editor. |
| Serializing and deserializing content | You can configure custom definitions for serializing and deserializing of the Editor's content. |
| Image browser | The Editor allows the user to insert an image by browsing a list of predefined files and directories. |
| Immutable elements | By using the immutable feature, the Editor allows you to add HTML elements that cannot be edited by the user. |
| CRUD operations | The Editor docs and demos demonstrate how to save, read, update, and delete text content in a database. |
| Styling the content | You can choose between the default styling options for the Editor's content or add your custom styles. |
| Accessibility | The Editor is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.1, and keyboard support. |