CKSource

Latest revision as of 12:45, 8 August 2012

Image Info

The Image Info tab is the default tab that opens after you press the button on the toolbar. It allows you to set the image URL and configure the way it will appear in the document.

Image Info tab of the Image Properties window

Below is an overview of all Image Info tab elements:

URL – the web address of the image. The image may be located on the same server as the web site you are currently in or on an external server.
- External server: If you want to use an external address, use the full absolute path.
  Example:
  
  http://example.com/image1.jpg
- Local server: If the image is located on the same server, you can use a relative path that omits the domain name and starts with a slash.
  Example:
  
  /images/image2.jpg
  
  If CKEditor is integrated with a file browser (like CKFinder), you can also use the Browse Server button to select an image from the ones that are available on the server.

Alternative Text – a short textual description of the image that tells users with assistive devices (like screen readers) what the image is about. You should always provide your images with meaningful alternative text in order to make it accessible to users with disabilities.

Width – the width of the image in pixels. By default this is the size of the original image.
Height – the height of the image in pixels. By default this is the size of the original image.

Border – the size of the solid border around the image in pixels.
HSpace – the horizontal spacing (or margin) between the image border (if present) or the image itself and other document elements that surround the image, in pixels.
VSpace – the vertical spacing (or margin) between the image border (if present) or the image itself and other document elements that surround the image, in pixels.
Align – the alignment of the image in the document. Available options are Right and Left.
Preview – a preliminary view of the selected image formatted according to the options chosen on the left.

Image manipulation

With CKEditor you do not have to worry about resizing your image.

If the image is too big, you can alter its dimensions by entering new values into the Width and Height fields. By default the image ratio is locked, which you can see thanks to a button. This means that when you change one of the size values (width or height), the other one will be adjusted automatically.

If you want to freely modify both dimensions, click the button in order to unlock the ratio. The button will now change to and modification of one dimension will not automatically cause the other one to be adjusted. To lock the image ratio again, click the button once more.

You can easily return to original image size by pressing the button. This will reset the image size; the original width and height will now appear in appropriate text boxes.

Link

The Link tab lets you assign a link to an image inserted into the document, effectively converting the image into a clickable link. The link can point to any kind of object available in the Internet, like a simple URL address, a PDF document, or an online video.

This might prove especially useful if, for example, you want to add a thumbnail that would lead the reader of your document to a full-size copy of the image or add a company logo and point to its website.

Link tab of the Image Properties window

To use the Link functionality, first you need to insert an image into a document using the Image Info tab. After you configure the display options, switch to the Link tab and configure the image target using the available options.

Below is the overview of all Link tab elements:

URL – the web address that the image should be pointing at. This may be a plain website address, an image, or other file that is located on the same server as the web site you are currently in or on an external server.
- External server: If you want to use an external address, use the full absolute path.
  Example:
  
  http://example.com/
  
  http://example.com/largeimage1.jpg
- Local server: If the target location is on the same server, you can use an absolute path that omits the domain name and starts with a slash.
  Example:
  
  /howto/images
  
  /images/largeimage2.jpg
  
  If CKEditor is integrated with a file browser (like CKFinder), you can also use the Browse Server button to select an image or a file from the ones that are available on the server.

Target – the window where the assigned link will open after clicking the image. You can choose between New Window (_blank), Topmost Window (_top), Same Window (_self), or Parent Window (_parent).

If you want to edit an image that is connected to a link, use the context menu and choose the Image Properties option. The Image Properties window will let you modify both the image and the link that it is pointing to. If you double click such image instead, you will open the Link dialog window that will only allow you to edit the link properties and not the image itself.

Upload

The Upload tab of the Image Properties dialog window allows you to send your own images to the server. It is only visible if the server accepts files uploaded by the users and CKEditor is integrated with a file browser (like CKFinder).

Upload tab of the Image Properties window

