Ignite UI API Reference

ui.igHtmlEditor

ui.igHtmlEditor_image

The igHtmlEditor control is a jQuery HTML editor control that features standard HTML editing capabilities. Formatting options include font face, font size, text and image alignment and link and table support. Further information regarding the classes, options, events, methods and themes of this API are available under the associated tabs above.

The following code snippet demonstrates how to initialize the igHtmlEditor control.

For details on how to reference the required scripts and themes for the igHtmlEditor control read, Using JavaScript Resources in Ignite UI and Styling and Theming Ignite UI.

Code Sample

  
        <!doctype html>
        <html>
        <head>
            <!-- Modernizr -->
            <script src="js/modernizr.js"></script>
            <!-- jQuery Core -->
            <script src="js/jquery.js"></script>
            <!-- jQuery UI -->
            <script src="js/jquery-ui.js"></script>
            <!-- Infragistics loader -->
            <script src="js/infragistics.loader.js"></script>
            <script>
                $.ig.loader({
                    scriptPath: "js",
                    cssPath: "css",
                    resources: "igHtmlEditor"
                });

                $.ig.loader(function () {
                    $("#htmlEditor").igHtmlEditor({
                        width: "100%"
                    });
                });
            </script>
        </head>
        <body>
            <div id="htmlEditor"></div>
        </body>
        </html>

Related Samples

Related Topics

Dependencies

jquery-1.9.1.js
jquery.ui.core.js
jquery.ui.widget.js
infragistics.util.js
infragistics.ui.shared.js
infragistics.ui.toolbarbutton.js
infragistics.ui.toolbar.js
infragistics.ui.popover.js
infragistics.ui.splitbutton.js
infragistics.ui.colorpicker.js
infragistics.ui.colorpickersplitbutton.js
infragistics.datasource.js
infragistics.ui.combo.js
infragistics.ui.dialog.js
infragistics.ui.htmleditor-en.js
infragistics.ui.toolbar-en.js

