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.
tools.palette
Let’s Specifies the color palette for “foreColor” and “backColor” tools.String |Array
(default: null)
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