Introduction:
Kendo Editor is a one of widget from kendo UI library, allows you to create rich textual content, it’s simply What-You-See-Is-What-You-Get. In this blog we will learn how to set the default color for font color tool in Kendo Editor.
Prerequisite:
Basic knowledge in jQuery.
Kendo editor initialization:
Kendo editor can be initialized from the below piece of code in jQuery.
var editor = $("#editor").kendoEditor() There are more tools like bold, Italic, Underline , forecolor, fontSize and so on available in kendo editor. The tools property in kendo editor is used to define the tools to be used in kendo editor.
var editor = $(“#editor”).kendoEditor({
tools: [
“bold”,
“italic”,
“underline”,
“fontSize”,
“foreColor”,
“backColor”,
]
});
Complete code including kendo libraries.
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/editor/all-tools">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<textarea id="editor" rows="10" cols="30" style="width:100%;height:400px">
Hello
</textarea>
<script>
var editor = $("#editor").kendoEditor({
tools: [
"bold",
"italic",
"underline",
"foreColor",
"backColor",
]
}).data("kendoEditor");
</script>
</div>
</body>
</html>
When you run this HTML in browser you will get a kendo editor with the all the tools defined in the code.
Read here, if you want to know list of supported tools in kendo editor.
From the above editor you can notice the forecolor is set to some unknow color. Now our ultimate goal is to set some pre-defined color.
The text color is the editor black. So, lets set a default color for the forecolor as black in the tool using below code.
$(editor.toolbar.element)
.find("div.k-i-foreground-color")
.data("kendoColorPicker")
.value("#000000");Complete code
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/editor/all-tools">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<textarea id="editor" rows="10" cols="30" style="width:100%;height:400px">
Hello
</textarea>
<script>
var editor = $("#editor").kendoEditor({
tools: [
"bold",
"italic",
"underline",
"foreColor",
"backColor",
]
}).data("kendoEditor");
$(editor.toolbar.element)
.find("div.k-i-foreground-color")
.data("kendoColorPicker")
.value("#000000");
</script>
</div>
</body>
</html>
The fore color indicator in kendo editor is turns to black.
Summary:
We have seen how to initialize the kendo editor using jQuery and how to set the default color indicator for the forecolor tool in kendo editor.
Source code – Get here.
I hope this blog will help you to get start with Regular Expression in .NET. Please share your queries, suggestions in the comments section below.
Happy Coding!!!
