How Do I Set a Default Value for a CKEditor Dialog Window Field?

This website contains links to software which is either no longer maintained or will be supported only until the end of 2019 (CKFinder 2). For the latest documentation about current CKSource projects, including software like CKEditor 4/CKEditor 5, CKFinder 3, Cloud Services, Letters, Accessibility Checker, please visit the new documentation website.

If you look for an information about very old versions of CKEditor, FCKeditor and CKFinder check also the CKEditor forum, which was closed in 2015. If not, please head to StackOverflow for support.

In order to assign a default value to a dialog window field, use the 'default' parameter in the dialog window UI element definition.

elements :
[
	{
		type : 'text',
		id : 'myCustomField',
		label : 'My Custom Field',
		'default' : 'Default Custom Field Value!'
	},
	{
		type : 'checkbox',
		id : 'myCheckbox',
		label : 'This checkbox is selected by default',
		'default' : true
	}
]

The code above creates the following UI elements in a sample dialog window tab.

Sample dialog window tab containing two field with default values


You can also customize existing dialog windows and give them default values. The following code sets the default URL field value for the Link dialog window.

CKEDITOR.on( 'dialogDefinition', function( ev )
	{
		// Take the dialog name and its definition from the event data.
		var dialogName = ev.data.name;
		var dialogDefinition = ev.data.definition;

		// Check if the definition is from the dialog window you are interested in (the "Link" dialog window).
		if ( dialogName == 'link' )
		{
			// Get a reference to the "Link Info" tab.
			var infoTab = dialogDefinition.getContents( 'info' );

			// Set the default value for the URL field.
			var urlField = infoTab.get( 'url' );
			urlField['default'] = 'www.example.com';
		}
	});

After this customization the Link dialog window will contain the www.example.com default value in the URL field.

Link dialog window with a default value for the URL field


For more examples on setting a default field value refer to the Using the JavaScript API to customize dialog windows (api_dialog.html) sample and its source code from the _samples directory of your CKEditor installation.

important note

Since default is a reserved word in JavaScript, remember to always put it in quotes when used in your code.

This page was last edited on 7 March 2011, at 14:00.