Working With Kendo UI Editor

The Kendo Editor allow user to create rich text content in user-friendly way. This Kendo Editor widget outputs identical HTML across all major browser, follows accessibility standards and provide an API for content manipulation.

Working with Kendo UI scheduler

Now we are going to create a Kendo editor through the following steps.

Step 1: Create an HTML page, In my case I named it KendoEditor.html.

Write the following code in KendoEditor.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<textarea id="editor" rows="10" cols="30" style="height:440px">
</textarea>
</div>
</body>
</html>

Step 2: Create a JS file and write the following code.

$(document).ready(function() {
$("#editor").kendoEditor({ resizable: {
content: true,
toolbar: true
}});
});

Result in Browser

From the above image you can observe that the script have created Editor from textarea HTML element with default set of tools

The same Kendo Editor can be implemented in MVVM model

HTML Design:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="container">
<div class="row">
<h4>Kendo Editor</h4>
<textarea data-role="editor"
data-tools="['bold',
'italic',
'underline',
'strikethrough',
'justifyLeft',
'justifyCenter',
'justifyRight',
'justifyFull']"
data-bind="visible: isVisible,
value: html,
events: { change: onChange }"
style="height: 200px;"></textarea>
</div>
</div>
</div>
</body>
</html>

JavaScript

var viewModel = kendo.observable({
html: null,
isVisible: true,
});
kendo.bind($("#example"), viewModel);

Result in Browser

There are many data tools other than those which is defined in above design, for more detail please click here

With the Telerik kendo UI editor, we can create and format text using the familiar bold, italic, underline, justify, etc.

Export the Editor content to PDF

This is one of the awesome feature in the Kendo Editor where we can export the content to PDF just by adding toolbar and pdf property in script.

Write the following code in KendoEditor.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<textarea id="editor" rows="10" cols="30" style="height:440px">
</textarea>
</div>
</body>
</html>

JavaScript

$(document).ready(function() {
$("#editor").kendoEditor({
tools: ["pdf"],
pdf: {
fileName: "KendoEditor.pdf",
paperSize: "a4",
margin: {
bottom: 20,
left: 20,
right: 20,
top: 20
}
}
});
});

Result in Browser

I hope you have enjoyed this article.

Thank you! Happy Coding!

8 Comments

Join the conversation! Your thoughts help the community grow.

Arul R10y ago
Thanks for nice article
Mukesh Kumar11y ago
Good Share
Ravi Patel11y ago
good one
- Gowtham K11y ago
  Thank you Ravi
Harshad Pansuriya11y ago
Nice one
- Gowtham K11y ago
  Thank you Harshad
Sibeesh Venu11y ago
Nice Share
- Gowtham K11y ago
  Thank you Sibeesh