To upload an image file, click the file input field or the Browse button next to it. When the file browser of your operating system opens, navigate to an appropriate folder and choose a file by double clicking it or using the Open button. To send the file to the server, click the Send it to the Server button of CKEditor.

Advanced

The Advanced tab lets you configure additional image options such as assign it an ID, a class, a longer description, a tooltip, or CSS style properties. It is meant for advanced users with knowledge of HTML as well as CSS, and gives nearly endless possibilities as far as the presentation of the image is concerned.

Advanced tab of the Image Properties window

Below is the overview of all Advanced tab elements:

Id – a unique identifier for an image element in the document (id attribute).
Language Direction – the direction of the text: left to right (LTR) or right to left (RTL) (dir attribute).
Language Code – the language of the image element specified according to RFC 1766 (lang attribute).
Long Description URL – the web address of an HTML page containing a longer description of the image (longdesc attribute).
Stylesheet Classes – the class of the image element (class attribute). Note that an image element might be assigned more than one class. If this is a case, separate class names with spaces.
Advisory Title – the text of the tooltip that is shown when the mouse cursor hovers over the image (title attribute).
Style – CSS style definitions (style attribute). Note that each value must end with a semi-colon and individual properties should be separated with spaces.

@@ Line 1: / Line 1: @@
+{{#CUSTOMTITLE:Inserting Images}}
 __TOC__
 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.
+In order 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 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:
+The '''Image Properties''' dialog window includes four tabs that group image options:
-* [[CKEditor_3.x/Users_Guide/Common_Tasks/Inserting_Images#Image_Info|Image Info]]
+* [[CKEditor_3.x/Users_Guide/Rich Text/Images#Image_Info|Image Info]]
-* [[CKEditor_3.x/Users_Guide/Common_Tasks/Inserting_Images#Link|Link]]
+* [[CKEditor_3.x/Users_Guide/Rich Text/Images#Link|Link]]
-* [[CKEditor_3.x/Users_Guide/Common_Tasks/Inserting_Images#Upload|Upload]]
+* [[CKEditor_3.x/Users_Guide/Rich Text/Images#Upload|Upload]]
-* [[CKEditor_3.x/Users_Guide/Common_Tasks/Inserting_Images#Advanced|Advanced]]
+* [[CKEditor_3.x/Users_Guide/Rich Text/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.
+{{CKEditor Dialog Windows}}
-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.
+== Image Info ==
+The '''Image Info''' tab is the default tab that opens after you press the [[Image:CKEditor_image.png‎|Image]] button on the toolbar. It allows you to set the image URL and configure the way it will appear in the document.
-If you attempt to close the '''Image Properties''' dialog window without saving the changes, you will be prompted to do so:
+[[Image:CKEditor_image_properties.png|frame|center|Image Info tab of the Image Properties window]]
-[[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]]
+Below is an overview of all '''Image Info''' tab elements:
+* '''URL''' &ndash; the web address of the image. The image may be located on the same server as the web site you are currently in or on an external server.
+** External server: If you want to use an external address, use the full absolute path.
+**: Example:
+**: <code><nowiki>http://example.com/image1.jpg</nowiki></code>
+** Local server: If the image is located on the same server, you can use a relative path that omits the domain name and starts with a slash.
+**: Example:
+**: <code><nowiki>/images/image2.jpg</nowiki></code>
+**: If CKEditor is integrated with a file browser (like [http://ckfinder.com/ CKFinder]), you can also use the '''Browse Server''' button to select an image from the ones that are available on the server.
-You can either proceed withou saving your changes by choosing '''OK''' or close the alert window with a '''Cancel''' command and save the changes.
+* '''Alternative Text''' &ndash; a short textual description of the image that tells users with assistive devices (like screen readers) what the image is about. You should always provide your images with meaningful alternative text in order to make it [[CKEditor_3.x/Users_Guide/Accessibility|accessible]] to users with disabilities.
+* '''Width''' &ndash;  the width of the image in pixels. By default this is the size of the original image.
+* '''Height''' &ndash; the height of the image in pixels. By default this is the size of the original image.
-=== Image Info ===
+* '''Border''' &ndash; the size of the solid border around the image in pixels.
-[[Image:CKEditor_insert_images.png]]
+* '''HSpace''' &ndash; the horizontal spacing (or margin) between the image border (if present) or the image itself and other document elements that surround the image, in pixels.
+* '''VSpace''' &ndash; the vertical spacing (or margin) between the image border (if present) or the image itself and other document elements that surround the image, in pixels.
+* '''Align''' &ndash; the alignment of the image in the document. Available options are '''Right''' and '''Left'''.
+* '''Preview''' &ndash; a preliminary view of the selected image formatted according to the options chosen on the left.
-The first bookmark refers to the "Image Info"<br>
+=== Image manipulation ===
+With CKEditor you do not have to worry about resizing your image.
-* '''URL''': defines the URL address of the image. User may also use the "Browse Sever" in order to browse the files.
+If the image is too big, you can alter its dimensions by entering new values into the '''Width''' and '''Height''' fields. By default the image ratio is locked, which you can see thanks to a [[Image:CKEditor_lock.png|Lock]] button. This means that when you change one of the size values (width or height), the other one will be adjusted automatically.
-* '''Alternative Text''': gives the description of the image if user prefers it to be different from the image name.
-* '''Width''': specifies image’s width.<br>
-* '''Height''': specifies image’s height.
-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]].
+If you want to freely modify both dimensions, click the [[Image:CKEditor_lock.png|Lock]] button in order to unlock the ratio. The button will now change to [[Image:CKEditor_unlock.png|Unlock]] and modification of one dimension will not automatically cause the other one to be adjusted. To lock the image ratio again, click the [[Image:CKEditor_unlock.png|Unlock]] button once more.
-* '''Border''' &ndash; specifies the size of the border you want to place around the image.
+You can easily return to original image size by pressing the [[Image:CKEditor_reset_size.png|Reset Size]] button. This will reset the image size; the original width and height will now appear in appropriate text boxes.
-* '''HSpace''': defines the size of the&nbsp; 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.
+== Link ==
+The '''Link''' tab lets you assign a link to an image inserted into the document, effectively converting the image into a clickable link. The link can point to any kind of object available in the Internet, like a simple URL address, a PDF document, or an online video.
-Pressing "'''OK'''" inserts the image with the specified properties.
+This might prove especially useful if, for example, you want to add a thumbnail that would lead the reader of your document to a full-size copy of the image or add a company logo and point to its website.
-=== Link ===
+[[Image:CKEditor_images_link.png|frame|center|Link tab of the Image Properties window]]
-The second bookmark relates to "Link":<br>
-[[Image:CKEditor_images_link.png]]
+To use the '''Link''' functionality, first you need to insert an image into a document using the '''Image Info''' tab. After you configure the display options, switch to the '''Link''' tab and configure the image target using the available options.
-* '''URL''': defines the URL address of the image. You may also use the "Browse Sever" in order to browse the files.<br>
+Below is the overview of all '''Link''' tab elements:
-* '''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 ).
+* '''URL''' &ndash; the web address that the image should be pointing at. This may be a plain website address, an image, or other file that is located on the same server as the web site you are currently in or on an external server.
+** External server: If you want to use an external address, use the full absolute path.
+**: Example:
+**: <code><nowiki>http://example.com/</nowiki></code>
+**: <code><nowiki>http://example.com/largeimage1.jpg</nowiki></code>
+** Local server: If the target location is on the same server, you can use an absolute path that omits the domain name and starts with a slash.
+**: Example:
+**: <code><nowiki>/howto/images</nowiki></code>
+**: <code><nowiki>/images/largeimage2.jpg</nowiki></code>
+**: If CKEditor is integrated with a file browser (like [http://ckfinder.com/ CKFinder]), you can also use the '''Browse Server''' button to select an image or a file from the ones that are available on the server.
-=== Upload ===
+* '''Target''' &ndash; the window where the assigned link will open after clicking the image. You can choose between '''New Window''' (<code>_blank</code>), '''Topmost Window''' (<code>_top</code>), '''Same Window''' (<code>_self</code>), or '''Parent Window''' (<code>_parent</code>).
-Notice that this bookmark may not be available if CKEditor is not connected to the file manager, such as CKFinder.
+<note>If you want to edit an image that is connected to a link, use the context menu and choose the '''Image Properties''' option. The '''Image Properties''' window will let you modify both the image and the link that it is pointing to. If you double click such image instead, you will open the '''Link''' dialog window that will only allow you to edit the link properties and not the image itself.</note>
-The third bookmark is the "Upload" section:
-[[Image:CKEditor_images_upload.png]]
+== Upload ==
+The '''Upload''' tab of the '''Image Properties''' dialog window allows you to send your own images to the server. It is only visible if the server accepts files uploaded by the users and CKEditor is integrated with a file browser (like [http://ckfinder.com/ CKFinder]).
-* '''Upload''': specifies the location of the image file on your local hard drive. User may also use "Browse" instead of typing the location manually.
+[[Image:CKEditor_images_upload.png|frame|center|Upload tab of the Image Properties window]]
-Pressing "'''Send it to the Server'''" sends the image to the server.
-=== Advanced ===
+To upload an image file, click the file input field or the '''Browse''' button next to it. When the file browser of your operating system opens, navigate to an appropriate folder and choose a file by double clicking it or using the '''Open''' button. To send the file to the server, click the '''Send it to the Server''' button of CKEditor.
-This bookmark is only for advanced users:
+== Advanced ==
+The '''Advanced''' tab lets you configure additional image options such as assign it an ID, a class, a longer description, a tooltip, or CSS style properties. It is meant for advanced users with knowledge of HTML as well as CSS, and gives nearly endless possibilities as far as the presentation of the image is concerned.
-[[Image:CKEditor_images_advanced.png]]
+[[Image:CKEditor_images_advanced.png|frame|center|Advanced tab of the Image Properties window]]
-* '''Id''': specifies image's ID.
-* '''Language Direction''': sets the language direction from left to right ( LTR ) or from right to left ( RTL ).
+Below is the overview of all '''Advanced''' tab elements:
-* '''Language Code''': specifies the language code e.g. en, pt, pl.
+* '''Id''' &ndash; a unique identifier for an image element in the document (<code>id</code> attribute).
-* '''Long Description URL''': specifies the description of the page.<br>
+* '''Language Direction''' &ndash; the direction of the text: left to right (LTR)  or right to left (RTL) (<code>dir</code> attribute).
-* '''Stylesheet Classes''': specifies the name of the CSS class.
+* '''Language Code''' &ndash; the language of the image element specified according to [http://www.ietf.org/rfc/rfc1766.txt RFC 1766] (<code>lang</code> attribute).
-* '''Advisory Title''': specifies the description of the target object.
+* '''Long Description URL''' &ndash; the web address of an HTML page containing a longer description of the image (<code>longdesc</code> attribute).
-* '''Style''': specifies the style.
+* '''Stylesheet Classes''' &ndash; the class of the image element (<code>class</code> attribute). Note that an image element might be assigned more than one class. If this is a case, separate class names with spaces.
+* '''Advisory Title''' &ndash; the text of the tooltip that is shown when the mouse cursor hovers over the image (<code>title</code> attribute).
+* '''Style''' &ndash; CSS style definitions (<code>style</code> attribute). Note that each value must end with a semi-colon and individual properties should be separated with spaces.

CKSource

Login / Create Account

Page Tools

Inserting Images