Getting Started with the Editor
This tutorial explains how to set up a basic Telerik UI for ASP.NET Core Editor and highlights the major steps in the configuration of the component.
You will initialize a Editor component and load it with data. Finally, you can run the sample code in Telerik REPL and continue exploring the components.
Prerequisites
To successfully complete the tutorial, you need a project that is already configured to use the Telerik UI for ASP.NET Core components:
You can use the Telerik REPL playground and skip installing the components on your system and configuring a project.
-
You can prepare a Visual Studio project by following the following guide:
- Creating a new pre-configured project for the Telerik UI for ASP.NET Core components from a project template.
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 Core HtmlHelpers:
@using Kendo.Mvc.UI -
To use the Telerik UI for ASP.NET Core TagHelpers:
@addTagHelper *, Kendo.Mvc
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>
@addTagHelper *, Kendo.Mvc
<div>
<label for="description">Description:</label>
</div>
2. Initialize the Editor
Use the Editor HtmlHelper or TagHelper 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>
@addTagHelper *, Kendo.Mvc
<div>
<label for="description">Description:</label>
<kendo-editor name="description">
</kendo-editor>
</div>
Do not set the
Name()option when usingEditorFor. The[ComponentName]Formethod automatically sets the control'sName()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>
@addTagHelper *, Kendo.Mvc
<div>
<label for="description">Description:</label>
<kendo-editor name="description" 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> }">
</kendo-editor>
</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>
@addTagHelper *, Kendo.Mvc
<script>
function onChange(e) {
console.log("Change :: " + this.value());
}
function onPaste(e) {
console.log(e.html);
}
</script>
<div>
<label for="description">Description:</label>
<kendo-editor name="description" style="width: 100%; height:470px"
on-change="onChange"
on-paste="onPaste">
</kendo-editor>
</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:
-
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> -
Use the Editor client-side API to control the behavior of the control. In this example, you will use the
valuemethod 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>
Explore this Tutorial in REPL
You can continue experimenting with the code sample above by running it in the Telerik REPL server playground: