Available in the OSS Version

HTML Editor - Toolbars and Buttons

This sample demonstrates how the igHtmlEditor control works as an email client.
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.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/2024.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.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>