+ This sample shows how to use the
+ CKEditor Dialog API
+ to customize CKEditor dialog windows without changing the original editor code.
+ The following customizations are being done in the example below:
+
+
+ For details on how to create this setup check the source code of this sample page.
+
+
+
A custom dialog is added to the editors using the pluginsLoaded event, from an external dialog definition file:
+
+
Creating a custom dialog window – "My Dialog" dialog window opened with the "My Dialog" toolbar button.
+
Creating a custom button – Add button to open the dialog with "My Dialog" toolbar button.
+
+
+
+
The below editor modify the dialog definition of the above added dialog using the dialogDefinition event:
+
+
Adding dialog tab – Add new tab "My Tab" to dialog window.
+
Removing a dialog window tab – Remove "Second Tab" page from the dialog window.
+
Adding dialog window fields – Add "My Custom Field" to the dialog window.
+
Removing dialog window field – Remove "Select Field" selection field from the dialog window.
+
Setting default values for dialog window fields – Set default value of "Text Field" text field.
+
Setup initial focus for dialog window – Put initial focus on "My Custom Field" text field.