Tech

Change KENDO-UI EDITOR FONTCOLOR and BackColor Dropdown

· 1 min read >

Changing Kendo-UI Editor Colors for Font and BackColor:

In this article we will learn about custom Kendo-UI Editor scenario where we need to provide a custom colors for Font and Back Color in the Kendo-UI Editor .we can change the FontColor and BackColor dropdowns as mentioned below. Firstly let’s start looking into hands on details.

Change KENDO-UI EDITOR
KENDO UI EDITOR
Furthermore by looking into the Kendo UI Editor documentation we can see this

tools.palette String |Array (default: null)

Let’s Specifies the color palette for “foreColor” and “backColor” tools.

Secondly, Using tools.palette is the how we tell how to Change kendo-UI Editor on using our custom color.

Moreover , you can click on the documentation link below if you want more detailed configuration.

Documentation – http://docs.telerik.com/kendo-ui/api/javascript/ui/editor#configuration-tools.palette

You can also click on the Dojo Live Sample below to see the running code.

Dojo Sample : – http://dojo.telerik.com/utIyO

Now Let’s looks into the code below and it’s explaination.

First of all see i have used built in array tools and provide array colors to palette . Please also notice name for “backColor” and “foreColor”.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>
 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.mobile.all.min.css"/>
 
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
</head>
<body>
  
<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
    tools: [{
        name: "backColor",
              palette: ["#f0d0c9", "#e2a293", "#d4735e", "#65281a"],
     
     },
        { 
          name: "foreColor",
          palette: ["red", "green", "#d47eee", "#65281a"]
        } ]
});
</script>
</body>
</html>

In conclusion, the only way to truly learn a skill is by actually doing what you’ll have to do in the real world

What is Next

HOW TO PASS VALUE TO JAVASCRIPT FUNCTION ON GRID USING CLIENTTEMPLATE USING HTML5

net core six article

ASP.NET CORE 6 JWT Authentication

Apollo11 in Tech
  ·   9 min read
>