CKEditor 4 Documentation

CKEDITOR.dialog

Files

This is the base class for runtime dialog objects. An instance of this class represents a single named dialog for a single editor instance.

var dialogObj = new CKEDITOR.dialog( editor, 'smiley' );
Defined By

Properties

CKEDITOR.dialog
view source
: Numberreadonly
Current state of the dialog. ...

Current state of the dialog. Use the setState method to update it. See the state event to know more.

Defaults to: CKEDITOR.DIALOG_STATE_IDLE

Methods

Defined By

Instance methods

CKEDITOR.dialog
view source
new( editor, dialogName ) : CKEDITOR.dialog
Creates a dialog class instance. ...

Creates a dialog class instance.

Parameters

  • editor : Object

    The editor which created the dialog.

  • dialogName : String

    The dialog's registered name.

Returns

CKEDITOR.dialog
view source
( element, [index] )
Adds element to dialog's focusable list. ...

Adds element to dialog's focusable list.

Parameters

CKEDITOR.dialog
view source
( contents )
Adds a tabbed page into the dialog. ...

Adds a tabbed page into the dialog.

Parameters

  • contents : Object

    Content definition.

CKEDITOR.dialog
view source
( id ) : Object
Simulates a click to a dialog button in the dialog's button row. ...

Simulates a click to a dialog button in the dialog's button row.

Parameters

  • id : String

    The id of the button.

Returns

  • Object

    The return value of the dialog's click event.

CKEDITOR.dialog
view source
( )
Calls the CKEDITOR.dialog.definition.uiElement.commit method of each of the UI elements, with the arguments passed th...

Calls the CKEDITOR.dialog.definition.uiElement.commit method of each of the UI elements, with the arguments passed through it. It is usually being called when the user confirms the dialog, to process the values.

dialogObj.commitContent();

var timestamp = ( new Date() ).valueOf();
dialogObj.commitContent( timestamp );
CKEDITOR.dialog
view source
( id )
Disables a dialog button. ...

Disables a dialog button.

Parameters

  • id : String

    The id of the button.

CKEDITOR.dialog
view source
( id )
Enables a dialog button. ...

Enables a dialog button.

Parameters

  • id : String

    The id of the button.

CKEDITOR.dialog
view source
( fn ) : CKEDITOR.dialogchainable
Executes a function for each UI element. ...

Executes a function for each UI element.

Parameters

  • fn : Function

    Function to execute for each UI element.

Returns

Gets the UI element of a button in the dialog's button row. ...

Gets the UI element of a button in the dialog's button row.

Parameters

  • id : String

    The id of the button.

Returns

CKEDITOR.dialog
view source
( pageId, elementId ) : CKEDITOR.ui.dialog.uiElement
Gets a dialog UI element object from a dialog page. ...

Gets a dialog UI element object from a dialog page.

dialogObj.getContentElement( 'tabId', 'elementId' ).setValue( 'Example' );

Parameters

  • pageId : String

    id of dialog page.

  • elementId : String

    id of UI element.

Returns

Gets the root DOM element of the dialog. ...

Gets the root DOM element of the dialog.

var dialogElement = dialogObj.getElement().getFirst();
dialogElement.setStyle( 'padding', '5px' );

Returns

CKEDITOR.dialog
view source
( ) : String
Gets the name of the dialog. ...

Gets the name of the dialog.

var dialogName = dialogObj.getName();

Returns

  • String

    The name of this dialog.

CKEDITOR.dialog
view source
( ) : Number
Gets the number of pages in the dialog. ...

Gets the number of pages in the dialog.

Returns

  • Number

    Page count.

Gets the editor instance which opened this dialog. ...

Gets the editor instance which opened this dialog.

Returns

CKEDITOR.dialog
view source
( ) : Object
Gets the dialog's position in the window. ...

Gets the dialog's position in the window.

var dialogX = dialogObj.getPosition().x;

Returns

  • Object
    • x : Number
    • y : Number
Gets the element that was selected when opening the dialog, if any. ...

Gets the element that was selected when opening the dialog, if any.

Returns

CKEDITOR.dialog
view source
( ) : Object
Gets the current size of the dialog in pixels. ...

Gets the current size of the dialog in pixels.

var width = dialogObj.getSize().width;

Returns

  • Object
    • width : Number
    • height : Number
CKEDITOR.dialog
view source
( pageId, elementId ) : Object
Gets the value of a dialog UI element. ...

Gets the value of a dialog UI element.

alert( dialogObj.getValueOf( 'tabId', 'elementId' ) );

Parameters

  • pageId : String

    id of dialog page.

  • elementId : String

    id of UI element.

Returns

  • Object

    The value of the UI element.

CKEDITOR.dialog
view source
( )
Hides the dialog box. ...

