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:
<textarea id="editor" rows="10" cols="30" style="width:100%; height:450px" aria-label="editor">
<br />
<p style="text-align:center;">
<span style="font-family:Verdana, Geneva, sans-serif;font-size:large;"><strong>One of the Most Beautiful Islands on Earth - Tenerife</strong>
</span>
</p>
<p>
<span style="font-family:Verdana, Geneva, sans-serif;font-size:medium;"><strong>Overview</strong>
</span>
</p>
<p style="font-size: small;">
<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>. It is also the most populated island of <strong>Spain</strong>, with a land area of 2,034.38 square kilometers (785 sq mi) and 904,713 inhabitants, 43% of the total population of the <strong>Canary Islands</strong>.&nbsp;The archipelago's beaches, climate, and important natural attractions make it a major tourist destination with over 12 million visitors per year.
</p>
<br />
<p><span style="font-family:Verdana, Geneva, sans-serif;font-size:medium;">
<strong>Trip Highlights in Tenerife</strong></span></p><span style="white-space:pre;"></span>
<ul>
<li>
<strong style="color: rgb(0,80,5);">Trip to Loro Parque </strong> <br /> Our top tip is to visit the famous <em>Loro Parque</em> or 'Loro Park. It is a 13.5-hectare zoo on the outskirts of Puerto de la Cruz in Tenerife, Spain where it houses an extensive and diverse reserve of animal and plant species.
<br />
<br />
</li>
<li>
<strong><span style="color: rgb(46,125,50);">Whale and Dolphin Watching Tour&nbsp;<br /></span></strong> Another great option is to take boat excursion with almost guaranteed sightings of whales and dolphins. This is a day-long trip that includes lunch, island visits, fishing, and amazing views of ocean sceneries.
<br />
<br />
</li>
<li>
<strong><span style="color: rgb(96,173,94);">Teide National Park Stargazing</span></strong><br />Last, but not least you can take a stargazing trip to Teide National Park, the 3rd best place in the world to view stars and described by NASA as a window to the universe.
<br />
</li>
</ul>
</textarea>
<script>
$(document).ready(function () {
// create Editor from textarea HTML element with default set of tools
$("#editor").kendoEditor({
tools: [
"bold",
"italic",
"underline",
"strikethrough",
"justifyLeft",
"justifyCenter",
"justifyRight",
"justifyFull",
"createLink",
"unlink",
"insertImage",
"createTable",
"addColumnLeft",
"addColumnRight",
"addRowAbove",
"addRowBelow",
"deleteRow",
"deleteColumn",
"foreColor",
"backColor"
],
resizable: {
content: true,
toolbar: true
}
});
});
</script>
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.
<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.
<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.
<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>