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

CKEDITOR.dialog.definition.textInput

class
See source

The definition of a text field (single line).

This class is not really part of the API. It just illustrates the properties that developers can use to define and create text fields.

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

For a complete example of dialog definition, please check CKEDITOR.dialog.add.

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

{
    type: 'text',
    id: 'name',
    label: 'Your name',
    'default': '',
    validate: function() {
        if ( !this.getValue() ) {
            api.openMsgDialog( '', 'Name cannot be empty.' );
            return false;
        }
    }
}

Filtering

Properties

  • align : String

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

    See source

  • bidi : Boolean

    Whether the text direction of this input should be togglable using the following keystrokes:

    See source
    • Shift+Alt+End – switch to Right-To-Left,
    • Shift+Alt+Home – switch to Left-To-Right.

    By default the input will be loaded without any text direction set, which means that the direction will be inherited from the editor's text direction.

    If the direction was set, a marker will be prepended to every non-empty value of this input:

    • \u202A – for Right-To-Left,
    • \u202B – for Left-To-Right.

    This marker allows for restoring the same text direction upon the next dialog opening.

  • className : String

    CSS class names to append to the UI element.

    See source

  • commit : Function

    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.

    See source

  • controlStyle : String

    since 3.6.1

    Specify the inline style of the input element container.

    See source
    {
    type: 'text',
    label: 'My Label',
    controlStyle: 'width: 3em'
}

  • default : String

    The default value.

    See source

  • id : String

    The ID of the UI element.

    See source

  • inputStyle : String

    since 3.6.1

    Specify the inline style of the input element.

    See source
    {
    type: 'text',
    label: 'My Label',
    inputStyle: 'text-align: center'
}

  • label : String

    The label of the UI element.

    See source
    {
    type: 'text',
    label: 'My Label'
}

  • labelLayout : String

    (Optional) Specify the layout of the label. Set to 'horizontal' for horizontal layout. The default layout is vertical.

    See source
    {
    type: 'text',
    label: 'My Label',
    labelLayout: 'horizontal'
}

  • labelStyle : String

    Specify the inline style of the uiElement label.

    See source
    {
    type: 'text',
    label: 'My Label',
    labelStyle: 'color: red'
}

  • maxLength : Number

    (Optional) The maximum length.

    See source

  • onHide : Function

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

    See source

  • onLoad : Function

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

    See source

  • onShow : Function

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

    See source

  • requiredContent : String | Object | style

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

    See source

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

  • setup : Function

    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.

    See source

  • size : Number

    (Optional) The size of the input field.

    See source

  • style : String

    Inline CSS classes to append to the UI element.

    See source

  • title : String

    The popup label of the UI element.

    See source

  • type : String

    The type of the UI element. Required.

    See source

  • validate : Function

    (Optional) The validation function.

    See source

  • widths : Array

    (Optional) Applies only to horizontal layouts: a two elements array of lengths to specify the widths of the label and the content element. See also labelLayout.

    See source
    {
    type: 'text',
    label: 'My Label',
    labelLayout: 'horizontal',
    widths: [100, 200]
}