CKEditor Ecosystem Documentation
Search
Report an issue
Home/CKEditor 4/API
Class

CKEDITOR.dialog.definition.html

class
See source

The definition of a raw HTML element.

This class is not really part of the API. It just illustrates the properties that developers can use to define and create elements made from raw HTML code.

Once the dialog is opened, the created element becomes a CKEDITOR.ui.dialog.html object and can be accessed with CKEDITOR.dialog.getContentElement.

For a complete example of dialog definition, please check CKEDITOR.dialog.add. To access HTML elements use CKEDITOR.dom.document.getById.

// There is no constructor for this class, the user just has to define an
// object with the appropriate properties.

// Example 1:
{
    type: 'html',
    html: '<h3>This is some sample HTML content.</h3>'
}

// Example 2:
// Complete sample with document.getById() call when the "Ok" button is clicked.
var dialogDefinition = {
    title: 'Sample dialog',
    minWidth: 300,
    minHeight: 200,
    onOk: function() {
        // "this" is now a CKEDITOR.dialog object.
        var document = this.getElement().getDocument();
        // document = CKEDITOR.dom.document
        var element = <b>document.getById( 'myDiv' );</b>
        if ( element )
            alert( element.getHtml() );
    },
    contents: [
        {
            id: 'tab1',
            label: '',
            title: '',
            elements: [
                {
                    type: 'html',
                    html: '<div id="myDiv">Sample <b>text</b>.</div><div id="otherId">Another div.</div>'
                }
            ]
        }
    ],
    buttons: [ CKEDITOR.dialog.cancelButton, CKEDITOR.dialog.okButton ]
};

Filtering

Properties

  • align : String

    See source

    Horizontal alignment (in the container) of the UI element.

  • className : String

    See source

    CSS class names to append to the UI element.

  • commit : Function

    See source

    Function to execute whenever the UI element's parent dialog's CKEDITOR.dialog.commitContent method is executed. It usually takes care of the respective UI element as a standalone element.

  • html : String

    See source

    (Required) HTML code of this element.

  • id : String

    See source

    The ID of the UI element.

  • onHide : Function

    See source

    Function to execute whenever the UI element's parent dialog is closed.

  • onLoad : Function

    See source

    Function to execute the first time the UI element is displayed.

  • onShow : Function

    See source

    Function to execute whenever the UI element's parent dialog is displayed.

  • requiredContent : String | Object | style

    See source

    The content that needs to be allowed to enable this UI element. All formats accepted by CKEDITOR.filter.check may be used.

    When all UI elements in a tab are disabled, this tab will be disabled automatically.

  • setup : Function

    See source

    Function to execute whenever the UI element's parent dialog's CKEDITOR.dialog.setupContent method is executed. It usually takes care of the respective UI element as a standalone element.

  • style : String

    See source

    Inline CSS classes to append to the UI element.

  • title : String

    See source

    The popup label of the UI element.

  • type : String

    See source

    The type of the UI element. Required.