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.

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

• Demo page for the Editor HtmlHelper

• Demo page for the Editor TagHelper

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

• Modes of operation
• Tools
• Pasting content
• Serializing and deserializing content
• Image browser
• Immutable elements
• CRUD operations
• Styling the content
• Accessibility

Events

The following example demonstrates Editor events, which could be handled on the client-side. For a complete example on basic Editor events, refer to the demo on using the events of the Editor.

    @(Html.Kendo().Editor()
        .Name("editor")
        .Events(e => e
            .Change("onChange")
            .Execute("onExecute")
            .Keydown("onKeydown")
            .Keyup("onKeyup")
            .Paste("onPaste")
            .PdfExport("onPdfExport")
            .Select("onSelect")
        )
    )

    <script>
        function onChange(e) {
            kendoConsole.log("value change");
        }

        function onExecute(e) {
            kendoConsole.log("command :: " + e.name);
        }

        function onKeydown(e) {
            kendoConsole.log("key down");
        }

        function onKeyup(e) {
            kendoConsole.log("key up");
        }

        function onPaste(e) {
            kendoConsole.log("paste :: " + kendo.htmlEncode(e.html));
        }

        function onPdfExport(e) {
            kendoConsole.log("PDF export");
        }

        function onSelect(e) {
            kendoConsole.log("selection  change");
        }
    </script>

See Also

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

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

• Using the API of the Editor HtmlHelper for ASP.NET Core (Demo)

• Server-Side API