Post
Ask Question

Adding Custom Styles To Kendo Editor

Introduction

Kendo Editor is a widget which allows the users to create a rich text content in a user-friendly way. In my last article, I explained how to work with Kendo Editor. In this blog, I’m going to discuss how to implement custom styles in the Kendo Editor.

Kendo Editor

Create an HTML page and name it. I have 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="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common.min.css">  
  8.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.rtl.min.css">  
  9.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.default.min.css">  
  10.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.mobile.all.min.css">  
  11.     
  12.     <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>  
  13.     <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/angular.min.js"></script>  
  14.     <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jszip.min.js"></script>  
  15.     <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script></head>  
  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. <script>  
  24.     $(document).ready(function() {                          
  25.                     $("#editor").kendoEditor({  
  26.                           
  27.                     tools: [  
  28.                 { name: "formatting", width: 150, items: [  
  29.                  { text: "Custom Title", value: ".title" },  
  30.                     
  31.                 ] }  
  32.             ],  
  33.             stylesheets: [  
  34.                 "style.css"  
  35.             ]  
  36.                 });    
  37.                 });    
  38. </script>  
  39. </html>    
style.css
  1. .title  
  2. {  
  3.     font-size: large;  
  4.     font-weight: 400;  
  5.     font-style: italic;  
  6.   
  7. }  

In the above code, the tools object is used to initialize our custom formation option. The item is used to contain the list of formatting options in the key-value pair.

In the value of the items object, we need to provide the style which should be applied to the selected text in our Kendo Editor. The stylesheets object is used to load our custom style sheet while .title is our CSS class which is going to be applied on the selected text when the user uses the custom style option.

 
Adding Custom Styles in the Kendo editor 
 Select the content and choose the custom formatting option.
 
Adding Custom Styles in the Kendo editor 
 
That's it. We have successfully implemented the  custom style. I hope you have enjoyed this blog.
 
Thank you! Happy Coding!