Sebstefanov (talk | contribs) |
|||
| (12 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
| − | + | __TOC__ | |
| − | + | Dialog windows are small pop-up windows that are displayed when you use some CKEditor functions like [[CKEditor 3.x/Users Guide/Document/Find and Replace|Find and Replace]] or [[CKEditor 3.x/Users Guide/Rich Text/Images|Insert Image]]. These windows display various configuration options related to a particular feature and often give you access to more advanced settings. | |
| − | [[Image: CKEditor_dialog_window.png]] | + | == Dialog Window Structure == |
| + | As an example, the '''Anchor''' dialog window is presented below: | ||
| + | [[Image:CKEditor_dialog_window.png|frame|center|Anchor dialog window in CKEditor]] | ||
| − | |||
| − | + | When a dialog window is open, the main editor window including the toolbar is blocked. | |
| + | |||
| + | All dialog windows contain the [[Image: CKEditor_ok_button.png|OK]] button that lets you confirm the settings and return to the main editor window as well as the [[Image: CKEditor_cancel_button.png|Cancel]] button that closes the pop-up window without introducing any changes to the document. | ||
| + | |||
| + | Another way to close the dialog window and return to the editing area is to use the [[Image: CKEditor_close_button.png|Close]] button located in the top right-hand-side corner of the window or to press the ''Esc'' key on your keyboard. | ||
| + | |||
| + | Depending on the options available for a particular feature the dialog window may contain different elements. Some windows may also contain tabs with additional configuration options. To navigate between the tabs simply click their labels. You can also move between tabs with your keyboard. To enter the tabs list, press the ''Alt+F10'' shortcut while in the dialog window. To move to the next tab, use the ''Tab'' or ''Right Arrow'' key. To go back to the previous tab, press ''Shift+Tab'' or the ''Left Arrow'' key. | ||
| + | |||
| + | == Reopening a Dialog Window == | ||
| + | Some dialog windows can be used to insert an element, such as an image or a table, into the document. After an element is added to the document, in most cases it can be edited at any time by double-clicking or selecting it and clicking the appropriate toolbar button again. The dialog window will re-open and you will be able to introduce changes to the element's configuration options. | ||
| + | |||
| + | If you attempt to close the dialog window without saving the changes, you will be prompted to do so: | ||
| + | |||
| + | [[Image:CKEditor_options_changed.png|frame|center|An alert window prompting to save the changes made to an element]] | ||
| + | |||
| + | |||
| + | You can either proceed without saving your changes by choosing '''OK''' or close the alert window with the '''Cancel''' button and save the changes. | ||
| + | |||
| + | == Resizing a Dialog Window == | ||
| + | CKEditor dialog windows all open with some default size. If, however, you would like to resize a dialog window, you can easily do it by clicking and dragging the [[File:CKEditor_resizer.png|Drag to resize]] resizing grip in the bottom right-hand corner of a dialog window. | ||
| + | |||
| + | The image below presents a default size of the '''Advanced''' tab in the '''Link''' dialog window. | ||
| + | |||
| + | [[Image:CKEditor_link_url_advanced.png|frame|center|Advanced tab of the Link dialog window in its default size]] | ||
| + | |||
| + | |||
| + | Since the text entered into some text fields (particularly the '''Style''' field) might be longer than their default size, you may wish to resize the dialog window. Use the '''Drag to resize''' feature to change the width and height of a dialog window as needed. | ||
| + | |||
| + | [[Image:CKEditor_dialogwindow_example2.png|frame|center|Advanced tab of the Link dialog window after resizing]] | ||
Latest revision as of 13:41, 11 October 2012
Dialog windows are small pop-up windows that are displayed when you use some CKEditor functions like Find and Replace or Insert Image. These windows display various configuration options related to a particular feature and often give you access to more advanced settings.
Dialog Window Structure
As an example, the Anchor dialog window is presented below:
When a dialog window is open, the main editor window including the toolbar is blocked.
All dialog windows contain the 
button that lets you confirm the settings and return to the main editor window as well as the 
button that closes the pop-up window without introducing any changes to the document.
Another way to close the dialog window and return to the editing area is to use the 
button located in the top right-hand-side corner of the window or to press the Esc key on your keyboard.
Depending on the options available for a particular feature the dialog window may contain different elements. Some windows may also contain tabs with additional configuration options. To navigate between the tabs simply click their labels. You can also move between tabs with your keyboard. To enter the tabs list, press the Alt+F10 shortcut while in the dialog window. To move to the next tab, use the Tab or Right Arrow key. To go back to the previous tab, press Shift+Tab or the Left Arrow key.
Reopening a Dialog Window
Some dialog windows can be used to insert an element, such as an image or a table, into the document. After an element is added to the document, in most cases it can be edited at any time by double-clicking or selecting it and clicking the appropriate toolbar button again. The dialog window will re-open and you will be able to introduce changes to the element's configuration options.
If you attempt to close the dialog window without saving the changes, you will be prompted to do so:
You can either proceed without saving your changes by choosing OK or close the alert window with the Cancel button and save the changes.
Resizing a Dialog Window
CKEditor dialog windows all open with some default size. If, however, you would like to resize a dialog window, you can easily do it by clicking and dragging the 
resizing grip in the bottom right-hand corner of a dialog window.
The image below presents a default size of the Advanced tab in the Link dialog window.
Since the text entered into some text fields (particularly the Style field) might be longer than their default size, you may wish to resize the dialog window. Use the Drag to resize feature to change the width and height of a dialog window as needed.
