(Article introduction rewritten, new image added.) |
|||
| Line 1: | Line 1: | ||
| − | + | CKEditor allows you to add images to your documents in an easy and intuitive way. | |
| + | |||
| + | To insert an image simply press the [[Image:CKEditor_image.png|Image]] button on the toolbar. The '''Image Properties''' dialog window that will open lets you set various configuration options that define image source, its size, display properties, or other advanced properties. | ||
| + | |||
| + | The '''Image Properties''' dialog window include four tabs that group numerous image options: | ||
| + | * [[CKEditor_3.x/Users_Guide/Common_Tasks/Inserting_Images#Image_Info|Image Info]] | ||
| + | * [[CKEditor_3.x/Users_Guide/Common_Tasks/Inserting_Images#Link|Link]] | ||
| + | * [[CKEditor_3.x/Users_Guide/Common_Tasks/Inserting_Images#Upload|Upload]] | ||
| + | * [[CKEditor_3.x/Users_Guide/Common_Tasks/Inserting_Images#Advanced|Advanced]] | ||
| + | |||
| + | All tabs contain the [[Image:CKEditor_ok_button.png|OK]] and [[Image:CKEditor_cancel_button.png|Cancel]] buttons that let you accept the changes or close the dialog window without any changes, respectively. | ||
| + | |||
| + | Once inserted into the document, the image can be edited at any time by double-clicking it. The '''Image Properties''' dialog window will open again and let you introduce any changes to the image configuration options. | ||
| + | |||
| + | If you attempt to close the '''Image Properties''' dialog window without saving the changes, you will be prompted to do so: | ||
| + | |||
| + | [[Image:CKEditor_image_changed.png|frame|center|alt=An alert window prompting to save the changes of the image|An alert window prompting to save the changes of the image]] | ||
| + | |||
| + | |||
| + | You can either proceed withou saving your changes by choosing '''OK''' or close the alert window with a '''Cancel''' command and save the changes. | ||
| + | |||
=== Image Info === | === Image Info === | ||
| Line 13: | Line 33: | ||
User may lock the image proportions by pressing [[Image:CKEditor_lock.png]] or may return to the original image size by pressing [[Image:CKEditor_return.png]]. | User may lock the image proportions by pressing [[Image:CKEditor_lock.png]] or may return to the original image size by pressing [[Image:CKEditor_return.png]]. | ||
| − | * '''Border''' | + | * '''Border''' – specifies the size of the border you want to place around the image. |
* '''HSpace''': defines the size of the horizontal gap. | * '''HSpace''': defines the size of the horizontal gap. | ||
* '''VSpace''': defines the size of the vertical gap. | * '''VSpace''': defines the size of the vertical gap. | ||
Revision as of 11:48, 26 October 2010
CKEditor allows you to add images to your documents in an easy and intuitive way.
To insert an image simply press the 
button on the toolbar. The Image Properties dialog window that will open lets you set various configuration options that define image source, its size, display properties, or other advanced properties.
The Image Properties dialog window include four tabs that group numerous image options:
All tabs contain the 
and 
buttons that let you accept the changes or close the dialog window without any changes, respectively.
Once inserted into the document, the image can be edited at any time by double-clicking it. The Image Properties dialog window will open again and let you introduce any changes to the image configuration options.
If you attempt to close the Image Properties dialog window without saving the changes, you will be prompted to do so:
You can either proceed withou saving your changes by choosing OK or close the alert window with a Cancel command and save the changes.
Contents
Image Info
File:CKEditor insert images.png
The first bookmark refers to the "Image Info"
- URL: defines the URL address of the image. User may also use the "Browse Sever" in order to browse the files.
- Alternative Text: gives the description of the image if user prefers it to be different from the image name.
- Width: specifies image’s width.
- Height: specifies image’s height.
User may lock the image proportions by pressing 
or may return to the original image size by pressing 
.
- Border – specifies the size of the border you want to place around the image.
- HSpace: defines the size of the horizontal gap.
- VSpace: defines the size of the vertical gap.
- Align: specifies the alignment of the image. User may choose between Left or Right.
In a "Preview" window user may view how the window looks with the added image.
Pressing "OK" inserts the image with the specified properties.
Link
The second bookmark relates to "Link":
- URL: defines the URL address of the image. You may also use the "Browse Sever" in order to browse the files.
- Target: defines the target of the image (for advanced users). User may choose from New Window ( _blank ), Topmost Window ( _top ), Same Window ( _self ) or Parent Window ( _parent ).
Upload
Notice that this bookmark may not be available if CKEditor is not connected to the file manager, such as CKFinder.
The third bookmark is the "Upload" section:
- Upload: specifies the location of the image file on your local hard drive. User may also use "Browse" instead of typing the location manually.
Pressing "Send it to the Server" sends the image to the server.
Advanced
This bookmark is only for advanced users:
- Id: specifies image's ID.
- Language Direction: sets the language direction from left to right ( LTR ) or from right to left ( RTL ).
- Language Code: specifies the language code e.g. en, pt, pl.
- Long Description URL: specifies the description of the page.
- Stylesheet Classes: specifies the name of the CSS class.
- Advisory Title: specifies the description of the target object.
- Style: specifies the style.