ASP.NET MVC Editor Overview
The Editor is part of Telerik UI for ASP.NET MVC, 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 HtmlHelper for ASP.NET MVC is a server-side wrapper 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>)
)
Basic Configuration
The following example demonstrates the basic configuration of the Editor.
@(Html.Kendo().Editor()
.Name("editor")
.Encoded(true)
.HtmlAttributes(new { style = "width: 100%;height:440px" })
.Value(@<text>
<p>
Kendo UI Editor allows your users to edit HTML in a familiar, user-friendly way.
</p>
</text>)
)
<script type="text/javascript">
$(function() {
// The Name() of the Editor is used to get its client-side instance.
var editor = $("#editor").data("kendoEditor");
});
</script>
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()
)
)
public ActionResult 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.2, and keyboard support. |
CSP Compliance
The Editor component relies on inline styles for several of its features. If strict CSP mode is enabled for the application you can use the following configuration options to make the Editor component CSP-compliant:
- Use the
.Nonceconfiguration and pass a value for the nonce attribute. The passed value would be used as the nonce attribute for the inline styles in the content area iframe, the placeholder inline style and the link tags loading external stylesheets in the content area. - Use the
.UnsafeInlineconfiguration and set it tofalse, so no inline styles are used by the Formatting tool. As a result no decoration will be applied to the Formatting tool dropdown and the formated values will appear as plain text. Actual formatting will be applied (for example if the content of the Editor is exported to MS Word), but the applied format will not be visible in the Editor component, due to the enabled strict CSP mode.