Inherits

  • customToolbars

    Type:
    array
    Default:
    []
    Elements Type:
    object

    The html editor custom toolbars list.

    Code Sample

     
            //Initialize
            $(".selector").igHtmlEditor({
                customToolbars: [
                {
                    name: "customToolbar",
                    collapseButtonIcon: "ui-igbutton-collapse",
                    expandButtonIcon: "ui-igbutton-expand",
                    items: [{
                        //Definition for custom button
                        name: "customButton",
                        type: "button",
                        handler: function() { alert("Custom button clicked!");},
                        scope: this,
                        props: {
                            isImage: {
                                value: false,
                                action: '_isSelectedAction'
                            },
                            imageButtonTooltip: {
                                value: "Custom button tooltip",
                                action: '_tooltipAction'
                            },
                            imageButtonIcon: {
                                value: "ui-igbutton-bold",
                                action: '_buttonIconAction'
                            }
                        }
                    },
                    {
                        //Definition for custom combo
                        name: "customCombo",
                        type: "combo",
                        handler: function(el, obj) {
                            alert("Selected item is: " + obj.value);
                        },
                        scope: this,
                        props: {
                            customComboWidth: {
                                value: 115,
                                action: "_comboWidthAction"
                            },
                            customComboHeight: {
                                value: "",
                                action: "_comboHeightAction"
                            },
                            customComboItemsListWidth: {
                                value: 115,
                                action: "_comboDropDownListWidth"
                            },
                            customComboSource: {
                                value: [{text: "Item 1", value: "Item 1"}, {text: "Item 2", value: "Item 2"}],
                                action: "_comboDataSourceAction"
                            },
                            selectedCustomComboItem: {
                                value: "Item 2",
                                action: "_comboSelectedItem"
                            }
                        }
                    }]
                }]
            });
            
            // Get
            var customToolbar = $(".selector").igHtmlEditor("option", "customToolbars");

  • height

    Type:
    number
    Default:
    350

    Set or get the widget height.

    Code Sample

     
            //Initialize
            $(".selector").igHtmlEditor({
                height: 100
                // or
                // height: "100%"
            });
            
            // Get
            var height = $(".selector").igHtmlEditor("option", "height");
            
            // Set
            $(".selector").igHtmlEditor("option", "height", 300);

  • inputName

    Type:
    string
    Default:
    source

    The name attribute of the html editor source view.

    Code Sample

     
            //Initialize
            $(".selector").igHtmlEditor({
                inputName: "blogContent"
            });
            
            // Get
            var inputName = $(".selector").igHtmlEditor("option", "inputName");

  • showCopyPasteToolbar

    Type:
    bool
    Default:
    true

    Shows/hides the "Copy Paste" toolbar.

    Code Sample

     
            //Initialize
            $(".selector").igHtmlEditor({
                showCopyPasteToolbar: false
            });
            
            //Get
            var showCopyPasteToolbar = $(".selector").igHtmlEditor("option", "showCopyPasteToolbar");
            
            //Set
            $(".selector").igHtmlEditor("option", "showCopyPasteToolbar", true);

  • showFormattingToolbar

    Type:
    bool
    Default:
    true

    Shows/hides the "Formatting" toolbar.

    Code Sample

     
            //Initialize
            $(".selector").igHtmlEditor({
                showFormattingToolbar: false
            });
            
            //Get
            var showFormattingToolbar = $(".selector").igHtmlEditor("option", "showFormattingToolbar");
            
            //Set
            $(".selector").igHtmlEditor("option", "showFormattingToolbar", true);

  • showInsertObjectToolbar

    Type:
    bool
    Default:
    true

    Shows/hides the "Insert Object" toolbar.

    Code Sample

     
            //Initialize
            $(".selector").igHtmlEditor({
                showInsertObjectToolbar: false
            });
            
            //Get
            var showInsertObjectToolbar = $(".selector").igHtmlEditor("option", "showInsertObjectToolbar");
            
            //Set
            $(".selector").igHtmlEditor("option", "showInsertObjectToolbar", true);

  • showTextToolbar

    Type:
    bool
    Default:
    true

    Shows/hides the "Text" toolbar.

    Code Sample

     
            //Initialize
            $(".selector").igHtmlEditor({
                showTextToolbar: false
            });
            
            //Get
            var showTextToolbar = $(".selector").igHtmlEditor("option", "showTextToolbar");
            
            //Set
            $(".selector").igHtmlEditor("option", "showTextToolbar", true);

  • toolbarSettings

    Type:
    array
    Default:
    []
    Elements Type:
    object

    The html editor toolbars list.

    Code Sample

     
            //Initialize
            $(".selector").igHtmlEditor({
                toolbarSettings: [
                {
                    name: "textToolbar",
                    expanded: false
                }]
            });
            
            //Get
            var toolbarSettings = $(".selector").igHtmlEditor("option", "toolbarSettings");

  • value

    Type:
    string
    Default:
    ""

    Used to render inside the html editor as initial content.

    Code Sample

     
            //Initialize
            $(".selector").igHtmlEditor({
                value: "Hello World!"
            });
            
            //Get
            var value = $(".selector").igHtmlEditor("option", "value");
            
            //Set
            $(".selector").igHtmlEditor("option", "value", "Hello World!1");

  • width

    Type:
    number
    Default:
    725

    Set or get the widget width.

    Code Sample

     
            //Initialize
            $(".selector").igHtmlEditor({
                width: 700
                //or
                //width: "100%"
            });
            
            // Get
            var width = $(".selector").igHtmlEditor("option", "width");
            
            // Set
            $(".selector").igHtmlEditor("option", "width", 300);

For more information on how to interact with the Ignite UI controls' events, refer to
Using Events in Ignite UI.

Note: Calling API methods programmatically does not raise events related to their operation unless specifically stated otherwise by the corresponding API documentation; those events are only raised by their respective user interaction.

