New to Kendo UI for jQuery? Start a free 30-day trial
Getting Started with the Editor
This guide demonstrates how to get up and running with the Kendo UI for jQuery Editor.
After the completion of this guide, you will be able to achieve the following end result:
Loading ...
1. Create a textarea Element
First, create a <textarea> or other HTML element that holds the text content you want the Editor to display. It will serve as the main container of the Editor component.
html
<textarea id="editor" rows="10" cols="30" aria-label="editor">
...
</textarea>2. Initialize the Editor
In this step, you will initialize the Editor from the <textarea> element.
html
<textarea id="editor" rows="10" cols="30"></textarea>
<script>
// Target the textarea element by using jQuery and then call the kendoEditor() method.
$("#editor").kendoEditor();
</script>3. Apply Basic Configurations
The Editor provides several options that enable you to modify its behavior. The following example demonstrates how to apply a handle to allow users to resize the Editor by using the resizable property and add a collection of tools that are used to interact with the Editor.
html
<textarea id="editor" rows="10" cols="30"></textarea>
<script>
// Target the textarea element by using jQuery and then call the kendoEditor() method.
$("#editor").kendoEditor({
// Add some basic configurations such as resizable and tools.
resizable: {
content: true,
toolbar: true
},
tools: [
"bold",
"italic",
"underline",
"strikethrough",
"justifyLeft",
"justifyCenter",
"justifyRight",
"justifyFull",
"createLink",
"unlink",
"insertImage",
"createTable",
"addColumnLeft",
"addColumnRight",
"addRowAbove",
"addRowBelow",
"deleteRow",
"deleteColumn",
"foreColor",
"backColor"
],
});
</script>