Available in the OSS Version

HTML Editor - API and Events

API Explorer
Manipulating Text

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
API Viewer
ightmleditorrendered
ightmleditorrendering

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

This sample demonstrates how to handle events in the Html Editor control and API usage.

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" />

    <!-- Used to style the API Viewer and Explorer UI -->
    <link href="/css/apiviewer.css" rel="stylesheet" type="text/css" />

    <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>

    <!-- Used to add markup and provide logging 
        functionality for the API Explorer and API Viewer UI -->
    <script src="/js/apiviewer.js"></script>
</head>
<body>
    <style type="text/css">
        #htmlEditor {
            margin-bottom: 10px;
        }
        @media print {
            .noprint {
                display: none;
            }
            .content {
                border: 0px;
            }
            #htmlEditor_source {
                display:none;
            }
            #htmlEditor_editor {
                width: 100%;
            }
            #htmlEditor_domPathToolbar {
                display: none;
            }
            .ui-ightmleditor-content iframe
            {
                border-width: 0px;
            }
        }
        #buttons {
            margin-bottom: 10px;
        }
		/* 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>

    <div class="api-explorer noprint">
        <fieldset>
            <legend>Manipulating Text</legend>
            <div id="buttons" class="noprint">
                <button id="standardText" >Standard Text</button>
                <button id="emphasize">Emphasize</button>
                <button id="print" >Print</button>
            </div>
        </fieldset>
    </div>
    <br />
    <div id="htmlEditor"></div>

    <div class="api-viewer noprint"></div>

    <script>

        $(function () {

            // Used to show output in the API Viewer at runtime, 
            // defined in external script 'apiviewer.js'    
            var apiViewer = new $.ig.apiViewer();

            /*----------------- Event Examples -------------------------*/

            $("#htmlEditor").on("ightmleditorrendering", function (evt, ui) {
                var message = "ightmleditorrendering";
                apiViewer.log(message);
            });

            $("#htmlEditor").on("ightmleditorrendered", function (evt, ui) {
                var message = "ightmleditorrendered";
                apiViewer.log(message);
            });

            $("#htmlEditor").on("ightmleditoractionexecuting", function (evt, ui) {
                var message = "ightmleditoractionexecuting";
                apiViewer.log(message);
            });

            $("#htmlEditor").on("ightmleditoractionexecuted", function (evt, ui) {
                var message = "ightmleditoractionexecuted";
                apiViewer.log(message);
            });

            $("#htmlEditor").on("ightmleditortoolbarcollapsing", function (evt, ui) {
                var message = "ightmleditortoolbarcollapsing";
                apiViewer.log(message);
            });

            $("#htmlEditor").on("ightmleditortoolbarcollapsed", function (evt, ui) {
                var message = "ightmleditortoolbarcollapsed";
                apiViewer.log(message);
            });

            $("#htmlEditor").on("ightmleditortoolbarexpanding", function (evt, ui) {
                var message = "ightmleditortoolbarexpanding";
                apiViewer.log(message);
            });

            $("#htmlEditor").on("ightmleditortoolbarexpanded", function (evt, ui) {
                var message = "ightmleditortoolbarexpanded";
                apiViewer.log(message);
            });

            $("#htmlEditor").on("ightmleditorcut", function (evt, ui) {
                var message = "ightmleditortoolbarcut";
                apiViewer.log(message);
            });

            $("#htmlEditor").on("ightmleditorcopy", function (evt, ui) {
                var message = "ightmleditortoolbarcopy";
                apiViewer.log(message);
            });

            $("#htmlEditor").on("ightmleditorpaste", function (evt, ui) {
                var message = "ightmleditortoolbarpaste";
                apiViewer.log(message);
            });

            $("#htmlEditor").on("ightmleditorundo", function (evt, ui) {
                var message = "ightmleditortoolbarundo";
                apiViewer.log(message);
            });

            $("#htmlEditor").on("ightmleditorredo", function (evt, ui) {
                var message = "ightmleditorredo";
                apiViewer.log(message);
            });

            $("#standardText").on("click", function () {
                var currentHtml = $("#htmlEditor").igHtmlEditor("getContent", "html");
                $("#htmlEditor").igHtmlEditor("setContent", currentHtml + "This is standard text.", "html");
            });

            $("#emphasize").on("click", function () {
                $("#htmlEditor").igHtmlEditor("executeAction", "bold");
                $("#htmlEditor").igHtmlEditor("executeAction", "italic");
                $("#htmlEditor").igHtmlEditor("executeAction", "foreColor", "red");
            });

            $("#print").on("click", function () {
                var focusAndPrintType = "function";
                if ($.ig.util.isIE8) {
                    focusAndPrintType = "object"
                }
                if (typeof document.getElementById("htmlEditor_editor").focus === focusAndPrintType) {
                    document.getElementById("htmlEditor_editor").focus();
                }
                if (typeof document.getElementById("htmlEditor_editor").print === focusAndPrintType) {
                    document.getElementById("htmlEditor_editor").print();
                }
                if (typeof document.getElementById("htmlEditor_editor").contentWindow.focus === focusAndPrintType) {
                    document.getElementById("htmlEditor_editor").contentWindow.focus();
                }
                if (typeof document.getElementById("htmlEditor_editor").contentWindow.print === focusAndPrintType) {
                    document.getElementById("htmlEditor_editor").contentWindow.print();
                }
            });

            /*----------------- Instantiation -------------------------*/
            $("#standardText").igButton();
            $("#emphasize").igButton();
            $("#print").igButton();

            var height = $('html').hasClass('touch') ? 500 : 350;

            $("#htmlEditor").igHtmlEditor({
                width: "98%",
                height: height
            });

            $("#htmlEditor").igHtmlEditor("setContent", "", "html");
        });
        
    </script>

</body>
</html>