Editor Overview

Telerik UI for ASP.NET MVC Ninja image

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>

Functionality and Features

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

In this article