Available in the OSS Version
HTML Editor - Toolbars and Buttons
This sample demonstrates how the igHtmlEditor control works as an email client.
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.
This implementation features a custom toolbar where you can add a signature to the message.
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">
#htmlEditor {
margin-bottom: 10px;
}
#feedback
{
padding-left: 10px;
color: Red;
}
span.ui-icon.ui-icon-insert-email
{
background-image: url("/images/samples/html-editor/ui-icons_222222_256x240.png")!important;
background-position: -192px -128px;
}
/* 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;
// initialize igHtmlEditor
var htmlEditor = $("#htmlEditor").igHtmlEditor({
width: "99%",
height: height,
inputName: "htmlEditor",
customToolbars: [
{
name: "EmailSignature",
collapseButtonIcon: "ui-igbutton-collapse",
expandButtonIcon: "ui-igbutton-expand",
items: [{
name: "appendSignature",
type: "button",
handler: appendSignature,
scope: this,
props: {
isImage: {
value: false,
action: '_isSelectedAction'
},
imageButtonTooltip: {
value: "Insert e-mail signature",
action: '_tooltipAction'
},
imageButtonIcon: {
value: "ui-icon-insert-email",
action: '_buttonIconAction'
}
}
}]
}]
});
});
function appendSignature(ui) {
var currentContent = $("#htmlEditor").igHtmlEditor("getContent", "html");
var signature = "<p>Best regards,<br/>John Doe<br/>Acme Corp<br/>555-1111</p>";
$("#htmlEditor").igHtmlEditor("setContent", currentContent + signature, "html");
}
</script>
</body>
</html>