Editor HtmlHelper Overview

The Editor HtmlHelper extension is a server-side wrapper for the Kendo UI Editor widget.

It enables you to configure the Editor from server-side code. The Editor allows you to create rich textual content through a What-You-See-Is-What-You-Get (WYSIWYG) interface. The generated widget value is an XHTML markup.

For more information on the HtmlHelper, refer to the article on the Editor HtmlHelper for ASP.NET MVC.

Basic Usage

The following example demonstrates how to define the Editor by using the Editor HtmlHelper.

Example

@(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 HtmlHelper and how to get the Editor instance.

Example

@(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() {
        //Notice that the Name() of the Editor is used to get its client-side instance.
        var editor = $("#editor").data("kendoEditor");
    });
</script>

Functionality and Features

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

Events

The following example demonstrates Editor HTML helper events, which could be handled on the client-side.

Example

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

• JavaScript API Reference of the Editor
• Editor HtmlHelper for ASP.NET MVC
• Editor Official Demos
• Overview of Telerik UI for ASP.NET Core
• Get Started with Telerik UI for ASP.NET Core in ASP.NET Core Projects
• Get Started with Telerik UI for ASP.NET Core in ASP.NET Core Projects with the CLI
• Known Issues with Telerik UI for ASP.NET Core