CKEditor 3.x/Users Guide/Rich Text/Images - Revision history

Sebstefanov at 11:45, 8 August 2012

2012-08-08T11:45:17Z

Anna: /* Image Info */ Image Info screenshot updated

2011-01-31T08:22:40Z

‎Image Info: Image Info screenshot updated

Anna: Redundant spacing removed

2010-12-13T13:38:10Z

Redundant spacing removed

Anna: Final proof-reading

2010-12-13T12:22:32Z

Final proof-reading

Anna: Dialog windows template added

2010-12-10T11:27:59Z

Dialog windows template added

Anna: Note format modified

2010-12-10T09:51:14Z

Note format modified

Anna: Custom title, nowiki for sample links, dialog window section removed

2010-12-02T17:47:21Z

Custom title, nowiki for sample links, dialog window section removed

Anna: moved CKEditor 3.x/Users Guide/Common Tasks/Images to CKEditor 3.x/Users Guide/Rich Text/Images: User's Guide structure change

2010-12-02T07:43:08Z

moved CKEditor 3.x/Users Guide/Common Tasks/Images to CKEditor 3.x/Users Guide/Rich Text/Images: User's Guide structure change

Anna: moved CKEditor 3.x/Users Guide/Common Tasks/Inserting Images to CKEditor 3.x/Users Guide/Common Tasks/Images: Link shortening

2010-12-01T14:52:58Z

moved CKEditor 3.x/Users Guide/Common Tasks/Inserting Images to CKEditor 3.x/Users Guide/Common Tasks/Images: Link shortening

Anna: Minor formatting changes

2010-11-03T14:02:22Z

Minor formatting changes

@@ Line 24: / Line 24: @@
 **: Example:
 **: <code><nowiki>http://example.com/image1.jpg</nowiki></code>
-** Local server: If the image is located on the same server, you can use an absolute path that omits the domain name and starts with a slash.
+** 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>

← Older revision		Revision as of 08:22, 31 January 2011
Line 16:		Line 16:
	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.		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.

−	[[Image:~~CKEditor_insert_images~~.png\|frame\|center\|Image Info tab of the Image Properties window]]	+	[[Image:CKEditor_image_properties.png\|frame\|center\|Image Info tab of the Image Properties window]]

@@ Line 91: / Line 91: @@
 Below is the overview of all '''Advanced''' tab elements:
 * '''Id''' &ndash; a unique identifier for an image element in the document (<code>id</code> attribute).
 * '''Language Direction''' &ndash; the direction of the text: left to right (LTR)  or right to left (RTL) (<code>dir</code> attribute).

@@ Line 3: / Line 3: @@
 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 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 includes four tabs that group image options:
@@ Line 43: / Line 43: @@
 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 [[Image:CKEditor_lock.png|alt=Lock]] button. This means that when you change one of the size values (width or height), the other one will be adjusted automatically.
+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.
-If you want to freely modify both dimensions, click the [[Image:CKEditor_lock.png|alt=Lock]] button in order to unlock the ratio. The button will now change to [[Image:CKEditor_unlock.png|alt=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|alt=Unlock]] button once more.
+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.
-You can easily return to original image size by pressing the [[Image:CKEditor_reset_size.png|alt=Resize]] button. This will reset the image size; the original width and height will now appear in appropriate text boxes.
+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.
 == 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 at any kind of object available in the Internet &ndash; a simple URL address, a PDF document, or an online video.
+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.
-[[Image:CKEditor_images_link.png|frame|center|alt=Link tab of the Image Properties window|Link tab of the Image Properties window]]
+[[Image:CKEditor_images_link.png|frame|center|Link tab of the Image Properties window]]
@@ Line 73: / Line 73: @@
 * '''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>).
-<note>If you want to edit an image that is connected to a link, use the context menu open with the right mouse button 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>
+<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>
@@ Line 79: / Line 79: @@
 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]).
-[[Image:CKEditor_images_upload.png|frame|center|alt=Upload tab of the Image Properties window|Upload tab of the Image Properties window]]
+[[Image:CKEditor_images_upload.png|frame|center|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 and CSS and gives nearly endless possibilities as far as the presentation of the image is concerned.
+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|frame|center|alt=Advanced tab of the Image Properties window|Advanced tab of the Image Properties window]]
+[[Image:CKEditor_images_advanced.png|frame|center|Advanced tab of the Image Properties window]]
@@ Line 97: / Line 96: @@
 * '''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).
 * '''Long Description URL''' &ndash; the web address of an HTML page containing a longer description of the image (<code>longdesc</code> attribute).
