Available in the OSS Version
HTML Editor - Icons and Styles
This sample demonstrates how to customize igHtmlEditor look and feel by using CSS styles.
This sample uses CTP (Community Technical Preview) features. The API and behavior may change when these features are released with full support.
This sample is designed for a larger screen size.
On mobile, try rotating your screen, view full size, or email to another device.
Since the igHtmlEditor control doesn't support the jQuery UI CSS Framework for styling, the standard Infragistics theme and the Windows UI themes are supported by default.
Code View
Copy to Clipboard
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/infragistics.css" rel="stylesheet" />
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.lob.js"></script>
</head>
<body>
<style type="text/css">
.ui-ightmleditor .ui-igbutton.ui-state-default .ui-igbutton-copy,
.ui-ightmleditor .ui-igbutton.ui-state-default.ui-state-hover .ui-icon.ui-igbutton-copy
{
background-image: url("/images/samples/html-editor/ig-html-editor-custom-styles-sprite.png")!important;
background-position: 0 -160px;
}
.ui-ightmleditor .ui-igbutton.ui-state-default .ui-igbutton-cut,
.ui-ightmleditor .ui-igbutton.ui-state-default.ui-state-hover .ui-igbutton-cut.ui-icon
{
background-image: url("/images/samples/html-editor/ig-html-editor-custom-styles-sprite.png")!important;
background-position: 0 0;
}
.ui-ightmleditor .ui-igbutton.ui-state-default .ui-igbutton-paste,
.ui-ightmleditor .ui-igbutton.ui-state-default.ui-state-hover .ui-igbutton-paste.ui-icon
{
background-image: url("/images/samples/html-editor/ig-html-editor-custom-styles-sprite.png")!important;
background-position: 0 -176px;
}
.ui-ightmleditor .ui-igbutton.ui-state-default .ui-igbutton-bold ,
.ui-ightmleditor .ui-igbutton.ui-state-default.ui-state-hover .ui-igbutton-bold.ui-icon
{
background-image: url("/images/samples/html-editor/ig-html-editor-custom-styles-sprite.png")!important;
background-position: 0 -336px;
}
.ui-ightmleditor .ui-igbutton.ui-state-default .ui-igbutton-italic ,
.ui-ightmleditor .ui-igbutton.ui-state-default.ui-state-hover .ui-igbutton-italic.ui-icon
{
background-image: url("/images/samples/html-editor/ig-html-editor-custom-styles-sprite.png")!important;
background-position: 0 -400px;
}
.ui-ightmleditor .ui-igbutton.ui-state-default .ui-igbutton-underline ,
.ui-ightmleditor .ui-igbutton.ui-state-default.ui-state-hover .ui-igbutton-underline.ui-icon
{
background-image: url("/images/samples/html-editor/ig-html-editor-custom-styles-sprite.png")!important;
background-position: 0 -464px;
}
.ui-ightmleditor .ui-igbutton.ui-state-default .ui-igbutton-strikethrough,
.ui-ightmleditor .ui-igbutton.ui-state-default.ui-state-hover .ui-igbutton-strikethrough.ui-icon
{
background-image: url("/images/samples/html-editor/ig-html-editor-custom-styles-sprite.png")!important;
background-position: 0 -448px;
}
.ui-ightmleditor .ui-igbutton.ui-state-default .ui-igbutton-table,
.ui-ightmleditor .ui-igbutton.ui-state-default.ui-state-hover .ui-igbutton-table.ui-icon
{
background-image: url("/images/samples/html-editor/ig-html-editor-custom-styles-sprite.png")!important;
background-position: 0 -192px;
}
.ui-ightmleditor .ui-igbutton.ui-state-default .ui-igbutton-addrow,
.ui-ightmleditor .ui-igbutton.ui-state-default.ui-state-hover .ui-igbutton-addrow.ui-icon
{
background-image: url("/images/samples/html-editor/ig-html-editor-custom-styles-sprite.png")!important;
background-position: 0 -224px;
}
.ui-ightmleditor .ui-igbutton.ui-state-default .ui-igbutton-addcolumn,
.ui-ightmleditor .ui-igbutton.ui-state-default.ui-state-hover .ui-igbutton-addcolumn.ui-icon
{
background-image: url("/images/samples/html-editor/ig-html-editor-custom-styles-sprite.png")!important;
background-position: 0 -256px;
}
.ui-ightmleditor .ui-igbutton.ui-state-default .ui-igbutton-removerow,
.ui-ightmleditor .ui-igbutton.ui-state-default.ui-state-hover .ui-igbutton-removerow.ui-icon
{
background-image: url("/images/samples/html-editor/ig-html-editor-custom-styles-sprite.png")!important;
background-position: 0 -208px;
}
.ui-ightmleditor .ui-igbutton.ui-state-default .ui-igbutton-removecolumn,
.ui-ightmleditor .ui-igbutton.ui-state-default.ui-state-hover .ui-igbutton-removecolumn.ui-icon
{
background-image: url("/images/samples/html-editor/ig-html-editor-custom-styles-sprite.png")!important;
background-position: 0 -240px;
}
.ui-ightmleditor .ui-igbutton.ui-state-default .ui-igbutton-addimage,
.ui-ightmleditor .ui-igbutton.ui-state-default.ui-state-hover .ui-igbutton-addimage.ui-icon
{
background-image: url("/images/samples/html-editor/ig-html-editor-custom-styles-sprite.png")!important;
background-position: 0 -96px;
}
.ui-ightmleditor .ui-igbutton.ui-state-default .ui-igbutton-addlink,
.ui-ightmleditor .ui-igbutton.ui-state-default.ui-state-hover .ui-igbutton-addlink.ui-icon
{
background-image: url("/images/samples/html-editor/ig-html-editor-custom-styles-sprite.png")!important;
background-position: 0 -128px;
}
.ui-ightmleditor .ui-igbutton.ui-state-default .ui-igbutton-unorderedlist,
.ui-ightmleditor .ui-igbutton.ui-state-default.ui-state-hover .ui-igbutton-unorderedlist.ui-icon
{
background-image: url("/images/samples/html-editor/ig-html-editor-custom-styles-sprite.png")!important;
background-position: 0 -416px;
}
.ui-ightmleditor .ui-igbutton.ui-state-default .ui-igbutton-orderedlist,
.ui-ightmleditor .ui-igbutton.ui-state-default.ui-state-hover .ui-igbutton-orderedlist.ui-icon
{
background-image: url("/images/samples/html-editor/ig-html-editor-custom-styles-sprite.png")!important;
background-position: 0 -432px;
}
.ui-ightmleditor .ui-igbutton.ui-state-default .ui-igbutton-viewsource-icon,
.ui-ightmleditor .ui-igbutton.ui-state-default.ui-state-hover .ui-igbutton-viewsource-icon.ui-icon
{
background-image: url("/images/samples/html-editor/ig-html-editor-custom-styles-sprite.png")!important;
background-position: 0 -64px;
}
.ui-ightmleditor .ui-igbutton.ui-state-default .ui-igbutton-indent,
.ui-ightmleditor .ui-igbutton.ui-state-default.ui-state-hover .ui-igbutton-indent.ui-icon
{
background-image: url("/images/samples/html-editor/ig-html-editor-custom-styles-sprite.png")!important;
background-position: 0 -368px;
}
.ui-ightmleditor .ui-igbutton.ui-state-default .ui-igbutton-removeindent,
.ui-ightmleditor .ui-igbutton.ui-state-default.ui-state-hover .ui-igbutton-removeindent.ui-icon
{
background-image: url("/images/samples/html-editor/ig-html-editor-custom-styles-sprite.png")!important;
background-position: 0 -384px;
}
.ui-ightmleditor .ui-igbutton.ui-state-default .ui-igbutton-justifyright,
.ui-ightmleditor .ui-igbutton.ui-state-default.ui-state-hover .ui-igbutton-justifyright.ui-icon
{
background-image: url("/images/samples/html-editor/ig-html-editor-custom-styles-sprite.png")!important;
background-position: 0 -320px;
}
.ui-ightmleditor .ui-igbutton.ui-state-default .ui-igbutton-justifyleft,
.ui-ightmleditor .ui-igbutton.ui-state-default.ui-state-hover .ui-igbutton-justifyleft.ui-icon
{
background-image: url("/images/samples/html-editor/ig-html-editor-custom-styles-sprite.png")!important;
background-position: 0 -304px;
}
.ui-ightmleditor .ui-igbutton.ui-state-default .ui-igbutton-justifycenter,
.ui-ightmleditor .ui-igbutton.ui-state-default.ui-state-hover .ui-igbutton-justifycenter.ui-icon
{
background-image: url("/images/samples/html-editor/ig-html-editor-custom-styles-sprite.png")!important;
background-position: 0 -272px;
}
.ui-ightmleditor .ui-igbutton.ui-state-default .ui-igbutton-justifyfull,
.ui-ightmleditor .ui-igbutton.ui-state-default.ui-state-hover .ui-igbutton-justifyfull.ui-icon
{
background-image: url("/images/samples/html-editor/ig-html-editor-custom-styles-sprite.png")!important;
background-position: 0 -288px;
}
.ui-icon.ui-igbutton-copy:before, .ui-igbutton-cut.ui-icon:before, .ui-igbutton-paste.ui-icon:before,
.ui-igbutton-bold.ui-icon:before, .ui-igbutton-italic.ui-icon:before, .ui-igbutton-underline.ui-icon:before,
.ui-igbutton-strikethrough.ui-icon:before, .ui-igbutton-table.ui-icon:before, .ui-igbutton-addrow.ui-icon:before,
.ui-igbutton-addcolumn.ui-icon:before, .ui-igbutton-removerow.ui-icon:before, .ui-igbutton-addimage.ui-icon:before,
.ui-igbutton-addlink.ui-icon:before, .ui-igbutton-unorderedlist.ui-icon:before, .ui-igbutton-orderedlist.ui-icon:before,
.ui-igbutton-viewsource-icon.ui-icon:before, .ui-igbutton-removeindent.ui-icon:before, .ui-igbutton-indent.ui-icon:before,
.ui-igbutton-justifyright.ui-icon:before, .ui-igbutton-justifyleft.ui-icon:before, .ui-igbutton-justifycenter.ui-icon:before,
.ui-igbutton-justifyfull.ui-icon:before
{
content: "";
}
.ui-ightmleditor .ui-igtoolbar .ui-igbutton.ui-state-default {
border-color:transparent;
}
.ui-ightmleditor {
background-image: none;
}
.ui-corner-all {
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
}
.ui-widget-content.ui-igtoolbar {
border: none;
}
.ui-ightmleditor-content iframe {
box-shadow: none;
}
/* Override sample's browser styles */
#htmlEditor h1, #htmlEditor h2, #htmlEditor h3, #htmlEditor h4, #htmlEditor h5, #htmlEditor h6 { margin: 0px; }
#htmlEditor h1 { font-size: 1.9em; }
#sampleContainer { overflow: visible; }
</style>
<!--igHtmlEditor target element-->
<div id="htmlEditor"></div>
<script>
$(function () {
var height = $('html').hasClass('touch') ? 500 : 350;
$("#htmlEditor").igHtmlEditor({
width: "99%",
height: height
});
});
</script>
</body>
</html>