Report an issue
Class

CKEDITOR.dialog.definition.file

class

The definition of a file upload input.

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

Once the dialog is opened, the created element becomes a CKEDITOR.ui.dialog.file 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.

// Example:
{
    type: 'file',
    id: 'upload',
    label: 'Select file from your computer',
    size: 38
},
{
    type: 'fileButton',
    id: 'fileId',
    label: 'Upload file',
    'for': [ 'tab1', 'upload' ],
    filebrowser: {
        onSelect: function( fileUrl, data ) {
            alert( 'Successfully uploaded: ' + fileUrl );
        }
    }
}

Filtering

Properties

  • action : String

    (Optional) The action attribute of the form element associated with this file upload input. If empty, CKEditor will use path to server connector for currently opened folder.

  • align : String

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

  • className : String

    CSS class names to append to the UI element.

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

  • since 3.6.1

    controlStyle : String

    Specify the inline style of the input element container.

    {
        type: 'text',
        label: 'My Label',
        controlStyle: 'width: 3em'
    }
    
  • id : String

    The ID of the UI element.

  • since 3.6.1

    inputStyle : String

    Specify the inline style of the input element.

    {
        type: 'text',
        label: 'My Label',
        inputStyle: 'text-align: center'
    }
    
  • label : String

    The label of the UI element.

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

    {
        type: 'text',
        label: 'My Label',
        labelLayout: 'horizontal'
    }
    
  • labelStyle : String

    Specify the inline style of the uiElement label.

    {
        type: 'text',
        label: 'My Label',
        labelStyle: 'color: red'
    }
    
  • onHide : Function

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

  • onLoad : Function

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

  • onShow : Function

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

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

    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.

  • size : Number

    The size of the UI element.

  • style : String

    Inline CSS classes to append to the UI element.

  • title : String

    The popup label of the UI element.

  • type : String

    The type of the UI element. Required.

  • validate : Function

    (Optional) The validation function.

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

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