Editor Overview
The Editor is part of Telerik UI for ASP.NET Core, 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 TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers 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>)
)
<kendo-editor name="editor">
</kendo-editor>
Basic Configuration
@(Html.Kendo().Editor()
.Name("editor")
.Tools(tools => tools
.Clear()
.Bold()
.Italic()
.Underline()
.FontName()
)
)
<kendo-editor name="editor">
<tools>
<tool name="bold" />
<tool name="italic" />
<tool name="underline" />
<tool name="fontName" />
</tools>
</kendo-editor>
You can adjust and set up the tools in the tools collection through the tools
attribute.
@(Html.Kendo().Editor()
.Name("editor")
.Tools(tools => {
tools.Clear();
tools.FontName(items => items
.Add("Default site font", "Arial, Verdana, sans - serif")
.Add("Monospaced", "monospace")
);
})
)
<kendo-editor name="editor">
<tools>
<tool name="fontName">
<tool-items>
<tool-item text="Default site font" value="Arial,Verdana,sans-serif" />
<tool-item text="Monospaced font" value="monospace" />
</tool-items>
</tool>
</tools>
</kendo-editor>
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 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>