Hides the dialog box.

dialogObj.hide();
CKEDITOR.dialog
view source
( id )
Hides a page's tab away from the dialog. ...

Hides a page's tab away from the dialog.

dialog.hidePage( 'tab_3' );

Parameters

  • id : String

    The page's Id.

CKEDITOR.dialog
view source
( )
Rearrange the dialog to its previous position or the middle of the window. ...

Rearrange the dialog to its previous position or the middle of the window.

Available since: 3.5

CKEDITOR.dialog
view source
( x, y, save )
Moves the dialog to an (x, y) coordinate relative to the window. ...

Moves the dialog to an (x, y) coordinate relative to the window.

dialogObj.move( 10, 40 );

Parameters

  • x : Number

    The target x-coordinate.

  • y : Number

    The target y-coordinate.

  • save : Boolean

    Flag indicate whether the dialog position should be remembered on next open up.

CKEDITOR.dialog
view source
( ) : CKEDITOR.dialogchainable
Resets all input values in the dialog. ...

Resets all input values in the dialog.

dialogObj.reset();

Returns

CKEDITOR.dialog
view source
( width, height )
Resizes the dialog. ...

Resizes the dialog.

dialogObj.resize( 800, 640 );

Parameters

  • width : Number

    The width of the dialog in pixels.

  • height : Number

    The height of the dialog in pixels.

CKEDITOR.dialog
view source
( id )
Activates a tab page in the dialog by its id. ...

Activates a tab page in the dialog by its id.

dialogObj.selectPage( 'tab_1' );

Parameters

  • id : String

    The id of the dialog tab to be activated.

CKEDITOR.dialog
view source
( state )
Sets the dialog state. ...

Sets the dialog state.

Available since: 4.5

Parameters

CKEDITOR.dialog
view source
( pageId, elementId, value )
Sets the value of a dialog UI element. ...

Sets the value of a dialog UI element.

dialogObj.setValueOf( 'tabId', 'elementId', 'Example' );

Parameters

  • pageId : String

    id of the dialog page.

  • elementId : String

    id of the UI element.

  • value : Object

    The new value of the UI element.

CKEDITOR.dialog
view source
( )
Calls the CKEDITOR.dialog.definition.uiElement.setup method of each of the UI elements, with the arguments passed thr...

Calls the CKEDITOR.dialog.definition.uiElement.setup method of each of the UI elements, with the arguments passed through it. It is usually being called when the dialog is opened, to put the initial value inside the field.

dialogObj.setupContent();

var timestamp = ( new Date() ).valueOf();
dialogObj.setupContent( timestamp );
CKEDITOR.dialog
view source
( )
Shows the dialog box. ...

Shows the dialog box.

dialogObj.show();
CKEDITOR.dialog
view source
( id )
Unhides a page's tab. ...

Unhides a page's tab.

dialog.showPage( 'tab_2' );

Parameters

  • id : String

    The page's Id.

CKEDITOR.dialog
view source
( )
Dialog state-specific style updates. ...

Dialog state-specific style updates.

Defined By

Static methods

CKEDITOR.dialog
view source
( name, dialogDefinition )static
Registers a dialog. ...

Registers a dialog.

// Full sample plugin, which does not only register a dialog window but also adds an item to the context menu.
// To open the dialog window, choose "Open dialog" in the context menu.
CKEDITOR.plugins.add( 'myplugin', {
    init: function( editor ) {
        editor.addCommand( 'mydialog',new CKEDITOR.dialogCommand( 'mydialog' ) );

        if ( editor.contextMenu ) {
            editor.addMenuGroup( 'mygroup', 10 );
            editor.addMenuItem( 'My Dialog', {
                label: 'Open dialog',
                command: 'mydialog',
                group: 'mygroup'
            } );
            editor.contextMenu.addListener( function( element ) {
                return { 'My Dialog': CKEDITOR.TRISTATE_OFF };
            } );
        }

        CKEDITOR.dialog.add( 'mydialog', function( api ) {
            // CKEDITOR.dialog.definition
            var dialogDefinition = {
                title: 'Sample dialog',
                minWidth: 390,
                minHeight: 130,
                contents: [
                    {
                        id: 'tab1',
                        label: 'Label',
                        title: 'Title',
                        expand: true,
                        padding: 0,
                        elements: [
                            {
                                type: 'html',
                                html: '<p>This is some sample HTML content.</p>'
                            },
                            {
                                type: 'textarea',
                                id: 'textareaId',
                                rows: 4,
                                cols: 40
                            }
                        ]
                    }
                ],
                buttons: [ CKEDITOR.dialog.okButton, CKEDITOR.dialog.cancelButton ],
                onOk: function() {
                    // "this" is now a CKEDITOR.dialog object.
                    // Accessing dialog elements:
                    var textareaObj = this.getContentElement( 'tab1', 'textareaId' );
                    alert( "You have entered: " + textareaObj.getValue() );
                }
            };

            return dialogDefinition;
        } );
    }
} );

