CKSource Docs - User contributions [en]

CKFinder 2.x/Developers Guide/ASP.NET/Configuration/Quick Start

2014-03-24T08:59:34Z

Sebstefanov:

== The CheckAuthentication() function ==

By default, CKFinder will not work due to authentication restrictions. You must first be sure that you have configured it properly, and then enable it.

Once you have completely configured CKFinder, you are ready to enable it for use. The CheckAuthentication() function is used for that. In this function, you must implement the code that ensures that the requests are coming from an authenticated user. This is usually done by assigning a session variable when the user logs on your system.

Return "true" if the user is properly authenticated. We strongly recommend you to NOT simply return "true" from this function without implementing authentication checks. Anonymous users would be able to use CKFinder, including uploading and deleting files from your server.

The following is a sample implementation for it:
<source lang="asp">public override bool CheckAuthentication()
{
if ( Session[ "IsAuthenticated" ] && (bool)Session[ "IsAuthenticated" ] == true )
{
return true;
}

return false;
}
</source>

== License ==

The license information for CKFinder must be pasted in the config.ascx file, inside the LicenseName and LicenseKey variables:
<source lang="asp">LicenseName = "put your license name here";
LicenseKey = "put your license key here";</source>
If these fields are blank or an invalid license key information is set, CKFinder will still be fully functional but it will be ruining in demo mode.

== Base URL and Directory ==

The '''BaseUrl''' setting is the base path used to build the final URL for the resources handled in CKFinder. For example:
<source lang="asp">BaseUrl = "/ckfinder/userfiles/";</source>
Notice that the trailing slash is required.

The '''BaseDir''' is the path to the local directory (in the server) which points to the above '''URL'''. This is the path used by CKFinder to handle the files in the server. Full write permissions must be granted to this directory.

You may point it to a directory directly. For example:
<source lang="asp">BaseDir = "C:/SiteDir/CKFinder/userfiles/";</source>
By leaving BaseDir empty, CKFinder will automatically attempt to resolve the path, based on '''BaseUrl''' (like Server.MapPath). For example:
<source lang="asp">BaseDir = "";</source>

=== Full URLs ===

CKFinder is able to resolve the BaseUrl path only when setting it to an absolute URL path, starting from the document root. For example:
<source lang="asp">BaseUrl = "/userfiles/";
BaseDir = "";
</source>
If you need CKFinder to return full URL address for the resources, then you are explicitly required to set the BaseDir setting. For example: 
<source lang="asp">// THIS IS WRONG:
BaseUrl = "http://example.com/ckfinder/files/";
BaseDir = "";

// THIS IS GOOD:
BaseUrl = "http://example.com/ckfinder/files/";
BaseDir = "C:/InetPub/MySite/ckfinder/files/";
</source>

FCKeditor 2.x/Users Guide/Overview

2013-04-30T14:47:52Z

Sebstefanov:

== What is FCKeditor? ==

FCKeditor is a lightweight text editor to be used in web pages. It provides most of the commonly used functions from desktop editors like Word to the web. By using FCKeditor you can write text, format it, create tables and much more. The editor doesn't need any kind of installation on your computer. The only thing you need to work with FCKeditor is a [[FCKeditor 2.x/Users Guide/Compatibility|compatible Internet browser]], like Internet Explorer, Firefox, Chrome, Safari or Opera.

== Who is FCKeditor made for? ==

FCKeditor is designed for '''developers''' who effectively integrate it in their products.Such products are then used by the so called '''end users''' whom this User's Guide is made for.

FCKeditor can appear in many programs which have very different functions and are designed to do different things, but the basis remains the same. You can find FCKeditor in places you would never expect to.

FCKeditor 2.x/Users Guide/Overview

2013-03-27T08:40:54Z

Sebstefanov: /* What is FCKeditor? */

== What is FCKeditor? ==

FCKeditor is a lightweight text editor to be used in web pages. It provides most of the commonly used functions from desktop editors like Word to the web. By using FCKeditor you can write text, format it, create tables and much more. The editor doesn't need any kind of installation on your computer. The only thing you need to work with FCKeditor is a [[FCKeditor 2.x/Users Guide/Compatibility|compatible Internet browser]], like Internet Explorer, Firefox, Safari or Opera.

== Who is FCKeditor made for? ==

FCKeditor is designed for '''developers''' who effectively integrate it in their products.Such products are then used by the so called '''end users''' whom this User's Guide is made for.

FCKeditor can appear in many programs which have very different functions and are designed to do different things, but the basis remains the same. You can find FCKeditor in places you would never expect to.

CKEditor 3.x/Users Guide/Interface/Dialog Windows

2012-10-11T12:41:46Z

Sebstefanov:

__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.

== 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]]

CKFinder 2.x/Developers Guide/ASP.NET/Configuration/Quick Start

2012-08-16T09:57:54Z

Sebstefanov: /* License */

== The CheckAuthentication() function ==

By default, CKFinder will not work due to authentication restrictions. You must first be sure that you have configured it properly, and then enable it.

Once you have completely configured CKFinder, you are ready to enable it for use. The CheckAuthentication() function is used for that. In this function, you must implement the code that ensures that the requests are coming from an authenticated user. This is usually done by assigning a session variable when the user logs on your system.

Return "true" if the user is properly authenticated. We strongly recommend you to NOT simply return "true" from this function without implementing authentication checks. Anonymous users would be able to use CKFinder, including uploading and deleting files from your server.

The following is a sample implementation for it:
<source lang="asp">public override bool CheckAuthentication()
{
if ( Session[ "IsAuthenticated" ] && (bool)Session[ "IsAuthenticated" ] == true )
{
return true;
}

return false;
}
</source>

== License ==

The license information for CKFinder must be pasted in the config.ascx file, inside the LicenseName and LicenseKey variables:
<source lang="asp">LicenseName = "put your license name here";
LicenseKey = "put your license key here";</source>
If these fields are blank or an invalid license key information is set, CKFinder will still be fully functional but it will be ruining in demo mode.

== Base URL and Directory ==

The '''BaseUrl''' setting is the base path used to build the final URL for the resources handled in CKFinder. For example:
<source lang="asp">BaseUrl = "/ckfinder/userfiles/";</source>
Notice that the trailing slash is required.

The '''BaseDir''' is the path to the local directory (in the server) which points to the above '''URL'''. This is the path used by CKFinder to handle the files in the server. Full write permissions must be granted to this directory.

You may point it to a directory directly. For example:
<source lang="asp">BaseDir = "C:/SiteDir/CKFinder/userfiles/";</source>
By leaving BaseDir empty, CKFinder will automatically attempt to resolve the path, based on '''BaseUrl''' (like Server.MapPath). For example:
<source lang="asp">BaseDir = "";</source>

=== Full URLs ===

CKFinder is able to resolve the BaseUrl path only when setting it to an absolute URL path, starting from the document root. For example:
<source lang="asp">BaseUrl = "/userfiles/";
BaseDir = "";
</source>
If you need CKFinder to return full URL address for the resources, the you are explicetelly required to set the BaseDir setting. For example: 
<source lang="asp">// THIS IS WRONG:
BaseUrl = "http://example.com/ckfinder/files/";
BaseDir = "";

// THIS IS GOOD:
BaseUrl = "http://example.com/ckfinder/files/";
BaseDir = "C:/InetPub/MySite/ckfinder/files/";
</source>

Template:Ckfinder 2.x Requirements Description

2012-08-16T08:42:02Z

Sebstefanov: /* Browsers */

== Browsers ==
Currently, the following browsers are required for CKFinder to run: 
[[Image:firefox.png]] '''Firefox 3.0+''' 
[[Image:Ie.png]] '''Internet Explorer 6.0+''' 
[[Image: Safari.png]] '''Safari''' 
[[Image:Opera.png]] '''Opera''' 
[[Image:chrome.png]] '''Google Chrome'''

<note>Some features depend on your browser settings. CKFinder should work in any of the browsers listed above with their default settings enabled. If you are experiencing problems with the [[CKFinder_2.x/Users_Guide/CKFinder_Interface/Context_Menu|Context Menu]] or your [[CKFinder_2.x/Users_Guide/CKFinder_Interface/Toolbar/Settings|Settings]] are not being saved, make sure that your browser is configured to "allow scripts to replace context menus" ("allow scripts to receive right clicks") and that you have "cookies support enabled". 
Please contact your system administrator if you have any doubts.</note>

Template:Ckfinder 2.x Requirements Description

2012-08-16T08:41:42Z

Sebstefanov: /* Browsers */

