JQuery

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

  1. <!DOCTYPE html>    
  2. <html>    
  3. <head>    
  4.     <meta charset="utf-8">    
  5.     <title>Untitled</title>    
  6.     
  7.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css">    
  8.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css">    
  9.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css">    
  10.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.mobile.all.min.css">    
  11.     
  12.     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>    
  13.     <script src="http://kendo.cdn.telerik.com/2015.3.930/js/angular.min.js"></script>    
  14.     <script src="http://kendo.cdn.telerik.com/2015.3.930/js/jszip.min.js"></script>    
  15.     <script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>    
  16. </head>    
  17. <body>    
  18.     <div id="example">  
  19.     <textarea id="editor" rows="10" cols="30" style="height:440px">  
  20.       </textarea>  
  21.     </div>  
  22. </body>  
  23. </html>  

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

  1. $(document).ready(function() {  
  2.                     
  3.                     $("#editor").kendoEditor({ resizable: {  
  4.                         content: true,  
  5.                         toolbar: true  
  6.                     }});  
  7.                 });  
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:

  1. <!DOCTYPE html>    
  2. <html>    
  3. <head>    
  4.     <meta charset="utf-8">    
  5.     <title>Untitled</title>    
  6.     
  7.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css">    
  8.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css">    
  9.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css">    
  10.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.mobile.all.min.css">    
  11.     
  12.     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>    
  13.     <script src="http://kendo.cdn.telerik.com/2015.3.930/js/angular.min.js"></script>    
  14.     <script src="http://kendo.cdn.telerik.com/2015.3.930/js/jszip.min.js"></script>    
  15.     <script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>    
  16. </head>    
  17. <body>    
  18.     <div id="example">  
  19.     <div class="container">  
  20.         <div class="row">  
  21.             <h4>Kendo Editor</h4>  
  22.             <textarea data-role="editor"  
  23.                       data-tools="['bold',  
  24.                                    'italic',  
  25.                                    'underline',  
  26.                                    'strikethrough',  
  27.                                    'justifyLeft',  
  28.                                    'justifyCenter',  
  29.                                    'justifyRight',  
  30.                                    'justifyFull']"  
  31.                       data-bind="visible: isVisible,  
  32.                                  value: html,  
  33.                                  events: { change: onChange }"  
  34.                       style="height: 200px;"></textarea>  
  35.         </div>  
  36.         </div>  
  37.         </div>  
  38. </body>  
  39. </html>  
JavaScript 
  1. var viewModel = kendo.observable({  
  2.         html: null,  
  3.         isVisible: true,  
  4.          
  5.     });  
  6.     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

  1. <!DOCTYPE html>    
  2. <html>    
  3. <head>    
  4.     <meta charset="utf-8">    
  5.     <title>Untitled</title>    
  6.     
  7.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css">    
  8.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css">    
  9.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css">    
  10.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.mobile.all.min.css">    
  11.     
  12.     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>    
  13.     <script src="http://kendo.cdn.telerik.com/2015.3.930/js/angular.min.js"></script>    
  14.     <script src="http://kendo.cdn.telerik.com/2015.3.930/js/jszip.min.js"></script>    
  15.     <script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>    
  16. </head>    
  17. <body>    
  18.    <div id="example">  
  19.     <textarea id="editor" rows="10" cols="30" style="height:440px">  
  20.       </textarea>  
  21.     </div>  
  22. </body>  
  23. </html>  
JavaScript
  1. $(document).ready(function() {  
  2.                      
  3.                     $("#editor").kendoEditor({   
  4.                       
  5.                     tools: ["pdf"],  
  6.                           
  7.                         pdf: {  
  8.                             fileName: "KendoEditor.pdf",  
  9.                             paperSize: "a4",  
  10.                             margin: {  
  11.                                 bottom: 20,  
  12.                                 left: 20,  
  13.                                 right: 20,  
  14.                                 top: 20  
  15.                             }  
  16.                         }  
  17.                       
  18.                     });  
  19.                 });  
Result in Browser
 
   
 
 
 
I hope you have enjoyed this article.
 
Thank you! Happy Coding!

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs