Editor HtmlHelper Overview
The Telerik UI Editor HtmlHelper for ASP.NET Core 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.
The Editor is part of Telerik UI for ASP.NET Core, a
professional grade UI library with 100+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
Initializing the Editor
The following example demonstrates how to define the Editor by using the Editor HtmlHelper.
@(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.
@(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
- Modes of operation
- Tools
- Pasting content
- Serializing and deserializing content
- Image browser
- Immutable elements
- CRUD operations
- Styling the content
- Accessibility
Events
The following example demonstrates Editor HTML helper 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>