Dialog Field Elements

The Create Dialog Plugin article describes how to create a plugin that uses a dialog box.

This article builds upon the Create Dialog Plugin article. The aim of this article is to list out the built in elements that can be used on the dialog page.

HTML Element

The html type allows us to place text/html on the dialog page.

{
  type : 'html',
  html : 'This dialog window lets you create simple links for your website.'
}

TextArea Element

The textarea element adds a textarea field.

{
  type : 'textarea',
    id : 'contents',
    label : 'Displayed Text',
    validate : CKEDITOR.dialog.validate.notEmpty( 'The Displayed Text field cannot be empty.' ),
    required : true
}

Text Element

The text element adds a simple text input field.

{
  type : 'text',
    id : 'url',
  label : 'URL',
  validate : CKEDITOR.dialog.validate.notEmpty( 'The link must have a URL.' ),
  required : true
}

Select Element

The select element is used to display a dropdown list or a multiselect.

{
type : 'select',
id : 'style',
label : 'Style',
items :
[
[ '<none>', '' ],
[ 'Bold', 'b' ],
[ 'Underline', 'u' ],
[ 'Italics', 'i' ]
]
}

Checkbox Element

The checkbox element is used to create a checkout.

{
  type : 'checkbox',
    id : 'newPage',
  label : 'Opens in a new page',
  'default' : true
}

Radio Elements

The radio element is used to create radio buttons

{
  type : 'radio',
    id : 'country',
  label : 'Which country is bigger',
  items : [ [ 'France', 'FR' ], [ 'Germany', 'DE' ] ] ,
  style : 'color:green',
  'default' : 'DE'
}

File/FileButton Elements

The file and fileButton elements are used together. The file defines a upload field and filebutton defines a button for submitting the upload field.

{
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 );
}
}
}

Button Element

Defines a button element that can be added to the dialog

{
type : 'button',
id : 'buttonId',
label : 'Click me',
title : 'My title',
onClick : function() {
// this = CKEDITOR.ui.dialog.button
alert( 'Clicked: ' + this.id );
}
}
Many of the elements defines a onclick:funtion() or a onchange:function() method just like the button element.

See their definition for more details

Browse Server/File Upload Buttons

The Browse Server/File Upload Buttons may be added to a dialog form.

The topic was large enough that it was given its own page rather cramming it onto this one.

See here for details on how to add Browse Server/FIle upload to your dialogs.

Cookbook Category: 

Add new comment

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.