Getting Started with the Editor

This tutorial explains how to set up a basic Telerik UI for ASP.NET MVC Editor and highlights the major steps in the configuration of the component.

You will initialize a Editor component and load it with data.

Prerequisites

To successfully complete the tutorial, you need a project that is already configured to use the Telerik UI for ASP.NET MVC components:

• To create a new pre-configured project for the Telerik UI for ASP.NET MVC components, you can use a project template.

• To manually configure an existing project by using NuGet, see the Adding Telerik UI through NuGet.

1. Prepare the CSHTML File

The first step is to add the required directives at the top of the .cshtml document:

• To use the Telerik UI for ASP.NET MVC HtmlHelpers:

  @using Kendo.Mvc.UI
  

Optionally, you can structure the document by adding the desired HTML elements like headings, divs, paragraphs, and others. In this tutorial, you add a label Html element for the Editor.

@using Kendo.Mvc.UI

<div>
    <label for="description">Description:</label>

</div>

2. Initialize the Editor

Use the Editor HtmlHelper to add the component to a page. The Name() configuration method is mandatory as its value is used for the id and the name attributes of the Editor element.

@using Kendo.Mvc.UI

<div>
    <label for="description">Description:</label>

    @(Html.Kendo().Editor()
        .Name("description")
    )
</div>

Do not set the Name() option when using EditorFor. The [ComponentName]For method automatically sets the control's Name() to the field it is bound to. For more information, see the Fundamentals article.

3. Add HTML Content to the Editor

You can display arbitrary HTML in the Editor. In this tutorial, you will use the .Value() configuration option to set the value of the control.

@using Kendo.Mvc.UI

<div>
    <label for="description">Description:</label>

    @(Html.Kendo().Editor()
        .Name("description")
        .HtmlAttributes(new { style = "width: 100%; height:470px" })
        .Value(@<text>
            <br />
            <p style="text-align:center;">
                <span style="font-size:large;">
                    <strong>One of the Most Beautiful Islands on Earth - Tenerife</strong>
                </span>
            </p>
            <p>
                <strong>Tenerife </strong>is the largest and most populated island of the eight <a href="https://en.wikipedia.org/wiki/Canary_Islands" target="_blank"> Canary Islands</a>
            </p>
        </text>)
    )
</div>

4. Handle an Editor Event

The Editor component exposes convenient events for implementing your desired logic. In this example, you will use the Change() event to log the value of Editor in the browser's console. You will also handle the Paste() event and log the content the user pastes within the Editor.

    @using Kendo.Mvc.UI

    <div>
        <label for="description">Description:</label>

        <script>
            function onChange(e) {
                console.log("Change :: " + this.value());
            }

            function onPaste(e) {
                console.log(e.html);
            }
        </script>

        @(Html.Kendo().Editor()
            .Name("description")
            .HtmlAttributes(new { style = "width: 100%; height:470px" })
            .Events(e => e // Configure the client-side events.
                .Change("onChange")
                .Paste("onPaste")
            )
        )
    </div>

5. (Optional) Reference Existing Editor Instances

To use the client-side API of the Editor and build on top of its initial configuration, you need a reference to the Editor instance. Once you get a valid reference, you can call the respective API methods:

1. Use the .Name() (id attribute) of the component instance to get a reference.

       <script>
           $(document).ready(function() {
               var editorReference = $("#editor").data("kendoEditor"); // editorReference is a reference to the existing Editor instance of the helper.
           })
       </script>
   

2. Use the Editor client-side API to control the behavior of the control. In this example, you will use the value method to select an item.

       <script>
           $(document).ready(function() {
               var editorReference = $("#editor").data("kendoEditor"); // editorReference is a reference to the existing Editor instance of the helper.
               editorReference.value("<p>New content</p>"); 
           })
       </script>
   

Next Steps

• Editor Tools
• Styling the Content of the Editor
• PDF Export of the Editor

See Also

• Using the API of the Editor for ASP.NET MVC (Demo)
• Client-Side API of the Editor
• Server-Side API of the Editor
• Knowledge Base Section