CKEditor 3.x/Howto/Field Names - Revision history

Anna: Updated with hover info

2011-05-13T14:53:01Z

Updated with hover info

Saare: Adding quotes in the code sample

2011-05-12T13:21:29Z

Adding quotes in the code sample

Anna: Article updated to CKEditor 3.6 and Developer Tools plugin

2011-05-12T12:45:38Z

Article updated to CKEditor 3.6 and Developer Tools plugin

Anna: Minor correction

2011-03-07T13:06:40Z

Minor correction

Anna: Title updated

2011-02-14T19:15:07Z

Title updated

Anna: Article contents added

2011-02-14T19:12:36Z

Article contents added

New page

{{#CUSTOMTITLE:How Do I Learn the Names of Dialog Window Fields?}}
If you want to customize a [[CKEditor_3.x/Users_Guide/Interface/Dialog_Windows|dialog window]], check the source code of a plugin that creates it (e.g. <code>_source/''pluginName''/dialogs/''pluginDialog''.js</code>).

The <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.dialogDefinition.html#contents contents]</code> entry defines a dialog window tab. Each UI element (text field, checkbox, button, etc.) is defined using the <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.contentDefinition.html#elements elements]</code> array.

Below is an example of a dialog window tab entitled First Tab that contains a text field and a checkbox.
<source lang="javascript">
contents :
[
{
id : 'tab1',
label : 'First Tab',
title : 'First Tab Title',
accessKey : 'Q',
elements :
[
{
type : 'text',
id : 'sampleText1',
label : 'Sample Text 1',
'default' : 'Hello world!'
},
{
type : 'checkbox',
id : 'sampleCheckbox',
label : 'This checkbox is selected by default',
'default' : true
}
]
}
]
</source>

@@ Line 1: / Line 1: @@
 {{#CUSTOMTITLE:How Do I Learn the Names of CKEditor Dialog Window Fields?}}
-If you want to customize a [[CKEditor_3.x/Users_Guide/Interface/Dialog_Windows|dialog window]], the easiest and most convenient way is to enable the '''Developer Tools''' plugin that displays the name and IDs of all dialog window elements.
+If you want to customize a [[CKEditor_3.x/Users_Guide/Interface/Dialog_Windows|dialog window]], the easiest and most convenient way is to enable the '''Developer Tools''' plugin that displays the name and IDs of all dialog window elements when you hover them with your mouse.
 <note>The '''Developer Tools''' plugin was introduced with [http://ckeditor.com/blog/CKEditor_3.6_released CKEditor 3.6].

@@ Line 8: / Line 8: @@
 If you want to enable this feature, you need to add the plugin to your CKEditor configuration by using the <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.extraPlugins extraPlugins]</code> setting.
 <source lang="javascript">
-config.extraPlugins = devtools;
+config.extraPlugins = 'devtools';
 </source>

@@ Line 1: / Line 1: @@
 {{#CUSTOMTITLE:How Do I Learn the Names of CKEditor Dialog Window Fields?}}
-If you want to customize a [[CKEditor_3.x/Users_Guide/Interface/Dialog_Windows|dialog window]], check the source code of a plugin that creates it (e.g. <code>_source/''pluginName''/dialogs/''pluginDialog''.js</code>).
+If you want to customize a [[CKEditor_3.x/Users_Guide/Interface/Dialog_Windows|dialog window]], the easiest and most convenient way is to enable the '''Developer Tools''' plugin that displays the name and IDs of all dialog window elements.
-The <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.dialogDefinition.html#contents contents]</code> entry defines a dialog window tab (page). Each UI element (text field, checkbox, button, etc.) is defined using the <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.contentDefinition.html#elements elements]</code> array. The identifiers that can be used in code in order to refer to the dialog window fields can be found in the <code>id</code> parameters.
+<note>The '''Developer Tools''' plugin was introduced with [http://ckeditor.com/blog/CKEditor_3.6_released CKEditor 3.6].
-Below is an example of a dialog window tab entitled '''First Tab''' that contains a text field and a checkbox.
 <source lang="javascript">
-contents :
+config.extraPlugins = devtools;
 </source>

← Older revision		Revision as of 19:15, 14 February 2011
Line 1:		Line 1:
−	{{#CUSTOMTITLE:How Do I Learn the Names of Dialog Window Fields?}}	+	{{#CUSTOMTITLE:How Do I Learn the Names of CKEditor Dialog Window Fields?}}
	If you want to customize a [[CKEditor_3.x/Users_Guide/Interface/Dialog_Windows\|dialog window]], check the source code of a plugin that creates it (e.g. <code>_source/''pluginName''/dialogs/''pluginDialog''.js</code>).		If you want to customize a [[CKEditor_3.x/Users_Guide/Interface/Dialog_Windows\|dialog window]], check the source code of a plugin that creates it (e.g. <code>_source/''pluginName''/dialogs/''pluginDialog''.js</code>).