-* '''Stylesheet Classes''' &ndash; a 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.
+* '''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.

@@ Line 11: / Line 11: @@
 * [[CKEditor_3.x/Users_Guide/Rich Text/Images#Advanced|Advanced]]
-For general information on using dialog windows please refer to the [[CKEditor 3.x/Users Guide/Interface/Dialog Windows|Dialog Windows]] section of the User's Guide.
+{{CKEditor Dialog Windows}}
 == Image Info ==

@@ Line 1: / Line 1: @@
 __TOC__
 CKEditor allows you to add images to your documents in an easy and intuitive way.
@@ Line 5: / Line 6: @@
 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]]
 == 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.
-[[Image:CKEditor_insert_images.png|frame|center|alt=Image Info tab of the Image Properties window|Image Info tab of the Image Properties window]]
+[[Image:CKEditor_insert_images.png|frame|center|Image Info tab of the Image Properties window]]
@@ Line 33: / Line 23: @@
 ** External server: If you want to use an external address, use the full absolute path.
 **: Example:
-**: http://example.com/image1.jpg
+**: <code><nowiki>http://example.com/image1.jpg</nowiki></code>
 ** Local server: If the image is located on the same server, you can use an absolute path that omits the domain name and starts with a slash.
 **: Example:
-**: [[/images/image2.jpg]]
+**: <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.
@@ Line 51: / Line 41: @@
 === Image manipulation ===
 With CKEditor you do not have to worry about resizing your image.
@@ Line 61: / Line 50: @@
 == 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 at any kind of object available in the Internet &ndash; a simple URL address, a PDF document, or an online video.
@@ Line 75: / Line 63: @@
 ** External server: If you want to use an external address, use the full absolute path.
 **: Example:
-**: http://example.com/
+**: <code><nowiki>http://example.com/</nowiki></code>
-**: http://example.com/largeimage1.jpg
+**: <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:
-**: [[/howto/images]]
+**: <code><nowiki>/howto/images</nowiki></code>
-**: [[/images/largeimage2.jpg]]
+**: <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.
@@ Line 88: / Line 76: @@
 == 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]).
@@ Line 98: / Line 85: @@
 == 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 and CSS and gives nearly endless possibilities as far as the presentation of the image is concerned.

← Older revision	Revision as of 07:43, 2 December 2010
(No difference)

← Older revision	Revision as of 14:52, 1 December 2010
(No difference)

@@ Line 30: / Line 30: @@
 Below is an overview of all '''Image Info''' tab elements:
-* '''URL''' &mdash; 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.
+* '''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:
@@ Line 39: / Line 39: @@
 **: 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.
-* '''Alternative Text''' &mdash; 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.
+* '''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''' &mdash;  the width of the image in pixels. By default this is the size of the original image.
+* '''Width''' &ndash;  the width of the image in pixels. By default this is the size of the original image.
-* '''Height''' &mdash; the height 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.
-* '''Border''' &mdash; the size of the solid border around the image in pixels.
+* '''Border''' &ndash; the size of the solid border around the image in pixels.
-* '''HSpace''' &mdash; 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.
+* '''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''' &mdash; 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.
+* '''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''' &mdash; the alignment of the image in the document. Available options are '''Right''' and '''Left'''.
+* '''Align''' &ndash; the alignment of the image in the document. Available options are '''Right''' and '''Left'''.
-* '''Preview''' &mdash; a preliminary view of the selected image formatted according to the options chosen on the left.
+* '''Preview''' &ndash; a preliminary view of the selected image formatted according to the options chosen on the left.
 === Image manipulation ===
@@ Line 62: / Line 62: @@
 == 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 at any kind of object available in the Internet &mdash; a simple URL address, a PDF document, or an online video.
+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 at any kind of object available in the Internet &ndash; 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.
@@ Line 72: / Line 72: @@
 Below is the overview of all '''Link''' tab elements:
-* '''URL''' &mdash; 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.
+* '''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:
@@ Line 83: / Line 83: @@
 **: 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.
-* '''Target''' &mdash; 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>).
+* '''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>).
-<ins>'''Important notice:'''</ins> If you want to edit an image that is connected to a link, use the context menu open with the right mouse button 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.
+<ins>'''Important note:'''</ins> If you want to edit an image that is connected to a link, use the context menu open with the right mouse button 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 ==
@@ Line 106: / Line 106: @@
 Below is the overview of all '''Advanced''' tab elements:
-* '''Id''' &mdash; a unique identifier for an image element in the document (<code>id</code> attribute).
+* '''Id''' &ndash; a unique identifier for an image element in the document (<code>id</code> attribute).
-* '''Language Direction''' &mdash; the direction of the text: left to right (LTR)  or right to left (RTL) (<code>dir</code> attribute).
+* '''Language Direction''' &ndash; the direction of the text: left to right (LTR)  or right to left (RTL) (<code>dir</code> attribute).
-* '''Language Code''' &mdash; the language of the image element specified according to [http://www.ietf.org/rfc/rfc1766.txt RFC 1766] (<code>lang</code> attribute).
+* '''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).
-* '''Long Description URL''' &mdash; the web address of an HTML page containing a longer description of the image (<code>longdesc</code> attribute).
+* '''Long Description URL''' &ndash; the web address of an HTML page containing a longer description of the image (<code>longdesc</code> attribute).
-* '''Stylesheet Classes''' &mdash; a 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.
+* '''Stylesheet Classes''' &ndash; a 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''' &mdash; the text of the tooltip that is shown when the mouse cursor hovers over the image (<code>title</code> attribute).
+* '''Advisory Title''' &ndash; the text of the tooltip that is shown when the mouse cursor hovers over the image (<code>title</code> attribute).
-* '''Style''' &mdash; 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.
+* '''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.