Show Details

  • actionExecuted

    Cancellable:
    false

    Event fired after a toolbar item is clicked.

    Code Sample

     
            //Initialize
            $(".selector").igHtmlEditor({
                actionExecuted: function (evt, ui) {...}
            });
            
            //Delegate
            $(document).delegate(".selector", "ightmleditoractionexecuted", function (evt, ui) {
                //return reference to igHtmlEditor object
                ui.owner
                //return toolbar name
                ui.toolbar;
                //return action name
                ui.actionName;
            });

  • actionExecuting

    Cancellable:
    true

    Event fired before a toolbar item is clicked.

    Code Sample

     
            //Initialize
            $(".selector").igHtmlEditor({
                actionExecuting: function (evt, ui) {...}
            });

            //Delegate
            $(document).delegate(".selector", "ightmleditoractionexecuting", function (evt, ui) {
                //return reference to igHtmlEditor object
                ui.owner
                //return toolbar name
                ui.toolbar;
                //return action name
                ui.actionName;
            });

  • copy

    Cancellable:
    false

    Event is fired on keyboard copy action.

    Code Sample

     
            //Initialize
            $(".selector").igHtmlEditor({
                copy: function (evt, ui) {...}
            });
            
            //Delegate
            $(document).delegate(".selector", "ightmleditorcopy", function (evt, ui) {
                //return reference to igHtmlEditor object
                ui.owner
            });

  • cut

    Cancellable:
    false

    Event is fired on keyboard cut action.

    Code Sample

     
            //Initialize
            $(".selector").igHtmlEditor({
                cut: function (evt, ui) {...}
            });
            
            //Delegate
            $(document).delegate(".selector", "ightmleditorcut", function (evt, ui) {
                //return reference to igHtmlEditor object
                ui.owner
            });

  • paste

    Cancellable:
    false

    Event is fired on keyboard paste action.

    Code Sample

     
            //Initialize
            $(".selector").igHtmlEditor({
                paste: function (evt, ui) {...}
            });

            //Delegate
            $(document).delegate(".selector", "ightmleditorpaste", function (evt, ui) {
                //return reference to igHtmlEditor object
                ui.owner
            });

  • redo

    Cancellable:
    false

    Event is fired on keyboard redo action.

    Code Sample

     
            //Initialize
            $(".selector").igHtmlEditor({
                redo: function (evt, ui) {...}
            });
            
            //Delegate
            $(document).delegate(".selector", "ightmleditorredo", function (evt, ui) {
                //return reference to igHtmlEditor object
                ui.owner
            });

  • rendered

    Cancellable:
    false

    Event fired after the whole html editor widget has been rendered.

    Code Sample

     
            //Initialize
            $(".selector").igHtmlEditor({
                rendered: function (evt, ui) {
                    //return reference to igHtmlEditor object
                    ui.owner
                }
            });

  • rendering

    Cancellable:
    false

    Event fired before the html editor widget has been rendered.

    Code Sample

     
            //Initialize
            $(".selector").igHtmlEditor({
                rendering: function (evt, ui) {
                    //return reference to igHtmlEditor object
                    ui.owner
                }
            });

  • toolbarCollapsed

    Cancellable:
    false

    Event fired after a toolbar is collapsed.

    Code Sample

     
            //Initialize
            $(".selector").igHtmlEditor({
                toolbarCollapsed: function (evt, ui) {...}
            });
            
            //Delegate
            $(document).delegate(".selector", "ightmleditortoolbarcollapsed", function (evt, ui) {
                //return reference to igHtmlEditor object
                ui.owner
                //return reference to toolbar object
                ui.toolbar
                //return reference to toolbar element object
                ui.toolbarElement
            });

  • toolbarCollapsing

    Cancellable:
    true

    Event fired before a toolbar is collapsed.

    Code Sample

     
            //Initialize
            $(".selector").igHtmlEditor({
                toolbarCollapsing: function (evt, ui) {...}
            });
            
            //Delegate
            $(document).delegate(".selector", "ightmleditortoolbarcollapsing", function (evt, ui) {
                //return reference to igHtmlEditor object
                ui.owner
                //return reference to toolbar object
                ui.toolbar
                //return reference to toolbar element object
                ui.toolbarElement
            });

  • toolbarExpanded

    Cancellable:
    false

    Event fired after a toolbar is expanded.

    Code Sample

     
            //Initialize
            $(".selector").igHtmlEditor({
                toolbarExpanded: function (evt, ui) {...}
            });
            
            //Delegate
            $(document).delegate(".selector", "ightmleditortoolbarexpanded", function (evt, ui) {
                //return reference to igHtmlEditor object
                ui.owner
                //return reference to toolbar object
                ui.toolbar
                //return reference to toolbar element object
                ui.toolbarElement
            });

  • toolbarExpanding

    Cancellable:
    true

    Event fired before a toolbar is expanded.

    Code Sample

     
            //Initialize
            $(".selector").igHtmlEditor({
                toolbarExpanding: function (evt, ui) {...}
            });
            
            //Delegate
            $(document).delegate(".selector", "ightmleditortoolbarexpanding", function (evt, ui) {
                //return reference to igHtmlEditor object
                ui.owner
                //return reference to toolbar object
                ui.toolbar
                //return reference to toolbar element object
                ui.toolbarElement
            });

  • undo

    Cancellable:
    false

    Event is fired on keyboard undo action.

    Code Sample

     
            //Initialize
            $(".selector").igHtmlEditor({
                undo: function (evt, ui) {...}
            });
            
            //Delegate
            $(document).delegate(".selector", "ightmleditorundo", function (evt, ui) {
                //return reference to igHtmlEditor object
                ui.owner
            });

  • contentEditable

    .igHtmlEditor( "contentEditable" );
    Return Type:
    object
    Return Type Description:
    Returns the the content editable associated with this Html Editor.

    Returns the content editable associated with this Html Editor.

  • destroy

    .igHtmlEditor( "destroy" );

    Destroys the widget.

    Code Sample

     
            $(".selector").igHtmlEditor("destroy");

  • executeAction

    .igHtmlEditor( "executeAction", actionName:string, [args:object] );

    Executes htmleditor commands.

    • actionName
    • Type:string
    • The command name.
    • args
    • Type:object
    • Optional
    • Additional paramaterd for the command.

    Code Sample

     
            $(".selector").igHtmlEditor("executeAction", "increasefontsize");
            $(".selector").igHtmlEditor("executeAction", "bold");
            $(".selector").igHtmlEditor("executeAction", "italic");
            $(".selector").igHtmlEditor("executeAction", "underline");
            $(".selector").igHtmlEditor("executeAction", "strikethrough");
            $(".selector").igHtmlEditor("executeAction", "decreasefontsize");
            $(".selector").igHtmlEditor("executeAction", "fontname", "Lucida Console");
            $(".selector").igHtmlEditor("executeAction", "fontname", "Verdana");
            $(".selector").igHtmlEditor("executeAction", "fontsize", "5");
            $(".selector").igHtmlEditor("executeAction", "formatBlock", "h6");
            $(".selector").igHtmlEditor("executeAction", "forecolor", "blue");
            $(".selector").igHtmlEditor("executeAction", "backcolor", "red");
            $(".selector").igHtmlEditor("executeAction", "justifyright");
            $(".selector").igHtmlEditor("executeAction", "justifycenter");
            $(".selector").igHtmlEditor("executeAction", "justifyleft");
            $(".selector").igHtmlEditor("executeAction", "justifyfull");
            $(".selector").igHtmlEditor("executeAction", "insertunorderedlist");
            $(".selector").igHtmlEditor("executeAction", "insertorderedlist");
            $(".selector").igHtmlEditor("executeAction", "outdent");
            $(".selector").igHtmlEditor("executeAction", "indent");
            
            //Works on Internet Explorer only
            $(".selector").igHtmlEditor("executeAction", "cut");
            //Works on Internet Explorer only
            $(".selector").igHtmlEditor("executeAction", "copy");
            //Works on Internet Explorer only
            $(".selector").igHtmlEditor("executeAction", "paste");

  • getContent

    .igHtmlEditor( "getContent", format:string );
    Return Type:
    string
    Return Type Description:
    The editor content.

    Gets the content of the html editor.

    • format
    • Type:string
    • Returns the content as html or plain text. Values can be "text" or "html".

    Code Sample

     
            var plainContent = $(".selector").igHtmlEditor("getContent", "text");
            var htmlContent = $(".selector").igHtmlEditor("getContent", "html");

  • insertAtCaret

    .igHtmlEditor( "insertAtCaret", element:object );

    Inserts the provided content at the position of the caret.

    • element
    • Type:object
    • Accepts html string, DOM element or a jQuery object.

    Code Sample

    			$(".selector").igHtmlEditor("insertAtCaret", "<div />");

  • isDirty

    .igHtmlEditor( "isDirty" );

    Returns true/false if the editor contents were modified or not.

    Code Sample

     
            var isDirty = $(".selector").igHtmlEditor("isDirty");

  • range

    .igHtmlEditor( "range" );
    Return Type:
    object
    Return Type Description:
    Returns Range object that represent the current range in the content editable.

    Returns Range object that represent the current range in the content editable.

    Code Sample

    			var range = $(".selector").igHtmlEditor("range");

  • selection

    .igHtmlEditor( "selection" );
    Return Type:
    object
    Return Type Description:
    Returns Selection object that represent the current selection in the content editable.

    Returns Selection object that represent the current selection in the content editable.

    Code Sample

    			var range = $(".selector").igHtmlEditor("selection");

  • setContent

    .igHtmlEditor( "setContent", content:string, format:string );

    Sets the content of the html editor.

    • content
    • Type:string
    • The content which will be set.
    • format
    • Type:string
    • The content type: "text" or "html".

    Code Sample

     
            $(".selector").igHtmlEditor("setContent", "Hello World!", "text");
            $(".selector").igHtmlEditor("setContent", "<h1>Hello World!</h1>", "html");

  • widget

    .igHtmlEditor( "widget" );

    Returns the element on which the widget was instantiated.

    Code Sample

     
            var widget = $(".selector").igHtmlEditor("widget");

  • ui-widget ui-widget-content ui-corner-all ui-ightmleditor ui-helper-clearfix

    The widget base class css.

  • ui-ightmleditor-content

    The html editor content styles.

  • ui-igpathfinder

    The html editor dom navigation toolbar css.

  • ui-igtoolbars-holder

    The html editor toolbars style.

  • ui-widget-content

    The workspace css.

Copyright © 1996 - 2024 Infragistics, Inc. All rights reserved.

#