Skip to content
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
87 lines (80 sloc) 3.44 KB
<!DOCTYPE html>
<title>Custom Toolbars and Buttons Sample - Custom Toolbars and Buttons with HTML Editor Control - Ignite UI�</title>
<!-- Ignite UI Required Combined CSS Files -->
<link href="../../dist/css/themes/infragistics/infragistics.theme.css" rel="stylesheet">
<link href="../../dist/css/structure/infragistics.css" rel="stylesheet">
<script src=""></script>
<script src="../../node_modules/jquery/dist/jquery.js"></script>
<script src=""></script>
<!-- Ignite UI Required Combined JavaScript Files -->
<script src="../../dist/js/infragistics.core-lite.js"></script>
<script src="../../dist/js/infragistics.lob-lite.js"></script>
<body><p>This sample demonstrates how the igHtmlEditor control works as an email client. This implementation features a custom toolbar where you can add a signature to the message.</p>
<style type="text/css">
#htmlEditor {
margin-bottom: 10px;
padding-left: 10px;
color: Red;
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; }
<!--igHtmlEditor target element-->
<div id="htmlEditor"></div>
$(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");
You can’t perform that action at this time.