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

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

In this article
Not finding the help you need? Improve this article