== Browsers ==
Currently, the following browsers are required for CKFinder to run: 
[[Image:firefox.png]] '''Firefox 3.0+''' 
[[Image:Ie.png]] '''Internet Explorer 6.0+''' 
[[Image: Safari.png]] '''Safari''' 
[[Image:Opera.png]] '''Opera''' 
[[Image:chrome.png]] '''Google Chrome'''

<note>Some features depend on your browser settings. CKFinder should work in any of the browsers listed above with their default settings enabled. If you are experiencing problems with the [[CKFinder_2.x/Users_Guide/CKFinder_Interface/Context_Menu|Context Menu]] or your [[CKFinder_2.x/Users_Guide/CKFinder_Interface/Toolbar/Settings|Settings]] are not being saved, make sure that your browser is configured to "allow scripts to replace context menus" ("allow scripts to receive right clicks") and that you have "cookies support enabled". 
Please contact your system administrator if you have any doubts.</note>

CKEditor 3.x/Users Guide/Rich Text/IFrame

2012-08-08T11:46:06Z

Sebstefanov:

{{#CUSTOMTITLE:Inserting IFrames}}
__TOC__
CKEditor makes it possible to insert inline frames to a document. Inline frames, or <code>iframe</code> elements, allow you to insert a frame containing another document in the middle of your document.

In order to insert an <code>iframe</code>, simply press the [[Image:CKEditor_iframe.png‎|IFrame]] button on the toolbar. The '''IFrame Properties''' dialog window that will open lets you set configuration options that define the inline frame URL, its size, display properties, or advanced styling settings.

The '''IFrame Properties''' dialog window includes two tabs that group <code>iframe</code> options:
* [[CKEditor_3.x/Users_Guide/Rich Text/IFrame#General|General]]
* [[CKEditor_3.x/Users_Guide/Rich Text/IFrame#Advanced|Advanced]]

{{CKEditor Dialog Windows}}

== General ==
The '''General''' tab is the default tab that opens after you press the [[Image:CKEditor_iframe.png‎|IFrame]] button on the toolbar. It allows you to set the <code>iframe</code> URL and configure the way it will appear in the document.

[[Image:CKEditor_iframe_general.png|frame|center|General tab of the IFrame Properties window]]

Below is an overview of all '''General''' tab elements:
* '''URL''' – the web address of the inline frame. The inline frame 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/iframe.html</nowiki></code>
** Local server: If the inline frame 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>/pages/iframe.html</nowiki></code>

* '''Width''' – the width of the inline frame in pixels.
* '''Height''' – the height of the inline frame in pixels.
* '''Alignment''' – the alignment of the inline frame in the document. Available options are '''Left''', '''Right''', '''Top''', '''Middle''', and '''Bottom'''.

* '''Enable scrollbars''' – if this option is checked, when inserted content is larger than the space available in the <code>iframe</code> element, scrollbars will be displayed to enable the user to see the whole inline document.
* '''Show frame border''' – if this option is checked, the inline frame will be displayed with a border.

* '''Name''' – the name of the <code>iframe</code> element (<code>name</code> attribute).
* '''Advisory Title''' – the text of the tooltip that is shown when the mouse cursor hovers over the inline frame (<code>title</code> attribute).
* '''Long Description URL''' – the web address of an HTML page containing a longer description of the inline frame (<code>longdesc</code> attribute).

== Advanced ==
The '''Advanced''' tab lets you configure additional inline frame options such as assign it an ID, a class, 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 <code>iframe</code> is concerned.

[[Image:CKEditor_iframe_advanced.png|frame|center|Advanced tab of the IFrame Properties window]]

* '''Id''' – a unique identifier for an inline frame element in the document (<code>id</code> attribute).
* '''Style''' – 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.
* '''Stylesheet Classes''' – the class of the inline frame element (<code>class</code> attribute). Note that an <code>iframe</code> element might be assigned more than one class. If this is a case, separate class names with spaces.

== Using IFrames ==
To insert an inline frame into your document, press the [[Image:CKEditor_iframe.png|IFrame‎]] button on the toolbar. When the '''IFrame Properties''' dialog window is displayed, configure the inline frame settings, including the obligatory URL field and the display properties. Once you click '''OK''', the [[Image:CKEditor_placeholder.png|iframe]] icon along with the iframe placeholder will appear in the document.

[[Image:CKEditor_iframe_example1.png|frame|center|An iframe inserted into in CKEditor]]

If you want to see the inline frame as it will be seen by the end user, use the [[CKEditor 3.x/Users Guide/Document/Preview|Document Preview]] feature of CKEditor. After you press the [[Image:CKEditor_preview.png|Preview‎]] button on the toolbar, the document preview will appear in a new browser window.

[[Image:CKEditor_iframe_example2.png|frame|center|An iframe preview]]

In the example above the <code>iframe</code> element was set to show the [http://ckeditor.com CKeditor] website in a 400px wide and 150px frame with scrollbars and borders.

CKEditor 3.x/Users Guide/Rich Text/Flash

2012-08-08T11:45:46Z

Sebstefanov:

{{#CUSTOMTITLE:Inserting Flash}}
__TOC__
CKEditor allows you to add [http://www.adobe.com/flashplatform/ Adobe Flash] files to your documents in an easy and intuitive way.

In order to insert a Flash object, press the [[Image:CKEditor_flash.png‎|Flash]] button on the toolbar. The '''Flash Properties''' dialog window that will open lets you set configuration options that define the Flash object source, its size, display properties, or other advanced properties.

The '''Flash Properties''' dialog window includes four tabs that group Flash object options:
* [[CKEditor_3.x/Users_Guide/Rich Text/Flash#General|General]]
* [[CKEditor_3.x/Users_Guide/Rich Text/Flash#Upload|Upload]]
* [[CKEditor_3.x/Users_Guide/Rich Text/Flash#Properties|Properties]]
* [[CKEditor_3.x/Users_Guide/Rich Text/Flash#Advanced|Advanced]]

{{CKEditor Dialog Windows}}

== General ==
The '''General''' tab is the default tab that opens after you press the [[Image:CKEditor_flash.png‎|Flash]] button on the toolbar. It allows you to set the URL of the Flash object and configure the way it will appear in the document.

[[Image:CKEditor_flash_general.png|frame|center|General tab of the Flash Properties window]]

Below is an overview of all '''General''' tab elements:
* '''URL''' – the web address of the Flash object. The object 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/flash1.swf</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>/animation/flash2.swf</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 a Flash object from the ones that are available on the server.

* '''Width''' – the width of the Flash object in pixels.
* '''Height''' – the height of the Flash object in pixels.

* '''HSpace''' – the horizontal spacing (or margin) between the Flash object and other document elements that surround it, in pixels.
* '''VSpace''' – the vertical spacing (or margin) between the Flash object and other document elements that surround it, in pixels.

* '''Preview''' – a preliminary view of the selected Flash object formatted according to the options chosen above.

== Upload ==
The '''Upload''' tab of the '''Flash Properties''' dialog window allows you to send your own Flash objects 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_flash_upload.png|frame|center|Upload tab of the Flash Properties window]]

To upload a Flash 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.

== Properties ==
The '''Properties''' tab lets you configure various Flash options that control the behavior of the inserted object. They also provide access to Adobe Flash Player settings that enable the object to play automatically or loop.

[[Image:CKEditor_flash_properties.png|frame|center|Properties tab of the Flash Properties window]]

Below is an overview of all '''Properties''' tab elements:
* '''Scale''' – the parameter that controls the scaling, stretching, or shrinking of the Flash object when the browser window is resized (<code>scale</code> attribute). You can choose between the following options:
** '''Show all''' – the entire object is visible with original aspect ratio retained. Borders may be present.
** '''No Border''' – the object is scaled to fit within the specified area without any borders, with original aspect ratio retained (the sides of the object may be cropped).
** '''Exact Fit''' – the entire object is visible within the specified area, but the original aspect ratio might not be retained thus making the object distorted.
* '''Script Access''' – the parameter that controls the ability of the Flash object to communicate with the page it is embedded in (<code>allowScriptAccess</code> attribute). You can choose between the following options:
** '''Always''' – the Flash object can communicate with the HTML page it is embedded in even if they are from different domains.
** '''Same domain''' – the Flash object can communicate with the HTML page it is embedded in only if they are from the same domain.
** '''Never''' – the Flash object cannot communicate with the HTML page it is embedded in.
* '''Window mode''' – the parameter that controls the layering of the Flash object in the browser window (<code>wmode</code> attribute). You can choose between the following options:
** '''Window''' – the Flash object is shown in its own window on a document.
** '''Opaque''' – the Flash object hides everything underneath.
** '''Transparent''' – the document background shows through all transparent parts of the Flash object.
* '''Quality''' – the parameter that controls the relation between the speed of the object and its appearance (<code>quality</code> attribute). You can choose between the following options:
** '''Best''' – best appearance, speed is disregarded.
** '''High''' – appearance is favored over speed.
** '''Auto Hig'''h – speed and appearance are equally emphasized.
** '''Medium''' – speed is favored over quality, but some anti-aliasing is applied.
** '''Auto Low''' – speed is favored over quality, but quality is improved whenever possible.
** '''Low''' – speed is favored over quality and anti-aliasing is never applied.
* '''Align''' – the parameter that controls the alignment of the Flash object in the document (<code>align</code> attribute). You can choose between the following options: '''Left''', '''Abs Bottom''', '''Abs Middle''', '''Baseline''', '''Bottom''', '''Middle''', '''Right''', '''Text Top''', or '''Top'''.

The '''Properties''' tab lets you configure four additional options pertaining to the Flash Player:
* '''Enable Flash Menu''' – the parameter that controls whether the Flash context menu is enabled.
* '''Auto Play''' – the parameter that controls whether the Flash object will start playing automatically right after you open the document.
* '''Loop''' – the parameter that controls whether the Flash object will play continuously in a loop.
* '''Allow Fullscreen''' – the parameter that controls whether the Flash object may be played in the full screen mode.

== Advanced ==
The '''Advanced''' tab lets you configure additional Flash object options such as assign it an ID, a class, 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 Flash object is concerned.

[[Image:CKEditor_flash_advanced.png|frame|center|Advanced tab of the Flash Properties window]]

Below is the overview of all '''Advanced''' tab elements:

* '''Id''' – a unique identifier for a Flash object element in the document (<code>id</code> attribute).
* '''Advisory Title''' – the text of the tooltip that is shown when the mouse cursor hovers over the Flash object (<code>title</code> attribute).
* '''Background color''' – the color that is visible beneath the transparent portions of the Flash object.
* '''Stylesheet Classes''' – the class of the Flash object element (<code>class</code> attribute). Note that a Flash object element might be assigned more than one class. If this is a case, separate class names with spaces.
* '''Style''' – 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.

== Flash Object Preview ==
Please note that on inserting into the document, the Flash object will be displayed in the CKEditor editing area as a fake element.

[[Image:CKEditor_flash_example.png|frame|center|Flash object as seen in the editor window]]

If you want to see check its final appearance, press the [[Image:CKEditor_preview.png|Preview]] toolbar button to use the [[CKEditor_3.x/Users_Guide/Document/Preview|Preview]] feature of CKEditor. The figure below shows the same Flash object in the preview mode.

[[Image:CKEditor_flash_preview.png|frame|center|Flash object as seen in the preview window]]

CKEditor 3.x/Users Guide/Rich Text/Images

2012-08-08T11:45:17Z

Sebstefanov:

{{#CUSTOMTITLE:Inserting Images}}
__TOC__
CKEditor allows you to add images to your documents in an easy and intuitive way.

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:
* [[CKEditor_3.x/Users_Guide/Rich Text/Images#Image_Info|Image Info]]
* [[CKEditor_3.x/Users_Guide/Rich Text/Images#Link|Link]]
* [[CKEditor_3.x/Users_Guide/Rich Text/Images#Upload|Upload]]
* [[CKEditor_3.x/Users_Guide/Rich Text/Images#Advanced|Advanced]]

{{CKEditor Dialog Windows}}

== 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_image_properties.png|frame|center|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:
**: <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.

* '''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 [[CKEditor_3.x/Users_Guide/Accessibility|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 [[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|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|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 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|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:
**: <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.

* '''Target''' – 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 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>

== 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]).

[[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 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|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 (<code>id</code> attribute).
* '''Language Direction''' – the direction of the text: left to right (LTR) or right to left (RTL) (<code>dir</code> attribute).
* '''Language Code''' – 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''' – the web address of an HTML page containing a longer description of the image (<code>longdesc</code> attribute).
* '''Stylesheet Classes''' – 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''' – the text of the tooltip that is shown when the mouse cursor hovers over the image (<code>title</code> attribute).
* '''Style''' – 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.

CKEditor 3.x/Users Guide/Rich Text/Links

2012-08-08T11:44:37Z

Sebstefanov:

__TOC__
= Links and E-mails =

The '''Link''' feature of CKEditor is a powerful option that lets you add clickable hyperlinks or e-mail addresses to your documents as well as control the way they look and work.

To insert a link to you document, press the [[Image:CKEditor_link.png|Link]] button on the toolbar or use the ''Ctrl+L'' keyboard shortcut. If you want the link to be assigned to a text fragment, select it first. If no text is selected, the link URL or e-mail address will appear in the document as-is.

The '''Link''' dialog window that will open lets you choose the link type and configuration options pertaining to your choice. It contains two or four tabs that group link options, depending on the link type:
* [[CKEditor 3.x/Users Guide/Rich Text/Links#Link_Info|Link Info]]
* [[CKEditor 3.x/Users Guide/Rich Text/Links#Target|Target]] (this tab is only available for URL link type)
* [[CKEditor 3.x/Users Guide/Rich Text/Links#Upload|Upload]] (this tab is only available for URL link type)
* [[CKEditor 3.x/Users Guide/Rich Text/Links#Advanced|Advanced]]

{{CKEditor Dialog Windows}}

== Link Type: URL ==
'''URL''' is the default link type that lets you add a website address to your document. For this sort of link all four tabs of the '''Link''' dialog window are available.

=== Link Info ===
The '''Link Info''' tab is the default tab that opens after you press the [[Image:CKEditor_link.png‎|Link]] button on the toolbar. It allows you to choose the link type as well as set the link protocol and URL.

[[Image:CKEditor_link_url_linkinfo.png|frame|center|Link Info tab of the Link window for the URL link type]]

Below is an overview of all '''Link Info''' tab elements:
* '''Link Type''' – the category of the link that will be inserted into the document. You can choose between the following options:
** '''URL''' – the web address of any resource available in the Internet, like a website, a PDF document, or an image.
**: Example:
**: <code><nowiki>http://example.com/about.html</nowiki></code>
**: <code><nowiki>http://example.com/images/image1.jpg</nowiki></code>
** '''Link to anchor in the text''' – an internal link pointing the reader to a designated point in your document.
**: Example:
**: <code><nowiki>#anchor1</nowiki></code>
** '''E-mail''' – an e-mail address.
**: Example:
**: <code><nowiki>myname@example.com</nowiki></code>

* '''Protocol''' – the communication protocol used with the web address. You can choose between the following options: <code><nowiki>http://</nowiki></code>, <code><nowiki>https://</nowiki></code>, <code><nowiki>ftp://</nowiki></code>, <code><nowiki>news://</nowiki></code>, or <code><other></code>.

* '''URL''' – the web address of the resource that the link is pointing to. It 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/about.html</nowiki></code>
**: <code><nowiki>http://example.com/images/image1.jpg</nowiki></code>
** Local server: If the resource 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>/about/mission.html</nowiki></code>
**: <code><nowiki>/howto/printing.avi</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 a resource from the ones that are available on the server.

=== Target ===
The '''Target''' tab is only available for the URL link type. It specifies the location where the link will open after you click it. By default the target of the URL is not set and the link will open in the same browser window or tab as the document.

[[Image:CKEditor_link_url_target.png|frame|center|Target tab of the Link window for the URL link type]]

This tab contains only one element: a drop-down '''Target''' list that lets you choose the location where the link will open. The list contains the following options:
* '''<not set>''' – the default setting that opens the link in the same browser window or tab as the document.
* '''<frame>''' – the setting that opens the link in the frame specified in the '''Target Frame Name''' text box. The text box is only visible after you choose '''<frame>''' as the target.
[[Image:CKEditor_link_url_target_frame.png|frame|center|alt=Target tab of the Link window for the URL link type with frame chosen as target|Target tab of the Link window for the URL link type with frame chosen as target]]
* '''<popup window>''' – the setting that opens the link in the pop-up window specified in the '''Popup Window Name''' text box. The text box is only visible after you choose '''<popup window>''' as the target.
[[Image:CKEditor_link_url_target_popup.png|frame|center|alt=Target tab of the Link window for the URL link type with pop-up window chosen as target|Target tab of the Link window for the URL link type with pop-up window chosen as target]]
*: If you choose to open the link in a pop-up window, you may configure some further options that control the appearance of the pop-up. Note, however, that the users' browser settings might override these options and make the pop-up window appear in a standard new browser tab or window instead. The following options are available:
** '''Resizable''' – this parameter controls whether the pop-up window may be resized.
** '''Status bar''' – this parameter controls whether the pop-up window will contain the status bar.
** '''Location bar''' – this parameter controls whether the pop-up window will contain the location bar.
** '''Toolbar''' – this parameter controls whether the pop-up window will contain the toolbar.
** '''Menu bar''' – this parameter controls whether the pop-up window will contain the menu bar.
** '''Full screen''' – this parameter controls whether the pop-up window will be maximized (full-screen).
** '''Scroll bars''' – this parameter controls whether the pop-up window will contain the scroll bars.
** '''Dependent''' – this parameter controls whether the pop-up window will close when the window that opens it closes (works in Netscape only).
** '''Width''' – the width of the pop-up window.
** '''Height''' – the height of the pop-up window.
** '''Left Position''' – the offset of the pop-up window from the left side of the screen.
** '''Top Position''' – the offset of the pop-up window from the top of the screen.
* '''New Window (<code>_blank</code>)''' – the setting that opens the link in a new window.
* '''Topmost Window (<code>_top</code>)''' – the setting that opens the link in a window that is positioned on the top.
* '''Same Window (<code>_self</code>)''' – the setting that opens the link in the same window as the document.
* '''Parent Window (<code>_parent</code>)''' – the setting that opens the link in the window that the document window is nested in.

=== Upload ===
The '''Upload''' tab is only available for the URL link type.

The '''Upload''' tab of the '''Link''' dialog window allows you to send your own resources 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_link_url_upload.png|frame|center|alt=Upload tab of the Link window for the URL link type|Upload tab of the Link window for the URL link type]]

To upload a file, click the file input field or the '''Browse''' button next to it. When the file browser of your operating system opens, navigate to the 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. The '''Link Info''' tab will open and the URL of the uploaded file will automatically appear in the '''URL''' field.

=== Advanced ===
The '''Advanced''' tab lets you configure additional link options such as assigning it an ID, a class, a tab index, 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 link is concerned.

[[Image:CKEditor_link_url_advanced.png|frame|center|Advanced tab of the Link window]]

Below is the overview of all '''Advanced''' tab elements:
* '''Id''' – a unique identifier for the link element in the document (<code>id</code> attribute).
* '''Language Direction''' – the direction of the text: left to right (LTR) or right to left (RTL) (<code>dir</code> attribute).
* '''Access key''' – a keyboard shortcut to access the link element (<code>accesskey</code> attribute).
* '''Name''' – the name of the link element (<code>name</code> attribute).
* '''Language Code''' – the language of the link element specified according to [http://www.ietf.org/rfc/rfc1766.txt RFC 1766] (<code>lang</code> attribute).
* '''Tab Index''' – the tab order of the link element (<code>tabindex</code> attribute).
* '''Advisory Title''' – the text of the tooltip that is shown when the mouse cursor hovers over the link (<code>title</code> attribute).
* '''Advisory Content Type''' – the content type of the link (<code>type</code> attribute).
* '''Stylesheet Classes''' – the class of the link element (<code>class</code> attribute). Note that an link element might be assigned more than one class. If this is the case, separate class names with spaces.
* '''Linked Resource Charset''' – the character set of the linked resource (<code>charset</code> attribute).
* '''Relationship''' – the relationship between the current document and the link target (<code>rel</code> attribute).
* '''Style''' – 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.

== Link Type: Link to anchor in the text ==
If you want to point to an [[CKEditor 3.x/Users Guide/Rich Text/Links#Anchors|anchor]] previously set in the document, select '''Link to anchor in the text''' from the '''Link Type''' drop-down list. When you choose this link type, two '''Link''' dialog window tabs will become available: the '''Link Info''' tab and the '''Advanced''' tab.

Please note that if you do not have any anchors defined in your document, a message telling you so will be displayed in the '''Link Info''' tab.

[[Image:CKEditor_link_anchor_linkinfo_notdefined.png|frame|center|Link Info tab of the Link window for no anchors defined in the document]]

When you add an anchor to your document, you will be able to select it from the drop-down lists of the '''Link Info''' tab.

[[Image:CKEditor_link_anchor_linkinfo.png|frame|center|Link Info tab of the Link window for the Link to anchor in the text link type]]

The '''Link Info''' tab contains the following options that make selecting an anchor an easy task:
* '''By Anchor Name''' – a drop-down list containing the names of all anchors established in the document.
* '''By Element Id''' – a drop-down list containing the identifiers of all anchors established in the document that contain the <code>id</code> attribute. Note: in order to add an id to an anchor, you need to [[CKEditor 3.x/Users Guide/Document/Source|modify the document source]].

For a detailed description of all '''Advanced''' tab elements, refer to the [[CKEditor 3.x/Users Guide/Rich Text/Links#Advanced|Advanced]] section above.

== Link Type: E-mail ==
CKEditor makes it easy to insert clickable e-mail addresses to your documents and even add a subject and body of the e-mail message that will be created when you click the link. If you want to add a hyperlinked e-mail address to document, select '''E-mail''' from the '''Link Type''' drop-down list.

When you choose this link type, two '''Link''' dialog window tabs will become available: the '''Link Info''' tab and the '''Advanced''' tab.

[[Image:CKEditor_link_email_linkinfo.png|frame|center|Link Info tab of the Link window for the E-mail link type]]

The '''Link Info''' tab contains the following fields that let you configure the recipient and the message content:
* '''E-Mail Address''' – the address of the recipient of the e-mail message. This field is obligatory for the e-mail link to work.
* '''Message Subject''' – the default text that will be pasted into the subject line of the e-mail message.
* '''Message Body''' – the default text that will be pasted into the e-mail message as its content.

For a detailed description of all '''Advanced''' tab elements, refer to the [[CKEditor 3.x/Users Guide/Rich Text/Links#Advanced|Advanced]] section above.

== Removing a Link ==
Removing a link is just as easy as adding it. When the cursor is placed in a link, the [[Image:CKEditor_unlink.png|Unlink]] button on the toolbar becomes active. Pressing the button removes the link and leaves plain text. Alternatively you can also open the element's context menu by pressing the right mouse button or using the ''Menu/Application'' key on your keyboard, and choose the '''Unlink''' command.

= Anchors =
CKEditor supports placing anchors in document text. To insert an anchor, press the [[Image:CKEditor_anchor.png|Anchor‎]] button on the toolbar. The following '''Anchor Properties''' window will appear:

[[Image:CKEditor_anchor_properties.png|frame|center|Anchor Properties dialog window in CKEditor]]

In order to create an anchor, enter its name in the '''Anchor Name''' text box. Once you click '''OK''', the [[Image:CKEditor_anchor_marker.gif|Anchor marker‎]] icon will appear in the document.

Please note that the anchor may either lead to a point in a document (when nothing was selected while creating it), and look like in the example below:

[[Image:CKEditor_anchor_example1.png|frame|center|An anchor inserted into a document, with no text selection]]

Or if it leads to some content that was selected in the document, this selection will be displayed with a blue dotted border around, like in this example:

[[Image:CKEditor_anchor_example2.png|frame|center|An anchor inserted into a document with some text selected]]

You can now [[CKEditor 3.x/Users Guide/Rich Text/Links#Link Type: Link to anchor in the text|create a link to your anchor]] with the [[Image:CKEditor_link.png|Link‎]] button. Once it is ready, the link will take the reader of your document to the section marked with the anchor.

[[Image:CKEditor_anchor_link_example.png|frame|center|An anchor inserted into a document with a link pointing to it]]

== Removing an Anchor ==
Removing an anchor is just as easy as adding it. When the cursor is placed in an anchor, the '''Remove Anchor''' context menu command becomes available. Open the element's context menu by pressing the right mouse button or using the ''Menu/Application'' key on your keyboard, and choose the '''Remove Anchor''' command. This option removes the anchor from the document and leaves plain text.

[[Image:CKEditor_anchor_remove.png|frame|center|Remove Anchor context menu command available for an anchor]]

CKEditor 3.x/Users Guide/Rich Text/Links

2012-08-08T11:44:10Z

Sebstefanov:

CKEditor 3.x/Users Guide/Rich Text/Links

2012-08-08T11:43:31Z

Sebstefanov:

__TOC__
= Links and E-mails =

The '''Link''' feature of CKEditor is a powerful option that lets you add clickable hyperlinks or e-mail addresses to your documents as well as control the way they look and work.

To insert a link to you document, press the [[Image:CKEditor_link.png|Link]] button on the toolbar or use the ''Ctrl+L'' keyboard shortcut. If you want the link to be assigned to a text fragment, select it first. If no text is selected, the link URL or e-mail address will appear in the document as-is.

The '''Link''' dialog window that will open lets you choose the link type and configuration options pertaining to your choice. It contains two or four tabs that group link options, depending on the link type:
* [[CKEditor 3.x/Users Guide/Rich Text/Links#Link_Info|Link Info]]
* [[CKEditor 3.x/Users Guide/Rich Text/Links#Target|Target]] (this tab is only available for URL link type)
* [[CKEditor 3.x/Users Guide/Rich Text/Links#Upload|Upload]] (this tab is only available for URL link type)
* [[CKEditor 3.x/Users Guide/Rich Text/Links#Advanced|Advanced]]

{{CKEditor Dialog Windows}}

== Link Type: URL ==
'''URL''' is the default link type that lets you add a website address to your document. For this sort of link all four tabs of the '''Link''' dialog window are available.

=== Link Info ===
The '''Link Info''' tab is the default tab that opens after you press the [[Image:CKEditor_link.png‎|Link]] button on the toolbar. It allows you to choose the link type as well as set the link protocol and URL.

[[Image:CKEditor_link_url_linkinfo.png|frame|center|Link Info tab of the Link window for the URL link type]]

Below is an overview of all '''Link Info''' tab elements:
* '''Link Type''' – the category of the link that will be inserted into the document. You can choose between the following options:
** '''URL''' – the web address of any resource available in the Internet, like a website, a PDF document, or an image.
**: Example:
**: <code><nowiki>http://example.com/about.html</nowiki></code>
**: <code><nowiki>http://example.com/images/image1.jpg</nowiki></code>
** '''Link to anchor in the text''' – an internal link pointing the reader to a designated point in your document.
**: Example:
**: <code><nowiki>#anchor1</nowiki></code>
** '''E-mail''' – an e-mail address.
**: Example:
**: <code><nowiki>myname@example.com</nowiki></code>

* '''Protocol''' – the communication protocol used with the web address. You can choose between the following options: <code><nowiki>http://</nowiki></code>, <code><nowiki>https://</nowiki></code>, <code><nowiki>ftp://</nowiki></code>, <code><nowiki>news://</nowiki></code>, or <code><other></code>.

* '''URL''' – the web address of the resource that the link is pointing to. It 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/about.html</nowiki></code>
**: <code><nowiki>http://example.com/images/image1.jpg</nowiki></code>
** Local server: If the resource is located on the same server, you can use an relative path that omits the domain name and starts with a slash.
**: Example:
**: <code><nowiki>/about/mission.html</nowiki></code>
**: <code><nowiki>/howto/printing.avi</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 a resource from the ones that are available on the server.

=== Target ===
The '''Target''' tab is only available for the URL link type. It specifies the location where the link will open after you click it. By default the target of the URL is not set and the link will open in the same browser window or tab as the document.

[[Image:CKEditor_link_url_target.png|frame|center|Target tab of the Link window for the URL link type]]

This tab contains only one element: a drop-down '''Target''' list that lets you choose the location where the link will open. The list contains the following options:
* '''<not set>''' – the default setting that opens the link in the same browser window or tab as the document.
* '''<frame>''' – the setting that opens the link in the frame specified in the '''Target Frame Name''' text box. The text box is only visible after you choose '''<frame>''' as the target.
[[Image:CKEditor_link_url_target_frame.png|frame|center|alt=Target tab of the Link window for the URL link type with frame chosen as target|Target tab of the Link window for the URL link type with frame chosen as target]]
* '''<popup window>''' – the setting that opens the link in the pop-up window specified in the '''Popup Window Name''' text box. The text box is only visible after you choose '''<popup window>''' as the target.
[[Image:CKEditor_link_url_target_popup.png|frame|center|alt=Target tab of the Link window for the URL link type with pop-up window chosen as target|Target tab of the Link window for the URL link type with pop-up window chosen as target]]
*: If you choose to open the link in a pop-up window, you may configure some further options that control the appearance of the pop-up. Note, however, that the users' browser settings might override these options and make the pop-up window appear in a standard new browser tab or window instead. The following options are available:
** '''Resizable''' – this parameter controls whether the pop-up window may be resized.
** '''Status bar''' – this parameter controls whether the pop-up window will contain the status bar.
** '''Location bar''' – this parameter controls whether the pop-up window will contain the location bar.
** '''Toolbar''' – this parameter controls whether the pop-up window will contain the toolbar.
** '''Menu bar''' – this parameter controls whether the pop-up window will contain the menu bar.
** '''Full screen''' – this parameter controls whether the pop-up window will be maximized (full-screen).
** '''Scroll bars''' – this parameter controls whether the pop-up window will contain the scroll bars.
** '''Dependent''' – this parameter controls whether the pop-up window will close when the window that opens it closes (works in Netscape only).
** '''Width''' – the width of the pop-up window.
** '''Height''' – the height of the pop-up window.
** '''Left Position''' – the offset of the pop-up window from the left side of the screen.
** '''Top Position''' – the offset of the pop-up window from the top of the screen.
* '''New Window (<code>_blank</code>)''' – the setting that opens the link in a new window.
* '''Topmost Window (<code>_top</code>)''' – the setting that opens the link in a window that is positioned on the top.
* '''Same Window (<code>_self</code>)''' – the setting that opens the link in the same window as the document.
* '''Parent Window (<code>_parent</code>)''' – the setting that opens the link in the window that the document window is nested in.

=== Upload ===
The '''Upload''' tab is only available for the URL link type.

The '''Upload''' tab of the '''Link''' dialog window allows you to send your own resources 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_link_url_upload.png|frame|center|alt=Upload tab of the Link window for the URL link type|Upload tab of the Link window for the URL link type]]

To upload a file, click the file input field or the '''Browse''' button next to it. When the file browser of your operating system opens, navigate to the 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. The '''Link Info''' tab will open and the URL of the uploaded file will automatically appear in the '''URL''' field.

=== Advanced ===
The '''Advanced''' tab lets you configure additional link options such as assigning it an ID, a class, a tab index, 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 link is concerned.

[[Image:CKEditor_link_url_advanced.png|frame|center|Advanced tab of the Link window]]

Below is the overview of all '''Advanced''' tab elements:
* '''Id''' – a unique identifier for the link element in the document (<code>id</code> attribute).
* '''Language Direction''' – the direction of the text: left to right (LTR) or right to left (RTL) (<code>dir</code> attribute).
* '''Access key''' – a keyboard shortcut to access the link element (<code>accesskey</code> attribute).
* '''Name''' – the name of the link element (<code>name</code> attribute).
* '''Language Code''' – the language of the link element specified according to [http://www.ietf.org/rfc/rfc1766.txt RFC 1766] (<code>lang</code> attribute).
* '''Tab Index''' – the tab order of the link element (<code>tabindex</code> attribute).
* '''Advisory Title''' – the text of the tooltip that is shown when the mouse cursor hovers over the link (<code>title</code> attribute).
* '''Advisory Content Type''' – the content type of the link (<code>type</code> attribute).
* '''Stylesheet Classes''' – the class of the link element (<code>class</code> attribute). Note that an link element might be assigned more than one class. If this is the case, separate class names with spaces.
* '''Linked Resource Charset''' – the character set of the linked resource (<code>charset</code> attribute).
* '''Relationship''' – the relationship between the current document and the link target (<code>rel</code> attribute).
* '''Style''' – 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.

== Link Type: Link to anchor in the text ==
If you want to point to an [[CKEditor 3.x/Users Guide/Rich Text/Links#Anchors|anchor]] previously set in the document, select '''Link to anchor in the text''' from the '''Link Type''' drop-down list. When you choose this link type, two '''Link''' dialog window tabs will become available: the '''Link Info''' tab and the '''Advanced''' tab.

Please note that if you do not have any anchors defined in your document, a message telling you so will be displayed in the '''Link Info''' tab.

[[Image:CKEditor_link_anchor_linkinfo_notdefined.png|frame|center|Link Info tab of the Link window for no anchors defined in the document]]

When you add an anchor to your document, you will be able to select it from the drop-down lists of the '''Link Info''' tab.

[[Image:CKEditor_link_anchor_linkinfo.png|frame|center|Link Info tab of the Link window for the Link to anchor in the text link type]]

The '''Link Info''' tab contains the following options that make selecting an anchor an easy task:
* '''By Anchor Name''' – a drop-down list containing the names of all anchors established in the document.
* '''By Element Id''' – a drop-down list containing the identifiers of all anchors established in the document that contain the <code>id</code> attribute. Note: in order to add an id to an anchor, you need to [[CKEditor 3.x/Users Guide/Document/Source|modify the document source]].

For a detailed description of all '''Advanced''' tab elements, refer to the [[CKEditor 3.x/Users Guide/Rich Text/Links#Advanced|Advanced]] section above.

== Link Type: E-mail ==
CKEditor makes it easy to insert clickable e-mail addresses to your documents and even add a subject and body of the e-mail message that will be created when you click the link. If you want to add a hyperlinked e-mail address to document, select '''E-mail''' from the '''Link Type''' drop-down list.

When you choose this link type, two '''Link''' dialog window tabs will become available: the '''Link Info''' tab and the '''Advanced''' tab.

[[Image:CKEditor_link_email_linkinfo.png|frame|center|Link Info tab of the Link window for the E-mail link type]]

The '''Link Info''' tab contains the following fields that let you configure the recipient and the message content:
* '''E-Mail Address''' – the address of the recipient of the e-mail message. This field is obligatory for the e-mail link to work.
* '''Message Subject''' – the default text that will be pasted into the subject line of the e-mail message.
* '''Message Body''' – the default text that will be pasted into the e-mail message as its content.

For a detailed description of all '''Advanced''' tab elements, refer to the [[CKEditor 3.x/Users Guide/Rich Text/Links#Advanced|Advanced]] section above.

== Removing a Link ==
Removing a link is just as easy as adding it. When the cursor is placed in a link, the [[Image:CKEditor_unlink.png|Unlink]] button on the toolbar becomes active. Pressing the button removes the link and leaves plain text. Alternatively you can also open the element's context menu by pressing the right mouse button or using the ''Menu/Application'' key on your keyboard, and choose the '''Unlink''' command.

= Anchors =
CKEditor supports placing anchors in document text. To insert an anchor, press the [[Image:CKEditor_anchor.png|Anchor‎]] button on the toolbar. The following '''Anchor Properties''' window will appear:

[[Image:CKEditor_anchor_properties.png|frame|center|Anchor Properties dialog window in CKEditor]]

In order to create an anchor, enter its name in the '''Anchor Name''' text box. Once you click '''OK''', the [[Image:CKEditor_anchor_marker.gif|Anchor marker‎]] icon will appear in the document.

Please note that the anchor may either lead to a point in a document (when nothing was selected while creating it), and look like in the example below:

[[Image:CKEditor_anchor_example1.png|frame|center|An anchor inserted into a document, with no text selection]]

Or if it leads to some content that was selected in the document, this selection will be displayed with a blue dotted border around, like in this example:

[[Image:CKEditor_anchor_example2.png|frame|center|An anchor inserted into a document with some text selected]]

You can now [[CKEditor 3.x/Users Guide/Rich Text/Links#Link Type: Link to anchor in the text|create a link to your anchor]] with the [[Image:CKEditor_link.png|Link‎]] button. Once it is ready, the link will take the reader of your document to the section marked with the anchor.

[[Image:CKEditor_anchor_link_example.png|frame|center|An anchor inserted into a document with a link pointing to it]]

== Removing an Anchor ==
Removing an anchor is just as easy as adding it. When the cursor is placed in an anchor, the '''Remove Anchor''' context menu command becomes available. Open the element's context menu by pressing the right mouse button or using the ''Menu/Application'' key on your keyboard, and choose the '''Remove Anchor''' command. This option removes the anchor from the document and leaves plain text.

[[Image:CKEditor_anchor_remove.png|frame|center|Remove Anchor context menu command available for an anchor]]

CKEditor 3.x/Howto/Support Development

2012-03-28T10:54:17Z

Sebstefanov:

{{#CUSTOMTITLE:How Do I Support the Development of CKEditor?}}
CKEditor is and has always been an Open Source product. We are proud to be a part of the [http://en.wikipedia.org/wiki/Open_source Open Source] movement and are happy that we can offer the result of long hours of our work '''completely for free''' to everyone who wants to use the editor.

We managed to [http://cksource.com/ build a company] based on the success of our free editor. We cannot accept donations for our work, so the cost of the editor development and enhancements is covered from the commercial licenses that are available.

If you appreciate our work and want to support the development of CKEditor, it will be most welcome. Here are a couple of things that you can do:
* Buy a [http://ckeditor.com/license commercial CKEditor license]. This will not only let you support the development of new editor features, but it will also give you access to a [http://ckeditor.com/support dedicated support channel] where CKEditor developers are available to help you solve any issues you might have.
* Report bugs or feature requests and submit patches on our [http://dev.ckeditor.com/ Development site].
* Help [[CKEditor_3.x/Developers_Guide/Localization|localize CKEditor]] into your native language and update existing localizations by joining us at the [https://www.transifex.net/projects/p/ckeditor/ CKEditor UI Translation Center].
* Create CKEditor plugins with new functionality and publish them on the [http://cksource.com/forums/viewforum.php?f=17 CKEditor Add-Ons Forum].
* Join the [http://cksource.com/forums/ Community Forum] and share your knowledge with your fellow CKEditor users and developers.

'''Thank you for your support and for helping us make CKEditor better every day!'''

CKEditor 3.x/Howto/Support Development

2012-03-28T10:52:16Z

Sebstefanov:

{{#CUSTOMTITLE:How Do I Support the Development of CKEditor?}}
CKEditor is and has always been an Open Source product. We are proud to be a part of the [http://en.wikipedia.org/wiki/Open_source Open Source] movement and are happy that we can offer the result of long hours of our work '''completely for free''' to everyone who wants to use the editor.

We managed to [http://cksource.com/ build a company] based on the success of our free editor. We cannot accept donations for our work, so the cost of the editor development and enhancements is covered from the commercial licenses that are available.

If you appreciate our work and want to support the development of CKEditor, it will be most welcome. Here are a couple of things that you can do:
* Buy a [http://ckeditor.com/license commercial CKEditor license]. This will not only let you support the development of new editor features, but it will also give you access to a [http://ckeditor.com/support dedicated support channel] where CKEditor developers are available to help you solve any issues you might have.
* Report bugs or feature requests and submit patches on our [http://dev.ckeditor.com/ Development site].
* Help [[CKEditor_3.x/Developers_Guide/Localization|localize CKEditor]] into your native language and update existing localizations by joining us at the [https://www.transifex.net/projects/p/ckeditor/ CKEditor UI Translation Center].
* Create CKEditor plugins with new functionality and publish them on the [http://cksource.com/forums/viewforum.php?f=17 CKEditor Add-Ons Forum].
* Join the [http://cksource.com/forums/ Community Forum] and share your knowledge with fellow CKEditor users and developers.

'''Thank you for your support and for helping us make CKEditor better every day!'''

CKEditor 3.x/Howto/Support Development

2012-03-28T10:49:57Z

Sebstefanov:

{{#CUSTOMTITLE:How Do I Support the Development of CKEditor?}}
CKEditor is and has always been an Open Source product. We are proud to be a part of the [http://en.wikipedia.org/wiki/Open_source Open Source] movement and are happy that we can offer the result of long hours of our work '''completely for free''' to everyone who wants to use the editor.

We managed to [http://cksource.com/ build a company] based on the success of our free editor. We cannot accept donations for our work, so the cost of the editor development and enhancements is covered from the commercial licenses that are available.

If you appreciate our work and want to support the development of CKEditor, it will be most welcome. Here are a couple of things that you can do:
* Buy a [http://ckeditor.com/license commercial CKEditor license]. This will not only let you support the development of new editor features, but will also give you access to a [http://ckeditor.com/support dedicated support channel] where CKEditor developers are available to help you solve any issues you might have.
* Report bugs or feature requests and submit patches on our [http://dev.ckeditor.com/ Development site].
* Help [[CKEditor_3.x/Developers_Guide/Localization|localize CKEditor]] into your native language and update existing localizations by joining us at the [https://www.transifex.net/projects/p/ckeditor/ CKEditor UI Translation Center].
* Create CKEditor plugins with new functionality and publish them on the [http://cksource.com/forums/viewforum.php?f=17 CKEditor Add-Ons Forum].
* Join the [http://cksource.com/forums/ Community Forum] and share your knowledge with fellow CKEditor users and developers.

'''Thank you for your support and for helping us make CKEditor better every day!'''

CKEditor 3.x/Howto/Support

2012-03-28T10:47:44Z

Sebstefanov: /* Community Forum */

{{#CUSTOMTITLE:How Do I Get Support?}}
If you are having trouble installing, configuring, or integrating CKEditor to your application, there are a few solutions that you can try.

== Documentation ==
First of all, CKEditor comes with really extensive [[CKEditor_3.x|documentation]] that you should read. You will find things like:
* The [[CKEditor_3.x/Users_Guide|User's Guide]] – describes all editor features from the user's perspective. It is the best resource if you want to learn about what CKEditor can offer to the users of your website and also to decide which features you want to use and which ones to disable if you do not need them.
* The [[CKEditor_3.x/Developers_Guide|Developer's Guide]] – a must-read for all developers who want to [[CKEditor_3.x/Developers_Guide/Installation|install]], [[CKEditor_3.x/Developers_Guide/Setting_Configurations|configure]], or [[CKEditor_3.x/Developers_Guide/Integration|integrate]] CKEditor into their websites.
* The [[CKEditor_3.x/Howto|CKEditor HOWTOs]] – a series of most frequently asked questions and short answers that should explain different aspects of the editor in a concise way and send you to some helpful resources that you were unable to find by yourself.
* The [[CKEditor_3.x/Tutorials|CKEditor Tutorials]] – a few step-by-step tutorials on creating CKEditor plugins.
* The [http://docs.cksource.com/ckeditor_api|CKEditor JavaScript API] – API documentation with all CKEditor [http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html configuration options], internal methods, events etc. Indispensible when you want to configure CKEditor to your specific needs, extend it, create plugins, etc.

== Support Channel ==
There are times and situations, however, when you are unable to get going by yourself. If this is a case, you will be happy to learn that [http://ckeditor.com/license all commercial CKEditor licenses] (CKSource Closed Distribution License – CDL) include [http://ckeditor.com/support professional assistance] from the CKEditor development team. The dedicated support channel is available for you and responses to your inquiries come in one business day, or even in the same day.

== Community Forum ==
Last but not least, for all users of the Open Source editor version, there is a [http://cksource.com/forums/ free community forum] where CKEditor developers and integrators can share their problems and solutions. CKEditor has grown as an Open Source product, thanks to the amazing community of developers and users. The community forum works in true Open Source fashion, so you are encouraged to not only ask questions, but also answer them and help fellow developers. It will be much appreciated!

CKEditor 3.x/Howto/Support

2012-03-28T10:42:23Z

Sebstefanov:

{{#CUSTOMTITLE:How Do I Get Support?}}
If you are having trouble installing, configuring, or integrating CKEditor to your application, there are a few solutions that you can try.

== Documentation ==
First of all, CKEditor comes with really extensive [[CKEditor_3.x|documentation]] that you should read. You will find things like:
* The [[CKEditor_3.x/Users_Guide|User's Guide]] – describes all editor features from the user's perspective. It is the best resource if you want to learn about what CKEditor can offer to the users of your website and also to decide which features you want to use and which ones to disable if you do not need them.
* The [[CKEditor_3.x/Developers_Guide|Developer's Guide]] – a must-read for all developers who want to [[CKEditor_3.x/Developers_Guide/Installation|install]], [[CKEditor_3.x/Developers_Guide/Setting_Configurations|configure]], or [[CKEditor_3.x/Developers_Guide/Integration|integrate]] CKEditor into their websites.
* The [[CKEditor_3.x/Howto|CKEditor HOWTOs]] – a series of most frequently asked questions and short answers that should explain different aspects of the editor in a concise way and send you to some helpful resources that you were unable to find by yourself.
* The [[CKEditor_3.x/Tutorials|CKEditor Tutorials]] – a few step-by-step tutorials on creating CKEditor plugins.
* The [http://docs.cksource.com/ckeditor_api|CKEditor JavaScript API] – API documentation with all CKEditor [http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html configuration options], internal methods, events etc. Indispensible when you want to configure CKEditor to your specific needs, extend it, create plugins, etc.

== Support Channel ==
There are times and situations, however, when you are unable to get going by yourself. If this is a case, you will be happy to learn that [http://ckeditor.com/license all commercial CKEditor licenses] (CKSource Closed Distribution License – CDL) include [http://ckeditor.com/support professional assistance] from the CKEditor development team. The dedicated support channel is available for you and responses to your inquiries come in one business day, or even in the same day.

== Community Forum ==
Last but not least, for all users of the Open Source editor version, there is a [http://cksource.com/forums/ free community forum] where CKEditor developers and integrators can share their problems and solutions. CKEditor has grown as an Open Source product, thanks to the amazing community of developers and users. The community forum works in a true Open Source fashion, so you are most encouraged to not only ask questions, but also answer them and help fellow developers. It will be much appreciated!

CKEditor 3.x/Howto/Support

2012-03-28T10:39:14Z

Sebstefanov:

{{#CUSTOMTITLE:How Do I Get Support?}}
If you are having trouble installing, configuring, or integrating CKEditor to your application, there are a few solutions that you can try.

== Documentation ==
First of all, CKEditor comes with really extensive [[CKEditor_3.x|documentation]] that you should read. You will find things like:
* The [[CKEditor_3.x/Users_Guide|User's Guide]] – describes all editor features from the user's perspective. It is the best resource if you want to learn about what CKEditor can offer to the users of your website and also to decide which features you want to use and which ones to disable if you do not need them.
* The [[CKEditor_3.x/Developers_Guide|Developer's Guide]] – a must read for all developers who want to [[CKEditor_3.x/Developers_Guide/Installation|install]], [[CKEditor_3.x/Developers_Guide/Setting_Configurations|configure]], or [[CKEditor_3.x/Developers_Guide/Integration|integrate]] CKEditor into their websites.
* The [[CKEditor_3.x/Howto|CKEditor HOWTOs]] – a series of most frequently asked questions and short answers that should explain different aspects of the editor in a concise way and send you to some helpful resources that you were unable to find by yourself.
* The [[CKEditor_3.x/Tutorials|CKEditor Tutorials]] – a few step-by-step tutorials on creating CKEditor plugins.
* The [http://docs.cksource.com/ckeditor_api|CKEditor JavaScript API] – API documentation with all CKEditor [http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html configuration options], internal methods, events etc. Indispensible when you want to configure CKEditor to your specific needs, extend it, create plugins etc.

== Support Channel ==
There are times and situations, however, when you are unable to get going by yourself. If this is a case, you will be happy to learn that [http://ckeditor.com/license all commercial CKEditor licenses] (CKSource Closed Distribution License – CDL) include [http://ckeditor.com/support professional assistance] from the CKEditor development team. The dedicated support channel is available for you and responses to your inquiries come in one business day, or even in the same day.

== Community Forum ==
Last but not least, for all users of the Open Source editor version, there is a [http://cksource.com/forums/ free community forum] where CKEditor developers and integrators can share their problems and solutions. CKEditor has grown as an Open Source product, thanks to the amazing community of developers and users. The community forum works in a true Open Source fashion, so you are most encouraged to not only ask questions, but also answer them and help fellow developers. It will be much appreciated!

CKEditor 3.x/Howto/Upgrade from FCKeditor

2012-03-28T07:45:10Z

Sebstefanov:

{{#CUSTOMTITLE:How do I Upgrade My FCKeditor to the Latest CKEditor Release?}}
First of all, ''an upgrade is the best thing you can do'', since FCKeditor is a retired product that is no longer supported. Its source code was frozen in 2010, no further updates are provided and as such, some issues may occur in modern browsers.

[http://ckeditor.com/ CKEditor] is a direct successor of FCKeditor, and a very mature and far superior product. It was written from scratch based on our long experience and expertise gained while working on FCKeditor and it contains lots of new features and bug fixes as compared to FCKeditor.

However, since CKEditor was a ''complete rewrite'' of FCKeditor, with lots of changes in how the internal stuff works, no automatic upgrade path is available. CKEditor installation and configuration process is pretty straightforward, so if you were able to manage your FCKeditor installation, you should have no trouble with CKEditor either.

The best option is to [http://ckeditor.com/download download the latest CKEditor version] and install it, starting anew. Play with the samples (available in the <code>_samples</code> folder), read the [[CKEditor_3.x/Developers_Guide|Developer's Guide]] for [[CKEditor_3.x/Developers_Guide/Installation|installation]] and [[CKEditor_3.x/Developers_Guide/Setting_Configurations|configuration]] instructions and try to integrate the editor with your application.

If you would like to try to mimic your FCKeditor configuration in CKEditor, [[CKEditor_3.x/Developers_Guide/FCKeditor_CKEditor_Configuration_Mapping|here is a matrix of the mappings]] between these two.

CKEditor 3.x/Developers Guide/Toolbar

2012-03-05T11:13:45Z

Sebstefanov:

{{#CUSTOMTITLE:CKEditor Toolbar}}
While CKEditor is a full-featured WYSIWYG editor, not all of its options may be needed in all cases. Because of this, toolbar customization is one of the most common and required tasks when dealing with CKEditor.

== Toolbar Definition ==
A toolbar definition is a JavaScript array that contains the elements to be displayed in all '''toolbar rows''' available in the editor.

The toolbar configuration can be defined in CKEditor using one of the following methods:
* The <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.toolbar toolbar]</code> setting.
* The <code>toolbar_''name''</code> setting, where the <code>''name''</code> element is the name used to identify the toolbar in the <code>toolbar</code> setting.

The following code snippet contains the default CKEditor toolbar setting.
<source language="js">
config.toolbar = 'Full';

config.toolbar_Full =
[
{ name: 'document', items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },
{ name: 'forms', items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton',
'HiddenField' ] },
'/',
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv',
'-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
{ name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },
'/',
{ name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] },
{ name: 'tools', items : [ 'Maximize', 'ShowBlocks','-','About' ] }
];

config.toolbar_Basic =
[
['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
];
</source>
Note that in the code above (just like in the default CKEditor configuration) two toolbar definitions have been defined. The first one is named '''Full''' and the second one is '''Basic'''. The toolbar was set to use the '''Full''' definition.

=== Toolbar Button Groups ===
Every toolbar definition is composed of a series of '''toolbar button groups'''. Each toolbar group has a label (name) and the listing of buttons that belong to the group, placed in square brackets (<code>[ ]</code>). The toolbar group items move together to new rows when the editor is resized.

The group label will be used by assisstive devices such as screen readers. It is added in the <code>name</code> attribute and is first looked up in the CKEditor language file (under the <code>editor.lang.toolbarGroups.''group_name''</code> entry). When its definition is found, the text value of this entry is used. If the <code>name</code> attribute value does not appear in the language file, it is taken as a literal toolbar group label and read aloud.

As visible in the code above, each toolbar button group is defined as a separate JavaScript array of strings. Every string stands for a single toolbar item to be used. Toolbar items are defined by plugins.

You can also include a separator in the toolbar group by including a dash (<code>"-"</code>) character in it.

=== Forcing Row Break ===
The '''Full''' definition contains numerous slash (<code>"/"</code>) characters that were placed between toolbar button groups. They can be used to force a break at the point where they were placed, rendering the next toolbar group in a new row. This placement will not be changed when CKEditor is resized.

== Toolbar Customization ==
A simple way to configure the toolbars of all CKEditor instances is to add a custom toolbar definition inside the <code>config.js</code> file, or even better — in a separate custom configuration file (see [[CKEditor 3.x/Developers Guide/Setting Configurations|Setting Configuration]]). The easiest way to do that is to copy the default '''Full''' toolbar definition, and strip it down to your needs.

For example, the following is a good recommended toolbar definition that can be placed in the <code>config.js</code> file:
<source language="javascript">
CKEDITOR.editorConfig = function( config )
{
config.toolbar = 'MyToolbar';

config.toolbar_MyToolbar =
[
{ name: 'document', items : [ 'NewPage','Preview' ] },
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','Scayt' ] },
{ name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'
,'Iframe' ] },
'/',
{ name: 'styles', items : [ 'Styles','Format' ] },
{ name: 'basicstyles', items : [ 'Bold','Italic','Strike','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote' ] },
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
{ name: 'tools', items : [ 'Maximize','-','About' ] }
];
};
</source>
Inside the configuration file you can create as many toolbar definitions as you need. Later, based on some criteria, you can choose the toolbar to use for each CKEditor instance. Each toolbar definition can be used as many times as required (or not used at all, for that matter). For example, with the following code, two editors are created on the page and each one is using a different toolbar:
<source language="javascript">
CKEDITOR.replace( 'editor1',
{
toolbar : 'MyToolbar'
});

CKEDITOR.replace( 'editor2',
{
toolbar : 'Basic'
});
</source>
It is also possible to set the toolbar definition in-page, at the same time when you create an editor instance. If this is the case, assign the toolbar setting directly to the editor instance, like in the example below:
<source language="javascript">
CKEDITOR.replace( 'editor1',
{
toolbar :
[
{ name: 'basicstyles', items : [ 'Bold','Italic' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList' ] },
{ name: 'tools', items : [ 'Maximize','-','About' ] }
]
});
</source>

<note>Please note that the toolbar definition was changed in '''CKEditor 3.6''', when a concept of toolbar button groups was introduced. This feature is WAI-ARIA compliant and important for accessibility support, so we recommend to upgrade custom definitions created for previous versions and follow the new standard described above.</note>

CKEditor 3.x/Developers Guide/Toolbar

2012-03-05T11:11:46Z

Sebstefanov:

{{#CUSTOMTITLE:CKEditor Toolbar}}
While CKEditor is a full-featured WYSIWYG editor, not all of its options may be needed in all cases. Because of this, toolbar customization is one of the most common and required tasks when dealing with CKEditor.

== Toolbar Definition ==
A toolbar definition is a JavaScript array that contains the elements to be displayed in all '''toolbar rows''' available in the editor.

The toolbar configuration can be defined in CKEditor using one of the following methods:
* The <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.toolbar toolbar]</code> setting.
* The <code>toolbar_''name''</code> setting, where the <code>''name''</code> element is the name used to identify the toolbar in the <code>toolbar</code> setting.

The following code snippet contains the default CKEditor toolbar setting.
<source language="js">
config.toolbar = 'Full';

config.toolbar_Full =
[
{ name: 'document', items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },
{ name: 'forms', items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton',

'HiddenField' ] },
'/',
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
{ name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },
'/',
{ name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] },
{ name: 'tools', items : [ 'Maximize', 'ShowBlocks','-','About' ] }
];

config.toolbar_Basic =
[
['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
];
</source>
Note that in the code above (just like in the default CKEditor configuration) two toolbar definitions have been defined. The first one is named '''Full''' and the second one is '''Basic'''. The toolbar was set to use the '''Full''' definition.

=== Toolbar Button Groups ===
Every toolbar definition is composed of a series of '''toolbar button groups'''. Each toolbar group has a label (name) and the listing of buttons that belong to the group, placed in square brackets (<code>[ ]</code>). The toolbar group items move together to new rows when the editor is resized.

The group label will be used by assisstive devices such as screen readers. It is added in the <code>name</code> attribute and is first looked up in the CKEditor language file (under the <code>editor.lang.toolbarGroups.''group_name''</code> entry). When its definition is found, the text value of this entry is used. If the <code>name</code> attribute value does not appear in the language file, it is taken as a literal toolbar group label and read aloud.

As visible in the code above, each toolbar button group is defined as a separate JavaScript array of strings. Every string stands for a single toolbar item to be used. Toolbar items are defined by plugins.

You can also include a separator in the toolbar group by including a dash (<code>"-"</code>) character in it.

=== Forcing Row Break ===
The '''Full''' definition contains numerous slash (<code>"/"</code>) characters that were placed between toolbar button groups. They can be used to force a break at the point where they were placed, rendering the next toolbar group in a new row. This placement will not be changed when CKEditor is resized.

== Toolbar Customization ==
A simple way to configure the toolbars of all CKEditor instances is to add a custom toolbar definition inside the <code>config.js</code> file, or even better — in a separate custom configuration file (see [[CKEditor 3.x/Developers Guide/Setting Configurations|Setting Configuration]]). The easiest way to do that is to copy the default '''Full''' toolbar definition, and strip it down to your needs.

For example, the following is a good recommended toolbar definition that can be placed in the <code>config.js</code> file:
<source language="javascript">
CKEDITOR.editorConfig = function( config )
{
config.toolbar = 'MyToolbar';

config.toolbar_MyToolbar =
[
{ name: 'document', items : [ 'NewPage','Preview' ] },
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','Scayt' ] },
{ name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'
,'Iframe' ] },
'/',
{ name: 'styles', items : [ 'Styles','Format' ] },
{ name: 'basicstyles', items : [ 'Bold','Italic','Strike','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote' ] },
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
{ name: 'tools', items : [ 'Maximize','-','About' ] }
];
};
</source>
Inside the configuration file you can create as many toolbar definitions as you need. Later, based on some criteria, you can choose the toolbar to use for each CKEditor instance. Each toolbar definition can be used as many times as required (or not used at all, for that matter). For example, with the following code, two editors are created on the page and each one is using a different toolbar:
<source language="javascript">
CKEDITOR.replace( 'editor1',
{
toolbar : 'MyToolbar'
});

CKEDITOR.replace( 'editor2',
{
toolbar : 'Basic'
});
</source>
It is also possible to set the toolbar definition in-page, at the same time when you create an editor instance. If this is the case, assign the toolbar setting directly to the editor instance, like in the example below:
<source language="javascript">
CKEDITOR.replace( 'editor1',
{
toolbar :
[
{ name: 'basicstyles', items : [ 'Bold','Italic' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList' ] },
{ name: 'tools', items : [ 'Maximize','-','About' ] }
]
});
</source>

<note>Please note that the toolbar definition was changed in '''CKEditor 3.6''', when a concept of toolbar button groups was introduced. This feature is WAI-ARIA compliant and important for accessibility support, so we recommend to upgrade custom definitions created for previous versions and follow the new standard described above.</note>