Editor HtmlHelper Overview

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.

Basic Configuration

  1. Make sure you followed all the steps from the introductory article on Telerik UI for ASP.NET MVC.
  2. Create a new action method which renders the view.

    public ActionResult Index()
    {
        return View();
    }
    
  3. Add an Editor.

        <%: Html.Kendo().Editor()
                .Name("editor") // The name of the Editor is mandatory. It specifies the "id" attribute of the Editor.
                .Value("<p>Initial value</p>") // Set the value of the Editor.
        %>
    
        @(Html.Kendo().Editor()
                .Name("editor") // The name of the Editor is mandatory. It specifies the "id" attribute of the Editor.
                .Value("<p>Initial value</p>") // Set the value of the Editor.
        )
    

The value of the Editor is posted as a string and mapped to a variable with the name of the widget. By default, the posted value is HTML-encoded to circumvent the ASP.NET request validation.

  • To decode the value, use the HttpUtility.HtmlDecode method.
  • To avoid the encoding of the Editor, specify Encode(false) by using the fluent API and add the AllowHtml attribute to the model field that stores the HTML.

    [HttpPost] public ActionResult Save(string editor) { string value = HttpUtility.HtmlDecode(editor);

    return View();
    

    }

Functionality and Features

Events

You can subscribe to all Editor events. For a complete example on basic Editor events, refer to the demo on using the events of the Editor.

Handling by Handler Name

The following example demonstrates how to subscribe to events by a handler name.

    <%: Html.Kendo().Editor()
        .Name("editor")
        .Events(e => e
            .Change("editor_change")
        )
    %>
    <script>
        function editor_change() {
            // Handle the change event.
        }
    </script>
    @(Html.Kendo().Editor()
        .Name("editor")
        .Events(e => e
            .Change("editor_change")
        )
    )
    <script>
        function editor_change() {
            // Handle the change event.
        }
    </script>

By Template Delegate

The following example demonstrates how to subscribe to events by a template delegate.

    @(Html.Kendo().Editor()
        .Name("editor")
        .Events(e => e
            .Change(@<text>
            function() {
                // Handle the change event inline.
            }
            </text>)
        )
    )

Referencing Existing Instances

To reference an existing Editor instance, use the jQuery.data() configuration option. Once a reference is established, use the Editor client-side API to control its behavior.

// Place the following after the Editor for ASP.NET MVC declaration.
<script>
    $(function() {
        // The Name() of the Editor is used to get its client-side instance.
        var editor = $("#editor").data("kendoEditor");
    });
</script>

See Also

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