ASP.NET Core Editor Overview

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.

• Demo page for the Editor HtmlHelper

• Demo page for the Editor TagHelper

Initializing the Editor

The following example demonstrates how to define the Editor.

Razor

@(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>)
)

Razor

    <kendo-editor name="editor">
    </kendo-editor>

Basic Configuration

Razor

		@(Html.Kendo().Editor()
				.Name("editor")
				.Tools(tools => tools
						.Clear()
						.Bold()
						.Italic()
						.Underline()
						.FontName()
				)
		)

Razor

		<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.

Razor

	@(Html.Kendo().Editor()
			.Name("editor")
			.Tools(tools => {
					tools.Clear();
					tools.FontName(items => items
							.Add("Default site font", "Arial, Verdana, sans - serif")
							.Add("Monospaced", "monospace")
					);
			})
	)

Razor

	<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.

Razor

    @model ProductViewModel

    @(Html.Kendo().EditorFor(m => m.ProductName)
        .Tools(tools => tools
            .Clear()
            .Bold()
            .Italic()
            .Underline()
            .FontName()
        )
    )

Razor

    @model ProductViewModel
    <kendo-editor for="@Model.ProductName">
        <tools>
            <tool name="bold" />
            <tool name="italic" />
            <tool name="underline" />
            <tool name="fontName" />
        </tools>
    </kendo-editor>

C#

    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.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 .Nonce configuration 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 .UnsafeInline configuration and set it to false, 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.

Next Steps

• Getting Started with the Editor

• Basic Usage of the Editor HtmlHelper for ASP.NET Core (Demo)

• Basic Usage of the Editor TagHelper for ASP.NET Core (Demo)

See Also

• Using the API of the Editor for ASP.NET Core (Demo)
• Knowledge Base Section