CKEDITOR.replace( 'editor1', { extraPlugins: 'myplugin' } );

Parameters

  • name : String

    The dialog's name.

  • dialogDefinition : Function/String

    A function returning the dialog's definition, or the URL to the .js file holding the function. The function should accept an argument editor which is the current editor instance, and return an object conforming to CKEDITOR.dialog.definition. CKEDITOR.dialog.definition

CKEDITOR.dialog
view source
( name, title, minWidth, minHeight, [onContentLoad], [userDefinition] )static
An iframe base dialog. ...

An iframe base dialog.

Parameters

  • name : String

    Name of the dialog.

  • title : String

    Title of the dialog.

  • minWidth : Number

    Minimum width of the dialog.

  • minHeight : Number

    Minimum height of the dialog.

  • onContentLoad : Function (optional)

    Function called when the iframe has been loaded. If it isn't specified, the inner frame is notified of the dialog events ('load', 'resize', 'ok' and 'cancel') on a function called 'onDialogEvent'.

  • userDefinition : Object (optional)

    Additional properties for the dialog definition.

CKEDITOR.dialog
view source
( typeName, builder )static
Registers a dialog UI element. ...

Registers a dialog UI element.

Parameters

  • typeName : String

    The name of the UI element.

  • builder : Function

    The function to build the UI element.

CKEDITOR.dialog
view source
( )static
The default cancel button for dialogs. ...

The default cancel button for dialogs. Fires the cancel event and closes the dialog if no UI element value changed.

CKEDITOR.dialog
view source
( name )static
...

Parameters

  • name : Object
CKEDITOR.dialog
view source
( )static
...
CKEDITOR.dialog
view source
( editor, dialogName, tabName ) : Booleanstatic
Check whether tab wasn't removed by CKEDITOR.config.removeDialogTabs. ...

Check whether tab wasn't removed by CKEDITOR.config.removeDialogTabs.

Available since: 4.1

Parameters

Returns

  • Boolean
CKEDITOR.dialog
view source
( )static
The default OK button for dialogs. ...

The default OK button for dialogs. Fires the ok event and closes the dialog if the event succeeds.

Defined By

Events

CKEDITOR.dialog
view source
( evt )
Event fired when the user tries to dismiss a dialog. ...

Event fired when the user tries to dismiss a dialog.

Parameters

  • evt : CKEDITOR.eventInfo
    • data : Object
      • hide : Boolean

        Whether the event should proceed or not.

CKEDITOR.dialog
view source
( evt )
Event fired when a dialog is hidden. ...

Event fired when a dialog is hidden.

Parameters

CKEDITOR.dialog
view source
( evt )
Event fired when the user tries to confirm a dialog. ...

Event fired when the user tries to confirm a dialog.

Parameters

  • evt : CKEDITOR.eventInfo
    • data : Object
      • hide : Boolean

        Whether the event should proceed or not.

CKEDITOR.dialog
view source
( evt )
Event fired when a dialog is being resized. ...

Event fired when a dialog is being resized. The event is fired on both the CKEDITOR.dialog object and the dialog instance since 3.5.3, previously it was only available in the global object.

Available since: 3.5

Parameters

  • evt : CKEDITOR.eventInfo
    • data : Object
      • width : Number

        The new width.

      • height : Number

        The new height.

CKEDITOR.dialog
view source
( evt )
Event fired when a tab is going to be selected in a dialog. ...

Event fired when a tab is going to be selected in a dialog.

Parameters

  • evt : CKEDITOR.eventInfo
    • data : Object
      • page : String

        The id of the page that it's gonna be selected.

      • currentPage : String

        The id of the current page.

CKEDITOR.dialog
view source
( evt )
Event fired when a dialog is shown. ...

Event fired when a dialog is shown.

Parameters

CKEDITOR.dialog
view source
( evt )
Event fired when the dialog state changes, usually by setState. ...

Event fired when the dialog state changes, usually by setState.

Available since: 4.5

Parameters

CKEDITOR.dialog
view source
( evt )static
Event fired when a dialog is being resized. ...

Event fired when a dialog is being resized. The event is fired on both the CKEDITOR.dialog object and the dialog instance since 3.5.3, previously it was only available in the global object.

Parameters

  • evt : CKEDITOR.eventInfo
    • data : Object
      • dialog : CKEDITOR.dialog

        The dialog being resized (if it is fired on the dialog itself, this parameter is not sent).

      • skin : String

        The skin name.

      • width : Number

        The new width.

      • height : Number

        The new height.