Available in the OSS Version

HTML Editor - Standalone Toolbar

This sample demonstrates how the igHtmlEditor control works with standalone toolbar.
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

This sample is designed for a larger screen size.

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

When a text is selected a toolbar is shown below it. The toolbar options are Bold, Italic and Underline.

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

        #text_collapseButton,
        #formatting_collapseButton {
            display: none;
        }

        #toolbarHolder {
            z-index: 99999;
        }

		/* 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">
        Use the fastest jQuery grid on the market to get more interactivity out of your static HTML tables and data. Our latest iteration offers more line of business features, along with our unrivalled quality and performance.
    </div>

    <div id="toolbarHolder">
        <div id="text"></div>
    </div>

    <script>
        function getSelectionCoords() {
            var sel = window.frames[0].document.selection, range;
            var x = 0, y = 0;
            if (sel) {
                if (sel.type != "Control") {
                    range = sel.createRange();
                    range.collapse(true);
                    x = range.boundingLeft;
                    y = range.boundingTop;
                }
            } else if (window.frames[0].document.getSelection) {
                sel = window.frames[0].document.getSelection();
                if (sel.rangeCount) {
                    range = sel.getRangeAt(0).cloneRange();
                    if (range.getClientRects) {
                        range.collapse(true);
                        var rect = range.getClientRects()[0];
                        if (rect) {
                            x = rect.left;
                            y = rect.top;
                        }
                    }
                }
            }

            return {
                x: x,
                y: y + 118
            };
        }

        function selectionIs(sel, state) {
            var range, isState = false;
            if (window.frames[0].document.getSelection) {
                if (sel && sel.getRangeAt && sel.rangeCount) {
                    range = sel.getRangeAt(0);
                    sel.removeAllRanges();
                    sel.addRange(range);
                }
            }
            if (window.frames[0].document.queryCommandState) {
                isState = window.frames[0].document.queryCommandState(state);
            }
            return isState;
        }

        $(function () {
            var $iframe,
                mouseMoveCoord,
                $htmlEditor = $("#htmlEditor"),
                $toolbarHolder = $("#toolbarHolder"),
                $textToolbar = $('#text'),
                height = $('html').hasClass('touch') ? 500 : 350;

            $toolbarHolder.hide();

            $htmlEditor.igHtmlEditor({
                width: "99%",
                height: height,
                inputName: "htmlEditor"
            });

            $textToolbar.igToolbar({
                "name": "textToolbar",
                "displayName": "Toolbar text",
                "isExpanded": true,
                "collapseButtonIcon": "ui-igbutton-collapse",
                "expandButtonIcon": "ui-igbutton-expand",
                "items": [{
                    "name": "Bold",
                    "type": "button",
                    "scope": null,
                    "props": {
                        "allowToggling": {
                            "value": true
                        },
                        "isBold": {
                            "value": false,
                            "action": "_isSelectedAction"
                        },
                        "boldButtonTooltip": {
                            "value": "Bold",
                            "action": "_tooltipAction"
                        },
                        "boldButtonIcon": {
                            "value": "ui-igbutton-bold",
                            "action": "_buttonIconAction"
                        }
                    }
                }, {
                    "name": "Italic",
                    "type": "button",
                    "props": {
                        "isItalic": {
                            "value": false,
                            "action": "_isSelectedAction"
                        },
                        "italicButtonTooltip": {
                            "value": "Italic",
                            "action": "_tooltipAction"
                        },
                        "italicButtonIcon": {
                            "value": "ui-igbutton-italic",
                            "action": "_buttonIconAction"
                        }
                    }
                }, {
                    "name": "Underline",
                    "type": "button",
                    "props": {
                        "isUnderline": {
                            "value": false,
                            "action": "_isSelectedAction"
                        },
                        "underlineButtonTooltip": {
                            "value": "Underline",
                            "action": "_tooltipAction"
                        },
                        "underlineButtonIcon": {
                            "value": "ui-igbutton-underline",
                            "action": "_buttonIconAction"
                        }
                    }
                }]
            });

            $iframe = $('#htmlEditor_editor');

            $iframe.contents().find("body").on("mouseup", function (ev) {
                var userSelection,
                    userSelectionString,
                    $bold = $textToolbar.find("div[id*='Bold']"),
                    $italic = $textToolbar.find("div[id*='Italic']"),
                    $underline = $textToolbar.find("div[id*='Underline']"),
                    coord = getSelectionCoords();

                if (window.frames[0].document.getSelection) {
                    userSelection = window.frames[0].document.getSelection();
                    userSelectionString = userSelection.toString();
                } else {
                    userSelection = window.frames[0].document.selection.createRange();
                    userSelectionString = userSelection.text;
                }
                if (userSelectionString !== "") {
                    $toolbarHolder.parent().css({
                        position: 'relative'
                    });

                    $toolbarHolder.css({
                        top: coord.y,
                        left: coord.x,
                        position: 'absolute'
                    });

                    mouseMoveCoord = {
                        x: ev.pageX,
                        y: ev.pageY
                    };

                    if (selectionIs(userSelection, "bold")) {
                        $bold.igToolbarButton("activate");
                    }

                    if (selectionIs(userSelection, "italic")) {
                        $italic.igToolbarButton("activate");
                    }

                    if (selectionIs(userSelection, "underline")) {
                        $underline.igToolbarButton("activate");
                    }

                    $iframe.contents().find("body").on("mousemove", function (ev) {
                        if (userSelectionString !== "") {
                            if (mouseMoveCoord &&
                                ((Math.abs(mouseMoveCoord.x - ev.pageX) > 50) ||
                                (Math.abs(mouseMoveCoord.y - ev.pageY) > 50))) {
                                
                                $toolbarHolder.fadeOut();
                            } else {
                                $toolbarHolder.fadeIn();
                            }
                        }
                    });

                    $iframe.contents().find("body").on("keydown", function (ev) {
                        if (ev.keyCode === 66 && ev.ctrlKey) {
                            $bold.igToolbarButton("toggle");
                        }

                        if (ev.keyCode === 73 && ev.ctrlKey) {
                            $italic.igToolbarButton("toggle");
                        }

                        if (ev.keyCode === 85 && ev.ctrlKey) {
                            $underline.igToolbarButton("toggle");
                        }
                    });

                    $toolbarHolder.fadeIn();                   
                } else {
                    $iframe.contents().find("body").off("mousemove");
                    $iframe.contents().find("body").off("keydown")

                    $toolbarHolder.hide();
                    if ($bold.igToolbarButton) {
                        $bold.igToolbarButton("deactivate");
                    }

                    if ($italic) {
                        $italic.igToolbarButton("deactivate");
                    }

                    if ($underline) {
                        $underline.igToolbarButton("deactivate");
                    }
                }
            });

            $(document).on("igtoolbarbuttonclick", function (ev) {
                var command = $(ev.target).attr("id").replace($textToolbar.attr("id") + "_item_", "");
                $htmlEditor.igHtmlEditor("executeAction", command.toLowerCase());
            });

            $(document).on("ightmleditoractionexecuting", function (ev, ui) {
                var $button = $textToolbar.find("div[id*='" + ui.actionName + "']");

                if ($button.igToolbarButton) {
                    $textToolbar.find("div[id*='" + ui.actionName + "']").igToolbarButton("toggle");
                }
            });
        });
    </script>

</body>
</html>