Create the best Web experiences in browsers and devices with our user interface controls designed expressly for jQuery, ASP.NET MVC, HTML 5 and CSS 3. You’ll be building on a solid and proven foundation without any plug-ins or extensions, just real world best practices and the most forward-thinking, robust Web technology.

Infragistics NetAdvantage jQuery 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 Resouces in NetAdvantage for jQuery and Styling and Theming NetAdvantage for jQuery.

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

Dependencies

jquery-1.4.4.js
jquery.ui.core.js
jquery.ui.widget.js
ig.ui.shared.js
ig.datasource.js
ig.ui.combo.js
ig.ui.dialog.js
ig.util.js
ig.ui.htmleditor-en.js

  • customToolbars

    Type:
    array
    Default:
    []
    Elements Type:
    object

  • height

    Type:
    number
    Default:
    350

    Set or get the widget height.

  • inputName

    Type:
    string
    Default:
    ""

  • showCopyPasteToolbar

    Type:
    bool
    Default:
    true

    Shows/hides the "Copy Paste" toolbar.

  • showFormattingToolbar

    Type:
    bool
    Default:
    true

    Shows/hides the "Formating" toolbar.

  • showInsertObjectToolbar

    Type:
    bool
    Default:
    true

    Shows/hides the "Insert Object" toolbar.

  • showTextToolbar

    Type:
    bool
    Default:
    true

    Shows/hides the "Text" toolbar.

  • toolbarSettings

    Type:
    array
    Default:
    []
    Elements Type:
    object

    The html editor toolbars list.

  • value

    Type:
    string
    Default:
    ""

  • width

    Type:
    number
    Default:
    725

    Set or get the widget width.

For more information on how to interact with the NetAdvantage for jQuery controls events, refer to
Using Events in NetAdvantage for jQuery

Show Details

  • actionExecuted

    Cancellable:
    false

    Event fired after some of the editor toolbar item is clicked.

  • actionExecuting

    Cancellable:
    true

    Event fired before some of the editor toolbar item is clicked.

  • copy

    Cancellable:
    false

    Event is fired on keyboadrd copy action.

  • cut

    Cancellable:
    false

    Event is fired on keyboadrd cut action.

  • paste

    Cancellable:
    false

    Event is fired on keyboadrd paste action.

  • redo

    Cancellable:
    false

    Event is fired on keyboadrd redo action.

  • rendered

    Cancellable:
    false

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

  • rendering

    Cancellable:
    false

    Event fired before the html editor widget has been rendered.

  • toolbarCollapsed

    Cancellable:
    false

    Event fired after some of the toolbars is collapsed.

  • toolbarCollapsing

    Cancellable:
    true

    Event fired before some of the toolbars is collapsed.

  • toolbarExpanded

    Cancellable:
    false

    Event fired after some of the toolbars is collapsed.

  • toolbarExpanding

    Cancellable:
    true

    Event fired before some of the toolbars is expanded.

  • undo

    Cancellable:
    false

    Event is fired on keyboadrd undo action.

  • destroy

    .igHtmlEditor( "destroy" );

    Destroys the widget.

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

  • getContent

    .igHtmlEditor( "getContent", format:string );
    Return Type:
    string

    Gets the content of the html editor.

    • format
    • Type:string
    • html.

  • isDirty

    .igHtmlEditor( "isDirty" );

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

  • 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
    • html.

  • widget

    .igHtmlEditor( "widget" );

    Returns the element on which the widget was instantiated.

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