How Do I Learn the Names of CKEditor Dialog Window Fields?

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.

(Minor correction)
(Updated with hover info)
 
(2 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
{{#CUSTOMTITLE:How Do I Learn the Names of CKEditor 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]], 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.
  
−
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].
 +
</note>
  
−
Below is an example of a dialog window tab entitled '''First Tab''' that contains a text field and a checkbox.
+
 
 +
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">
 
<source lang="javascript">
−
contents :
+
config.extraPlugins = 'devtools';
−
[
 
−
{
 
−
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>
 
</source>
 +
 +
The following figure shows the tooltip that describes the '''URL''' field of the '''Link''' dialog window that is displayed after the '''Developer Tools''' plugin was enabled.
 +
 +
[[Image: CKEditor_link_devtools.png|frame|center|Element information displayed with the Developer Tools plugin in CKEditor]]

Latest revision as of 15:53, 13 May 2011

If you want to customize a 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.

important note

The Developer Tools plugin was introduced with CKEditor 3.6.


If you want to enable this feature, you need to add the plugin to your CKEditor configuration by using the extraPlugins setting. 

config.extraPlugins = 'devtools';

The following figure shows the tooltip that describes the URL field of the Link dialog window that is displayed after the Developer Tools plugin was enabled.

Element information displayed with the Developer Tools plugin in CKEditor
Retrieved from "https://docs-old.ckeditor.com/index.php?title=CKEditor_3.x/Howto/Field_Names&oldid=6280"
This page was last edited on 13 May 2011, at 15:53.