CKSource Docs - User contributions [en]

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

2010-09-13T11:45:51Z

Magdalena.stachnik:

Inserting Images in CKEditor is very simple task. To add picture user should press the [[Image:CKEditor_image.png‎]] button on the toolbar. A popup window called "Image Properties" appears. 

=== Image Info ===
[[Image:CKEditor_insert_images.png]]

The first bookmark refers to the "Image Info" 

* '''URL''': defines the URL address of the image. User may also use the "Browse Sever" in order to browse the files.
* '''Alternative Text''': gives the description of the image if user prefers it to be different from the image name.
* '''Width''': specifies image’s width. 
* '''Height''': specifies image’s height.

User may lock the image proportions by pressing [[Image:CKEditor_lock.png]] or may return to the original image size by pressing [[Image:CKEditor_return.png]].

* '''Border''': specifies the size of the border you want to place around the image.
* '''HSpace''': defines the size of the  horizontal gap.
* '''VSpace''': defines the size of the vertical gap.
* '''Align''': specifies the alignment of the image. User may choose between Left or Right.

In a "Preview" window user may view how the window looks with the added image.

Pressing "'''OK'''" inserts the image with the specified properties.

=== Link ===

The second bookmark relates to "Link": 

[[Image:CKEditor_images_link.png]]

* '''URL''': defines the URL address of the image. You may also use the "Browse Sever" in order to browse the files. 
* '''Target''': defines the target of the image (for advanced users). User may choose from New Window ( _blank ), Topmost Window ( _top ), Same Window ( _self ) or Parent Window ( _parent ).

=== Upload ===

Notice that this bookmark may not be available if CKEditor is not connected to the file manager, such as CKFinder.

The third bookmark is the "Upload" section:

[[Image:CKEditor_images_upload.png]]

* '''Upload''': specifies the location of the image file on your local hard drive. User may also use "Browse" instead of typing the location manually.

Pressing "'''Send it to the Server'''" sends the image to the server.

=== Advanced ===

This bookmark is only for advanced users:

[[Image:CKEditor_images_advanced.png]]

* '''Id''': specifies image's ID.
* '''Language Direction''': sets the language direction from left to right ( LTR ) or from right to left ( RTL ).
* '''Language Code''': specifies the language code e.g. en, pt, pl.
* '''Long Description URL''': specifies the description of the page. 
* '''Stylesheet Classes''': specifies the name of the CSS class.
* '''Advisory Title''': specifies the description of the target object.
* '''Style''': specifies the style.

CKEditor 3.x/Users Guide/Quick Reference

2010-09-13T11:40:32Z

Magdalena.stachnik:

This section describes all functions available in the default CKEditor’s toolbar ([[File:CKEditor_Toolbar.pdf|link=http://docs.cksource.com/images/0/04/CKEditor_Toolbar.pdf|download as pdf]]).

== Common Toolbar Functions ==

{| cellspacing="0" cellpadding="3" border="1"
|-
| nowrap="nowrap" align="center" | '''Toolbar Element''' 
| '''Function'''
|-
| align="center" | [[Image:CKEditor_source.png]] 
| View or edit the document source code (for advanced users). See [[CKEditor 3.x/Users Guide/Source Editor|Source Editor]]. 
|-
| align="center" | [[Image:CKEditor_save.gif]]
| Saves the page you were editing.
|-
| align="center" | [[Image:CKEditor_new.png]]
| Removes all contentes, creating a new blank page.
|-
| align="center" | [[Image:CKEditor_preview.png]] 
| Preview what the HTML page will look like for users. 
|-
| align="center" | [[Image:CKEditor_templates.png]] 
| Select a layout template. See [[CKEditor_3.x/Users Guide/Common Tasks/Templates|Templates]] 
|-
| align="center" | [[Image:CKEditor_cut.png]] 
| Cut the highlighted text to the clipboard. See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_copy.png]] 
| Copy the highlighted text to the clipboard. See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_paste.png]][[Image:CKEditor_paste_text.png]] 
| Paste the data copied to the clipboard (with or without formatting). See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_paste_word.png]] 
| Paste content copied from Microsoft Word or similar applications. See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_print.gif]] 
| Print the current document. See [[CKEditor_3.x/Users Guide/Other Tasks/Printing|Printing]]. 
|-
| align="center" | [[Image:CKEditor_checkspell.png]][[Image:CKEditor_SCAYT.png]] 
| Spell check the text in the document or spell check the text as you type. See [[CKEditor_3.x/Users Guide/Other Tasks/Spell Checking|Spell Checking]]. 

|-
| align="center" | [[Image:CKEditor_undo.png]][[Image:CKEditor_redo.png]] 
| Undo or redo the most recent action taken. See [[CKEditor_3.x/Users Guide/Other Tasks/Undo and Redo|Undo and Redo]]. 
|-
| align="center" | [[Image:CKEditor_find.png]] 
| Find a word or phrase within the document. See [[CKEditor_3.x/Users Guide/Other Tasks/Find and Replace|Find and Replace]]. 
|-
| align="center" | [[Image:CKEditor_find_replace..png]] 
| Find and replace a word or phrase within the document. See [[CKEditor_3.x/Users Guide/Other Tasks/Find and Replace|Find and Replace]]. 
|-
| align="center" | [[Image:CKEditor_select_all.png]] 
| Select the entire content in the document. 
|-
| align="center" | [[Image:CKEditor_remove_format.png]] 
| Remove the formatting from the highlighted text. 
|-
| align="center" | [[Image:CKEditor_bold.png]][[Image:CKEditor_italic.png]][[Image:CKEditor_underline.png]][[Image:CKEditor_strikethough.png]] 
| Applies '''bold''', ''italic'', underscore or <strike>strikethrough</strike> formatting to the highlighted text.See [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_subscript.png]][[Image:CKEditor_superscript.png]] 
| Superscript or subscript the highlighted text.See Superscript and subscript in [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_insertorderlist.png]][[Image:CKEditor_insertunorderedlist.png]]
| Creates numbered or bulleted lists. See [[CKEditor_3.x/Users Guide/Common Tasks/Creating Lists|Creating Lists]]. 
|-
| align="center" | [[Image:CKEditor_outdent.png]][[Image:CKEditor_indent.png]]
| Increase or decrease the text indentation. 
|-
| align="center" | [[Image:CKEditor_blokquote.png]] 
| Format a block of text to identify quotations (text provenient from other sources). 
|-
| align="center" | [[Image:CKEditor_div_container.png]] 
| Create a new div container in document source. 
|-
| align="center" | [[Image:CKEditor_align_left.png]][[Image:CKEditor_align_center.png]][[Image:CKEditor_align_right.png]][[Image:CKEditor_justify.png‎]]
| Sets the text alignment (left, centered, right or justified). See Text layout and format in [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_text_direction_left.png]][[Image:CKEditor_text_direction_right.png]]
| Sets the text direction from left to right or from right to left. 
|-
| align="center" | [[Image:CKEditor_link.png]][[Image:CKEditor_unlink.png]]
| Converts or removes the text in hyperlinks. It may also by used to manage file uploads and links to files on the web server. See [[CKEditor_3.x/Users Guide/Common Tasks/Links, E-Mails and Anchors|Links, E-Mails and Anchors]]. 

|-
| align="center" | [[Image:CKEditor_anchors.png]]
| Inserts or modifies a link anchor. See [[CKEditor_3.x/Users Guide/Common Tasks/Links, E-Mails and Anchors|Links, E-Mails and Anchors]]
|-
| align="center" | [[Image:CKEditor_image.png]]
| Inserts images into the document. See [[CKEditor_3.x/Users Guide/Common Tasks/Inserting Images|Inserting Images]]. 
|-
| align="center" | [[Image:CKEditor_flash.png]]
| Inserts a Adobe Flash element into the page. See [[CKEditor_3.x/Users Guide/Common Tasks/Inserting Flash|Inserting Flash]]
|-
| align="center" | [[Image:CKEditor_table.png]]
| Creates a table with the defined number of columns and rows. See [[CKEditor_3.x/Users Guide/Common Tasks/Tables|Tables]]. 
|-
| align="center" | [[Image:CKEditor_horizontal_line.png]]
| Inserts a divider line (horizontal rule). 
|-
| align="center" | [[Image:CKEditor_smiley.png]]
| Inserts an emoticons image (smiley faces, email icon, lightbulb, etc.). 
|-
| align="center" | [[Image:CKEditor_specialchar.png]]
| Inserts special characters. 
|-
| align="center" | [[Image:CKEditor_pagebreak.png]]
| Inserts a printing page break. Only impacts printed version. 
|-
| align="center" | [[Image:CKEditor_styles.png]]
| Styles & formatting determine the appearance and semantic value of your document. You may use the drop down boxes to apply styles, set the font, its size, etc. To remove the applied style select the style name again. See [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_textcolor.png]]
| Changes the color of the text. See[[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_bgcolor.png]]
| Changes the background color of the text. See[[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_maximize.png]]
| Maximizes the editor size inside the browser.
|-
| align="center" | [[Image:CKEditor_show blocks.png]]
| Shows the block elements boundaries in the text.
|-
| align="center" | [[Image:CKEditor_about.png]]
| Shows information about the CKEditor.
|}

== Form Functions ==

{| cellspacing="0" cellpadding="3" border="1"
|-
| nowrap="nowrap" align="center" | '''Toolbar Element''' 
| '''Function'''
|-
| align="center" | [[Image:CKEditor_form.png]]
| Creates a new form block into the page. 
|-
| align="center" | [[Image:CKEditor_checkbox.png]]
| Inserts a checkbox to the page.
|-
| align="center" | [[Image:CKEditor_radiobutton.png]]
| Inserts a radio button to the page.
|-
| align="center" | [[Image:CKEditor_textfield.png]] 
| Inserts a text field into the page. 
|-
| align="center" | [[Image:CKEditor_textarea.png]]
| Inserts a multi-line text area into the page.
|-
| align="center" | [[Image:CKEditor_selection_field.png]] 
| Inserts a selection field into the page. 
|-
| align="center" | [[Image:CKEditor_button.png]] 
| Inserts a form button into the page. 
|-
| align="center" | [[Image:CKEditor_button_image.png]]
| Inserts an image into the page, which behaves much like form button used to submit forms. Do not use it to insert plain images into the document. 
|-
| align="center" | [[Image:CKEditor_hidden.png]] 
| Inserts a hidden field into the page. 
|}

CKEditor 3.x/Users Guide/Quick Reference

2010-09-13T11:39:44Z

Magdalena.stachnik:

This section describes all functions available in the default CKEditor’s toolbar ([[File:CKEditor_Toolbar.pdf|download as pdf|link=http://docs.cksource.com/images/0/04/CKEditor_Toolbar.pdf]]).

== Common Toolbar Functions ==

{| cellspacing="0" cellpadding="3" border="1"
|-
| nowrap="nowrap" align="center" | '''Toolbar Element''' 
| '''Function'''
|-
| align="center" | [[Image:CKEditor_source.png]] 
| View or edit the document source code (for advanced users). See [[CKEditor 3.x/Users Guide/Source Editor|Source Editor]]. 
|-
| align="center" | [[Image:CKEditor_save.gif]]
| Saves the page you were editing.
|-
| align="center" | [[Image:CKEditor_new.png]]
| Removes all contentes, creating a new blank page.
|-
| align="center" | [[Image:CKEditor_preview.png]] 
| Preview what the HTML page will look like for users. 
|-
| align="center" | [[Image:CKEditor_templates.png]] 
| Select a layout template. See [[CKEditor_3.x/Users Guide/Common Tasks/Templates|Templates]] 
|-
| align="center" | [[Image:CKEditor_cut.png]] 
| Cut the highlighted text to the clipboard. See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_copy.png]] 
| Copy the highlighted text to the clipboard. See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_paste.png]][[Image:CKEditor_paste_text.png]] 
| Paste the data copied to the clipboard (with or without formatting). See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_paste_word.png]] 
| Paste content copied from Microsoft Word or similar applications. See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_print.gif]] 
| Print the current document. See [[CKEditor_3.x/Users Guide/Other Tasks/Printing|Printing]]. 
|-
| align="center" | [[Image:CKEditor_checkspell.png]][[Image:CKEditor_SCAYT.png]] 
| Spell check the text in the document or spell check the text as you type. See [[CKEditor_3.x/Users Guide/Other Tasks/Spell Checking|Spell Checking]]. 

|-
| align="center" | [[Image:CKEditor_undo.png]][[Image:CKEditor_redo.png]] 
| Undo or redo the most recent action taken. See [[CKEditor_3.x/Users Guide/Other Tasks/Undo and Redo|Undo and Redo]]. 
|-
| align="center" | [[Image:CKEditor_find.png]] 
| Find a word or phrase within the document. See [[CKEditor_3.x/Users Guide/Other Tasks/Find and Replace|Find and Replace]]. 
|-
| align="center" | [[Image:CKEditor_find_replace..png]] 
| Find and replace a word or phrase within the document. See [[CKEditor_3.x/Users Guide/Other Tasks/Find and Replace|Find and Replace]]. 
|-
| align="center" | [[Image:CKEditor_select_all.png]] 
| Select the entire content in the document. 
|-
| align="center" | [[Image:CKEditor_remove_format.png]] 
| Remove the formatting from the highlighted text. 
|-
| align="center" | [[Image:CKEditor_bold.png]][[Image:CKEditor_italic.png]][[Image:CKEditor_underline.png]][[Image:CKEditor_strikethough.png]] 
| Applies '''bold''', ''italic'', underscore or <strike>strikethrough</strike> formatting to the highlighted text.See [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_subscript.png]][[Image:CKEditor_superscript.png]] 
| Superscript or subscript the highlighted text.See Superscript and subscript in [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_insertorderlist.png]][[Image:CKEditor_insertunorderedlist.png]]
| Creates numbered or bulleted lists. See [[CKEditor_3.x/Users Guide/Common Tasks/Creating Lists|Creating Lists]]. 
|-
| align="center" | [[Image:CKEditor_outdent.png]][[Image:CKEditor_indent.png]]
| Increase or decrease the text indentation. 
|-
| align="center" | [[Image:CKEditor_blokquote.png]] 
| Format a block of text to identify quotations (text provenient from other sources). 
|-
| align="center" | [[Image:CKEditor_div_container.png]] 
| Create a new div container in document source. 
|-
| align="center" | [[Image:CKEditor_align_left.png]][[Image:CKEditor_align_center.png]][[Image:CKEditor_align_right.png]][[Image:CKEditor_justify.png‎]]
| Sets the text alignment (left, centered, right or justified). See Text layout and format in [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_text_direction_left.png]][[Image:CKEditor_text_direction_right.png]]
| Sets the text direction from left to right or from right to left. 
|-
| align="center" | [[Image:CKEditor_link.png]][[Image:CKEditor_unlink.png]]
| Converts or removes the text in hyperlinks. It may also by used to manage file uploads and links to files on the web server. See [[CKEditor_3.x/Users Guide/Common Tasks/Links, E-Mails and Anchors|Links, E-Mails and Anchors]]. 

|-
| align="center" | [[Image:CKEditor_anchors.png]]
| Inserts or modifies a link anchor. See [[CKEditor_3.x/Users Guide/Common Tasks/Links, E-Mails and Anchors|Links, E-Mails and Anchors]]
|-
| align="center" | [[Image:CKEditor_image.png]]
| Inserts images into the document. See [[CKEditor_3.x/Users Guide/Common Tasks/Inserting Images|Inserting Images]]. 
|-
| align="center" | [[Image:CKEditor_flash.png]]
| Inserts a Adobe Flash element into the page. See [[CKEditor_3.x/Users Guide/Common Tasks/Inserting Flash|Inserting Flash]]
|-
| align="center" | [[Image:CKEditor_table.png]]
| Creates a table with the defined number of columns and rows. See [[CKEditor_3.x/Users Guide/Common Tasks/Tables|Tables]]. 
|-
| align="center" | [[Image:CKEditor_horizontal_line.png]]
| Inserts a divider line (horizontal rule). 
|-
| align="center" | [[Image:CKEditor_smiley.png]]
| Inserts an emoticons image (smiley faces, email icon, lightbulb, etc.). 
|-
| align="center" | [[Image:CKEditor_specialchar.png]]
| Inserts special characters. 
|-
| align="center" | [[Image:CKEditor_pagebreak.png]]
| Inserts a printing page break. Only impacts printed version. 
|-
| align="center" | [[Image:CKEditor_styles.png]]
| Styles & formatting determine the appearance and semantic value of your document. You may use the drop down boxes to apply styles, set the font, its size, etc. To remove the applied style select the style name again. See [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_textcolor.png]]
| Changes the color of the text. See[[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_bgcolor.png]]
| Changes the background color of the text. See[[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_maximize.png]]
| Maximizes the editor size inside the browser.
|-
| align="center" | [[Image:CKEditor_show blocks.png]]
| Shows the block elements boundaries in the text.
|-
| align="center" | [[Image:CKEditor_about.png]]
| Shows information about the CKEditor.
|}

== Form Functions ==

{| cellspacing="0" cellpadding="3" border="1"
|-
| nowrap="nowrap" align="center" | '''Toolbar Element''' 
| '''Function'''
|-
| align="center" | [[Image:CKEditor_form.png]]
| Creates a new form block into the page. 
|-
| align="center" | [[Image:CKEditor_checkbox.png]]
| Inserts a checkbox to the page.
|-
| align="center" | [[Image:CKEditor_radiobutton.png]]
| Inserts a radio button to the page.
|-
| align="center" | [[Image:CKEditor_textfield.png]] 
| Inserts a text field into the page. 
|-
| align="center" | [[Image:CKEditor_textarea.png]]
| Inserts a multi-line text area into the page.
|-
| align="center" | [[Image:CKEditor_selection_field.png]] 
| Inserts a selection field into the page. 
|-
| align="center" | [[Image:CKEditor_button.png]] 
| Inserts a form button into the page. 
|-
| align="center" | [[Image:CKEditor_button_image.png]]
| Inserts an image into the page, which behaves much like form button used to submit forms. Do not use it to insert plain images into the document. 
|-
| align="center" | [[Image:CKEditor_hidden.png]] 
| Inserts a hidden field into the page. 
|}

CKEditor 3.x/Users Guide/Quick Reference

2010-09-13T11:38:35Z

Magdalena.stachnik:

This section describes all functions available in the default CKEditor’s toolbar ([[download as pdf|link=http://docs.cksource.com/images/0/04/CKEditor_Toolbar.pdf]]).

== Common Toolbar Functions ==

{| cellspacing="0" cellpadding="3" border="1"
|-
| nowrap="nowrap" align="center" | '''Toolbar Element''' 
| '''Function'''
|-
| align="center" | [[Image:CKEditor_source.png]] 
| View or edit the document source code (for advanced users). See [[CKEditor 3.x/Users Guide/Source Editor|Source Editor]]. 
|-
| align="center" | [[Image:CKEditor_save.gif]]
| Saves the page you were editing.
|-
| align="center" | [[Image:CKEditor_new.png]]
| Removes all contentes, creating a new blank page.
|-
| align="center" | [[Image:CKEditor_preview.png]] 
| Preview what the HTML page will look like for users. 
|-
| align="center" | [[Image:CKEditor_templates.png]] 
| Select a layout template. See [[CKEditor_3.x/Users Guide/Common Tasks/Templates|Templates]] 
|-
| align="center" | [[Image:CKEditor_cut.png]] 
| Cut the highlighted text to the clipboard. See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_copy.png]] 
| Copy the highlighted text to the clipboard. See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_paste.png]][[Image:CKEditor_paste_text.png]] 
| Paste the data copied to the clipboard (with or without formatting). See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_paste_word.png]] 
| Paste content copied from Microsoft Word or similar applications. See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_print.gif]] 
| Print the current document. See [[CKEditor_3.x/Users Guide/Other Tasks/Printing|Printing]]. 
|-
| align="center" | [[Image:CKEditor_checkspell.png]][[Image:CKEditor_SCAYT.png]] 
| Spell check the text in the document or spell check the text as you type. See [[CKEditor_3.x/Users Guide/Other Tasks/Spell Checking|Spell Checking]]. 

|-
| align="center" | [[Image:CKEditor_undo.png]][[Image:CKEditor_redo.png]] 
| Undo or redo the most recent action taken. See [[CKEditor_3.x/Users Guide/Other Tasks/Undo and Redo|Undo and Redo]]. 
|-
| align="center" | [[Image:CKEditor_find.png]] 
| Find a word or phrase within the document. See [[CKEditor_3.x/Users Guide/Other Tasks/Find and Replace|Find and Replace]]. 
|-
| align="center" | [[Image:CKEditor_find_replace..png]] 
| Find and replace a word or phrase within the document. See [[CKEditor_3.x/Users Guide/Other Tasks/Find and Replace|Find and Replace]]. 
|-
| align="center" | [[Image:CKEditor_select_all.png]] 
| Select the entire content in the document. 
|-
| align="center" | [[Image:CKEditor_remove_format.png]] 
| Remove the formatting from the highlighted text. 
|-
| align="center" | [[Image:CKEditor_bold.png]][[Image:CKEditor_italic.png]][[Image:CKEditor_underline.png]][[Image:CKEditor_strikethough.png]] 
| Applies '''bold''', ''italic'', underscore or <strike>strikethrough</strike> formatting to the highlighted text.See [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_subscript.png]][[Image:CKEditor_superscript.png]] 
| Superscript or subscript the highlighted text.See Superscript and subscript in [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_insertorderlist.png]][[Image:CKEditor_insertunorderedlist.png]]
| Creates numbered or bulleted lists. See [[CKEditor_3.x/Users Guide/Common Tasks/Creating Lists|Creating Lists]]. 
|-
| align="center" | [[Image:CKEditor_outdent.png]][[Image:CKEditor_indent.png]]
| Increase or decrease the text indentation. 
|-
| align="center" | [[Image:CKEditor_blokquote.png]] 
| Format a block of text to identify quotations (text provenient from other sources). 
|-
| align="center" | [[Image:CKEditor_div_container.png]] 
| Create a new div container in document source. 
|-
| align="center" | [[Image:CKEditor_align_left.png]][[Image:CKEditor_align_center.png]][[Image:CKEditor_align_right.png]][[Image:CKEditor_justify.png‎]]
| Sets the text alignment (left, centered, right or justified). See Text layout and format in [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_text_direction_left.png]][[Image:CKEditor_text_direction_right.png]]
| Sets the text direction from left to right or from right to left. 
|-
| align="center" | [[Image:CKEditor_link.png]][[Image:CKEditor_unlink.png]]
| Converts or removes the text in hyperlinks. It may also by used to manage file uploads and links to files on the web server. See [[CKEditor_3.x/Users Guide/Common Tasks/Links, E-Mails and Anchors|Links, E-Mails and Anchors]]. 

|-
| align="center" | [[Image:CKEditor_anchors.png]]
| Inserts or modifies a link anchor. See [[CKEditor_3.x/Users Guide/Common Tasks/Links, E-Mails and Anchors|Links, E-Mails and Anchors]]
|-
| align="center" | [[Image:CKEditor_image.png]]
| Inserts images into the document. See [[CKEditor_3.x/Users Guide/Common Tasks/Inserting Images|Inserting Images]]. 
|-
| align="center" | [[Image:CKEditor_flash.png]]
| Inserts a Adobe Flash element into the page. See [[CKEditor_3.x/Users Guide/Common Tasks/Inserting Flash|Inserting Flash]]
|-
| align="center" | [[Image:CKEditor_table.png]]
| Creates a table with the defined number of columns and rows. See [[CKEditor_3.x/Users Guide/Common Tasks/Tables|Tables]]. 
|-
| align="center" | [[Image:CKEditor_horizontal_line.png]]
| Inserts a divider line (horizontal rule). 
|-
| align="center" | [[Image:CKEditor_smiley.png]]
| Inserts an emoticons image (smiley faces, email icon, lightbulb, etc.). 
|-
| align="center" | [[Image:CKEditor_specialchar.png]]
| Inserts special characters. 
|-
| align="center" | [[Image:CKEditor_pagebreak.png]]
| Inserts a printing page break. Only impacts printed version. 
|-
| align="center" | [[Image:CKEditor_styles.png]]
| Styles & formatting determine the appearance and semantic value of your document. You may use the drop down boxes to apply styles, set the font, its size, etc. To remove the applied style select the style name again. See [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_textcolor.png]]
| Changes the color of the text. See[[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_bgcolor.png]]
| Changes the background color of the text. See[[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_maximize.png]]
| Maximizes the editor size inside the browser.
|-
| align="center" | [[Image:CKEditor_show blocks.png]]
| Shows the block elements boundaries in the text.
|-
| align="center" | [[Image:CKEditor_about.png]]
| Shows information about the CKEditor.
|}

== Form Functions ==

{| cellspacing="0" cellpadding="3" border="1"
|-
| nowrap="nowrap" align="center" | '''Toolbar Element''' 
| '''Function'''
|-
| align="center" | [[Image:CKEditor_form.png]]
| Creates a new form block into the page. 
|-
| align="center" | [[Image:CKEditor_checkbox.png]]
| Inserts a checkbox to the page.
|-
| align="center" | [[Image:CKEditor_radiobutton.png]]
| Inserts a radio button to the page.
|-
| align="center" | [[Image:CKEditor_textfield.png]] 
| Inserts a text field into the page. 
|-
| align="center" | [[Image:CKEditor_textarea.png]]
| Inserts a multi-line text area into the page.
|-
| align="center" | [[Image:CKEditor_selection_field.png]] 
| Inserts a selection field into the page. 
|-
| align="center" | [[Image:CKEditor_button.png]] 
| Inserts a form button into the page. 
|-
| align="center" | [[Image:CKEditor_button_image.png]]
| Inserts an image into the page, which behaves much like form button used to submit forms. Do not use it to insert plain images into the document. 
|-
| align="center" | [[Image:CKEditor_hidden.png]] 
| Inserts a hidden field into the page. 
|}

CKEditor 3.x/Users Guide/Quick Reference

2010-09-13T11:38:14Z

Magdalena.stachnik:

This section describes all functions available in the default CKEditor’s toolbar ([[File:CKEditor_Toolbar.pdf‎|download as pdf|link=http://docs.cksource.com/images/0/04/CKEditor_Toolbar.pdf]]).

== Common Toolbar Functions ==

{| cellspacing="0" cellpadding="3" border="1"
|-
| nowrap="nowrap" align="center" | '''Toolbar Element''' 
| '''Function'''
|-
| align="center" | [[Image:CKEditor_source.png]] 
| View or edit the document source code (for advanced users). See [[CKEditor 3.x/Users Guide/Source Editor|Source Editor]]. 
|-
| align="center" | [[Image:CKEditor_save.gif]]
| Saves the page you were editing.
|-
| align="center" | [[Image:CKEditor_new.png]]
| Removes all contentes, creating a new blank page.
|-
| align="center" | [[Image:CKEditor_preview.png]] 
| Preview what the HTML page will look like for users. 
|-
| align="center" | [[Image:CKEditor_templates.png]] 
| Select a layout template. See [[CKEditor_3.x/Users Guide/Common Tasks/Templates|Templates]] 
|-
| align="center" | [[Image:CKEditor_cut.png]] 
| Cut the highlighted text to the clipboard. See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_copy.png]] 
| Copy the highlighted text to the clipboard. See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_paste.png]][[Image:CKEditor_paste_text.png]] 
| Paste the data copied to the clipboard (with or without formatting). See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_paste_word.png]] 
| Paste content copied from Microsoft Word or similar applications. See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_print.gif]] 
| Print the current document. See [[CKEditor_3.x/Users Guide/Other Tasks/Printing|Printing]]. 
|-
| align="center" | [[Image:CKEditor_checkspell.png]][[Image:CKEditor_SCAYT.png]] 
| Spell check the text in the document or spell check the text as you type. See [[CKEditor_3.x/Users Guide/Other Tasks/Spell Checking|Spell Checking]]. 

|-
| align="center" | [[Image:CKEditor_undo.png]][[Image:CKEditor_redo.png]] 
| Undo or redo the most recent action taken. See [[CKEditor_3.x/Users Guide/Other Tasks/Undo and Redo|Undo and Redo]]. 
|-
| align="center" | [[Image:CKEditor_find.png]] 
| Find a word or phrase within the document. See [[CKEditor_3.x/Users Guide/Other Tasks/Find and Replace|Find and Replace]]. 
|-
| align="center" | [[Image:CKEditor_find_replace..png]] 
| Find and replace a word or phrase within the document. See [[CKEditor_3.x/Users Guide/Other Tasks/Find and Replace|Find and Replace]]. 
|-
| align="center" | [[Image:CKEditor_select_all.png]] 
| Select the entire content in the document. 
|-
| align="center" | [[Image:CKEditor_remove_format.png]] 
| Remove the formatting from the highlighted text. 
|-
| align="center" | [[Image:CKEditor_bold.png]][[Image:CKEditor_italic.png]][[Image:CKEditor_underline.png]][[Image:CKEditor_strikethough.png]] 
| Applies '''bold''', ''italic'', underscore or <strike>strikethrough</strike> formatting to the highlighted text.See [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_subscript.png]][[Image:CKEditor_superscript.png]] 
| Superscript or subscript the highlighted text.See Superscript and subscript in [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_insertorderlist.png]][[Image:CKEditor_insertunorderedlist.png]]
| Creates numbered or bulleted lists. See [[CKEditor_3.x/Users Guide/Common Tasks/Creating Lists|Creating Lists]]. 
|-
| align="center" | [[Image:CKEditor_outdent.png]][[Image:CKEditor_indent.png]]
| Increase or decrease the text indentation. 
|-
| align="center" | [[Image:CKEditor_blokquote.png]] 
| Format a block of text to identify quotations (text provenient from other sources). 
|-
| align="center" | [[Image:CKEditor_div_container.png]] 
| Create a new div container in document source. 
|-
| align="center" | [[Image:CKEditor_align_left.png]][[Image:CKEditor_align_center.png]][[Image:CKEditor_align_right.png]][[Image:CKEditor_justify.png‎]]
| Sets the text alignment (left, centered, right or justified). See Text layout and format in [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_text_direction_left.png]][[Image:CKEditor_text_direction_right.png]]
| Sets the text direction from left to right or from right to left. 
|-
| align="center" | [[Image:CKEditor_link.png]][[Image:CKEditor_unlink.png]]
| Converts or removes the text in hyperlinks. It may also by used to manage file uploads and links to files on the web server. See [[CKEditor_3.x/Users Guide/Common Tasks/Links, E-Mails and Anchors|Links, E-Mails and Anchors]]. 

|-
| align="center" | [[Image:CKEditor_anchors.png]]
| Inserts or modifies a link anchor. See [[CKEditor_3.x/Users Guide/Common Tasks/Links, E-Mails and Anchors|Links, E-Mails and Anchors]]
|-
| align="center" | [[Image:CKEditor_image.png]]
| Inserts images into the document. See [[CKEditor_3.x/Users Guide/Common Tasks/Inserting Images|Inserting Images]]. 
|-
| align="center" | [[Image:CKEditor_flash.png]]
| Inserts a Adobe Flash element into the page. See [[CKEditor_3.x/Users Guide/Common Tasks/Inserting Flash|Inserting Flash]]
|-
| align="center" | [[Image:CKEditor_table.png]]
| Creates a table with the defined number of columns and rows. See [[CKEditor_3.x/Users Guide/Common Tasks/Tables|Tables]]. 
|-
| align="center" | [[Image:CKEditor_horizontal_line.png]]
| Inserts a divider line (horizontal rule). 
|-
| align="center" | [[Image:CKEditor_smiley.png]]
| Inserts an emoticons image (smiley faces, email icon, lightbulb, etc.). 
|-
| align="center" | [[Image:CKEditor_specialchar.png]]
| Inserts special characters. 
|-
| align="center" | [[Image:CKEditor_pagebreak.png]]
| Inserts a printing page break. Only impacts printed version. 
|-
| align="center" | [[Image:CKEditor_styles.png]]
| Styles & formatting determine the appearance and semantic value of your document. You may use the drop down boxes to apply styles, set the font, its size, etc. To remove the applied style select the style name again. See [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_textcolor.png]]
| Changes the color of the text. See[[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_bgcolor.png]]
| Changes the background color of the text. See[[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_maximize.png]]
| Maximizes the editor size inside the browser.
|-
| align="center" | [[Image:CKEditor_show blocks.png]]
| Shows the block elements boundaries in the text.
|-
| align="center" | [[Image:CKEditor_about.png]]
| Shows information about the CKEditor.
|}

== Form Functions ==

{| cellspacing="0" cellpadding="3" border="1"
|-
| nowrap="nowrap" align="center" | '''Toolbar Element''' 
| '''Function'''
|-
| align="center" | [[Image:CKEditor_form.png]]
| Creates a new form block into the page. 
|-
| align="center" | [[Image:CKEditor_checkbox.png]]
| Inserts a checkbox to the page.
|-
| align="center" | [[Image:CKEditor_radiobutton.png]]
| Inserts a radio button to the page.
|-
| align="center" | [[Image:CKEditor_textfield.png]] 
| Inserts a text field into the page. 
|-
| align="center" | [[Image:CKEditor_textarea.png]]
| Inserts a multi-line text area into the page.
|-
| align="center" | [[Image:CKEditor_selection_field.png]] 
| Inserts a selection field into the page. 
|-
| align="center" | [[Image:CKEditor_button.png]] 
| Inserts a form button into the page. 
|-
| align="center" | [[Image:CKEditor_button_image.png]]
| Inserts an image into the page, which behaves much like form button used to submit forms. Do not use it to insert plain images into the document. 
|-
| align="center" | [[Image:CKEditor_hidden.png]] 
| Inserts a hidden field into the page. 
|}

CKEditor 3.x/Users Guide/Quick Reference

2010-09-13T11:37:53Z

Magdalena.stachnik:

This section describes all functions available in the default CKEditor’s toolbar ([[File:CKEditor_Toolbar.pdf‎|download as pdf]]|link=http://docs.cksource.com/images/0/04/CKEditor_Toolbar.pdf).

== Common Toolbar Functions ==

{| cellspacing="0" cellpadding="3" border="1"
|-
| nowrap="nowrap" align="center" | '''Toolbar Element''' 
| '''Function'''
|-
| align="center" | [[Image:CKEditor_source.png]] 
| View or edit the document source code (for advanced users). See [[CKEditor 3.x/Users Guide/Source Editor|Source Editor]]. 
|-
| align="center" | [[Image:CKEditor_save.gif]]
| Saves the page you were editing.
|-
| align="center" | [[Image:CKEditor_new.png]]
| Removes all contentes, creating a new blank page.
|-
| align="center" | [[Image:CKEditor_preview.png]] 
| Preview what the HTML page will look like for users. 
|-
| align="center" | [[Image:CKEditor_templates.png]] 
| Select a layout template. See [[CKEditor_3.x/Users Guide/Common Tasks/Templates|Templates]] 
|-
| align="center" | [[Image:CKEditor_cut.png]] 
| Cut the highlighted text to the clipboard. See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_copy.png]] 
| Copy the highlighted text to the clipboard. See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_paste.png]][[Image:CKEditor_paste_text.png]] 
| Paste the data copied to the clipboard (with or without formatting). See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_paste_word.png]] 
| Paste content copied from Microsoft Word or similar applications. See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_print.gif]] 
| Print the current document. See [[CKEditor_3.x/Users Guide/Other Tasks/Printing|Printing]]. 
|-
| align="center" | [[Image:CKEditor_checkspell.png]][[Image:CKEditor_SCAYT.png]] 
| Spell check the text in the document or spell check the text as you type. See [[CKEditor_3.x/Users Guide/Other Tasks/Spell Checking|Spell Checking]]. 

|-
| align="center" | [[Image:CKEditor_undo.png]][[Image:CKEditor_redo.png]] 
| Undo or redo the most recent action taken. See [[CKEditor_3.x/Users Guide/Other Tasks/Undo and Redo|Undo and Redo]]. 
|-
| align="center" | [[Image:CKEditor_find.png]] 
| Find a word or phrase within the document. See [[CKEditor_3.x/Users Guide/Other Tasks/Find and Replace|Find and Replace]]. 
|-
| align="center" | [[Image:CKEditor_find_replace..png]] 
| Find and replace a word or phrase within the document. See [[CKEditor_3.x/Users Guide/Other Tasks/Find and Replace|Find and Replace]]. 
|-
| align="center" | [[Image:CKEditor_select_all.png]] 
| Select the entire content in the document. 
|-
| align="center" | [[Image:CKEditor_remove_format.png]] 
| Remove the formatting from the highlighted text. 
|-
| align="center" | [[Image:CKEditor_bold.png]][[Image:CKEditor_italic.png]][[Image:CKEditor_underline.png]][[Image:CKEditor_strikethough.png]] 
| Applies '''bold''', ''italic'', underscore or <strike>strikethrough</strike> formatting to the highlighted text.See [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_subscript.png]][[Image:CKEditor_superscript.png]] 
| Superscript or subscript the highlighted text.See Superscript and subscript in [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_insertorderlist.png]][[Image:CKEditor_insertunorderedlist.png]]
| Creates numbered or bulleted lists. See [[CKEditor_3.x/Users Guide/Common Tasks/Creating Lists|Creating Lists]]. 
|-
| align="center" | [[Image:CKEditor_outdent.png]][[Image:CKEditor_indent.png]]
| Increase or decrease the text indentation. 
|-
| align="center" | [[Image:CKEditor_blokquote.png]] 
| Format a block of text to identify quotations (text provenient from other sources). 
|-
| align="center" | [[Image:CKEditor_div_container.png]] 
| Create a new div container in document source. 
|-
| align="center" | [[Image:CKEditor_align_left.png]][[Image:CKEditor_align_center.png]][[Image:CKEditor_align_right.png]][[Image:CKEditor_justify.png‎]]
| Sets the text alignment (left, centered, right or justified). See Text layout and format in [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_text_direction_left.png]][[Image:CKEditor_text_direction_right.png]]
| Sets the text direction from left to right or from right to left. 
|-
| align="center" | [[Image:CKEditor_link.png]][[Image:CKEditor_unlink.png]]
| Converts or removes the text in hyperlinks. It may also by used to manage file uploads and links to files on the web server. See [[CKEditor_3.x/Users Guide/Common Tasks/Links, E-Mails and Anchors|Links, E-Mails and Anchors]]. 

|-
| align="center" | [[Image:CKEditor_anchors.png]]
| Inserts or modifies a link anchor. See [[CKEditor_3.x/Users Guide/Common Tasks/Links, E-Mails and Anchors|Links, E-Mails and Anchors]]
|-
| align="center" | [[Image:CKEditor_image.png]]
| Inserts images into the document. See [[CKEditor_3.x/Users Guide/Common Tasks/Inserting Images|Inserting Images]]. 
|-
| align="center" | [[Image:CKEditor_flash.png]]
| Inserts a Adobe Flash element into the page. See [[CKEditor_3.x/Users Guide/Common Tasks/Inserting Flash|Inserting Flash]]
|-
| align="center" | [[Image:CKEditor_table.png]]
| Creates a table with the defined number of columns and rows. See [[CKEditor_3.x/Users Guide/Common Tasks/Tables|Tables]]. 
|-
| align="center" | [[Image:CKEditor_horizontal_line.png]]
| Inserts a divider line (horizontal rule). 
|-
| align="center" | [[Image:CKEditor_smiley.png]]
| Inserts an emoticons image (smiley faces, email icon, lightbulb, etc.). 
|-
| align="center" | [[Image:CKEditor_specialchar.png]]
| Inserts special characters. 
|-
| align="center" | [[Image:CKEditor_pagebreak.png]]
| Inserts a printing page break. Only impacts printed version. 
|-
| align="center" | [[Image:CKEditor_styles.png]]
| Styles & formatting determine the appearance and semantic value of your document. You may use the drop down boxes to apply styles, set the font, its size, etc. To remove the applied style select the style name again. See [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_textcolor.png]]
| Changes the color of the text. See[[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_bgcolor.png]]
| Changes the background color of the text. See[[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_maximize.png]]
| Maximizes the editor size inside the browser.
|-
| align="center" | [[Image:CKEditor_show blocks.png]]
| Shows the block elements boundaries in the text.
|-
| align="center" | [[Image:CKEditor_about.png]]
| Shows information about the CKEditor.
|}

== Form Functions ==

{| cellspacing="0" cellpadding="3" border="1"
|-
| nowrap="nowrap" align="center" | '''Toolbar Element''' 
| '''Function'''
|-
| align="center" | [[Image:CKEditor_form.png]]
| Creates a new form block into the page. 
|-
| align="center" | [[Image:CKEditor_checkbox.png]]
| Inserts a checkbox to the page.
|-
| align="center" | [[Image:CKEditor_radiobutton.png]]
| Inserts a radio button to the page.
|-
| align="center" | [[Image:CKEditor_textfield.png]] 
| Inserts a text field into the page. 
|-
| align="center" | [[Image:CKEditor_textarea.png]]
| Inserts a multi-line text area into the page.
|-
| align="center" | [[Image:CKEditor_selection_field.png]] 
| Inserts a selection field into the page. 
|-
| align="center" | [[Image:CKEditor_button.png]] 
| Inserts a form button into the page. 
|-
| align="center" | [[Image:CKEditor_button_image.png]]
| Inserts an image into the page, which behaves much like form button used to submit forms. Do not use it to insert plain images into the document. 
|-
| align="center" | [[Image:CKEditor_hidden.png]] 
| Inserts a hidden field into the page. 
|}

CKEditor 3.x/Users Guide/Quick Reference

2010-09-13T11:37:27Z

Magdalena.stachnik:

This section describes all functions available in the default CKEditor’s toolbar ([[File:CKEditor_Toolbar.pdf‎]]|download as pdf|link=http://docs.cksource.com/images/0/04/CKEditor_Toolbar.pdf).

== Common Toolbar Functions ==

{| cellspacing="0" cellpadding="3" border="1"
|-
| nowrap="nowrap" align="center" | '''Toolbar Element''' 
| '''Function'''
|-
| align="center" | [[Image:CKEditor_source.png]] 
| View or edit the document source code (for advanced users). See [[CKEditor 3.x/Users Guide/Source Editor|Source Editor]]. 
|-
| align="center" | [[Image:CKEditor_save.gif]]
| Saves the page you were editing.
|-
| align="center" | [[Image:CKEditor_new.png]]
| Removes all contentes, creating a new blank page.
|-
| align="center" | [[Image:CKEditor_preview.png]] 
| Preview what the HTML page will look like for users. 
|-
| align="center" | [[Image:CKEditor_templates.png]] 
| Select a layout template. See [[CKEditor_3.x/Users Guide/Common Tasks/Templates|Templates]] 
|-
| align="center" | [[Image:CKEditor_cut.png]] 
| Cut the highlighted text to the clipboard. See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_copy.png]] 
| Copy the highlighted text to the clipboard. See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_paste.png]][[Image:CKEditor_paste_text.png]] 
| Paste the data copied to the clipboard (with or without formatting). See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_paste_word.png]] 
| Paste content copied from Microsoft Word or similar applications. See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_print.gif]] 
| Print the current document. See [[CKEditor_3.x/Users Guide/Other Tasks/Printing|Printing]]. 
|-
| align="center" | [[Image:CKEditor_checkspell.png]][[Image:CKEditor_SCAYT.png]] 
| Spell check the text in the document or spell check the text as you type. See [[CKEditor_3.x/Users Guide/Other Tasks/Spell Checking|Spell Checking]]. 

|-
| align="center" | [[Image:CKEditor_undo.png]][[Image:CKEditor_redo.png]] 
| Undo or redo the most recent action taken. See [[CKEditor_3.x/Users Guide/Other Tasks/Undo and Redo|Undo and Redo]]. 
|-
| align="center" | [[Image:CKEditor_find.png]] 
| Find a word or phrase within the document. See [[CKEditor_3.x/Users Guide/Other Tasks/Find and Replace|Find and Replace]]. 
|-
| align="center" | [[Image:CKEditor_find_replace..png]] 
| Find and replace a word or phrase within the document. See [[CKEditor_3.x/Users Guide/Other Tasks/Find and Replace|Find and Replace]]. 
|-
| align="center" | [[Image:CKEditor_select_all.png]] 
| Select the entire content in the document. 
|-
| align="center" | [[Image:CKEditor_remove_format.png]] 
| Remove the formatting from the highlighted text. 
|-
| align="center" | [[Image:CKEditor_bold.png]][[Image:CKEditor_italic.png]][[Image:CKEditor_underline.png]][[Image:CKEditor_strikethough.png]] 
| Applies '''bold''', ''italic'', underscore or <strike>strikethrough</strike> formatting to the highlighted text.See [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_subscript.png]][[Image:CKEditor_superscript.png]] 
| Superscript or subscript the highlighted text.See Superscript and subscript in [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_insertorderlist.png]][[Image:CKEditor_insertunorderedlist.png]]
| Creates numbered or bulleted lists. See [[CKEditor_3.x/Users Guide/Common Tasks/Creating Lists|Creating Lists]]. 
|-
| align="center" | [[Image:CKEditor_outdent.png]][[Image:CKEditor_indent.png]]
| Increase or decrease the text indentation. 
|-
| align="center" | [[Image:CKEditor_blokquote.png]] 
| Format a block of text to identify quotations (text provenient from other sources). 
|-
| align="center" | [[Image:CKEditor_div_container.png]] 
| Create a new div container in document source. 
|-
| align="center" | [[Image:CKEditor_align_left.png]][[Image:CKEditor_align_center.png]][[Image:CKEditor_align_right.png]][[Image:CKEditor_justify.png‎]]
| Sets the text alignment (left, centered, right or justified). See Text layout and format in [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_text_direction_left.png]][[Image:CKEditor_text_direction_right.png]]
| Sets the text direction from left to right or from right to left. 
|-
| align="center" | [[Image:CKEditor_link.png]][[Image:CKEditor_unlink.png]]
| Converts or removes the text in hyperlinks. It may also by used to manage file uploads and links to files on the web server. See [[CKEditor_3.x/Users Guide/Common Tasks/Links, E-Mails and Anchors|Links, E-Mails and Anchors]]. 

|-
| align="center" | [[Image:CKEditor_anchors.png]]
| Inserts or modifies a link anchor. See [[CKEditor_3.x/Users Guide/Common Tasks/Links, E-Mails and Anchors|Links, E-Mails and Anchors]]
|-
| align="center" | [[Image:CKEditor_image.png]]
| Inserts images into the document. See [[CKEditor_3.x/Users Guide/Common Tasks/Inserting Images|Inserting Images]]. 
|-
| align="center" | [[Image:CKEditor_flash.png]]
| Inserts a Adobe Flash element into the page. See [[CKEditor_3.x/Users Guide/Common Tasks/Inserting Flash|Inserting Flash]]
|-
| align="center" | [[Image:CKEditor_table.png]]
| Creates a table with the defined number of columns and rows. See [[CKEditor_3.x/Users Guide/Common Tasks/Tables|Tables]]. 
|-
| align="center" | [[Image:CKEditor_horizontal_line.png]]
| Inserts a divider line (horizontal rule). 
|-
| align="center" | [[Image:CKEditor_smiley.png]]
| Inserts an emoticons image (smiley faces, email icon, lightbulb, etc.). 
|-
| align="center" | [[Image:CKEditor_specialchar.png]]
| Inserts special characters. 
|-
| align="center" | [[Image:CKEditor_pagebreak.png]]
| Inserts a printing page break. Only impacts printed version. 
|-
| align="center" | [[Image:CKEditor_styles.png]]
| Styles & formatting determine the appearance and semantic value of your document. You may use the drop down boxes to apply styles, set the font, its size, etc. To remove the applied style select the style name again. See [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_textcolor.png]]
| Changes the color of the text. See[[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_bgcolor.png]]
| Changes the background color of the text. See[[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_maximize.png]]
| Maximizes the editor size inside the browser.
|-
| align="center" | [[Image:CKEditor_show blocks.png]]
| Shows the block elements boundaries in the text.
|-
| align="center" | [[Image:CKEditor_about.png]]
| Shows information about the CKEditor.
|}

== Form Functions ==

{| cellspacing="0" cellpadding="3" border="1"
|-
| nowrap="nowrap" align="center" | '''Toolbar Element''' 
| '''Function'''
|-
| align="center" | [[Image:CKEditor_form.png]]
| Creates a new form block into the page. 
|-
| align="center" | [[Image:CKEditor_checkbox.png]]
| Inserts a checkbox to the page.
|-
| align="center" | [[Image:CKEditor_radiobutton.png]]
| Inserts a radio button to the page.
|-
| align="center" | [[Image:CKEditor_textfield.png]] 
| Inserts a text field into the page. 
|-
| align="center" | [[Image:CKEditor_textarea.png]]
| Inserts a multi-line text area into the page.
|-
| align="center" | [[Image:CKEditor_selection_field.png]] 
| Inserts a selection field into the page. 
|-
| align="center" | [[Image:CKEditor_button.png]] 
| Inserts a form button into the page. 
|-
| align="center" | [[Image:CKEditor_button_image.png]]
| Inserts an image into the page, which behaves much like form button used to submit forms. Do not use it to insert plain images into the document. 
|-
| align="center" | [[Image:CKEditor_hidden.png]] 
| Inserts a hidden field into the page. 
|}

CKEditor 3.x/Users Guide/Quick Reference

2010-09-13T11:34:35Z

Magdalena.stachnik:

This section describes all functions available in the default CKEditor’s toolbar ([[media:CKEditor_Toolbar.pdf‎]]|download as pdf).

== Common Toolbar Functions ==

{| cellspacing="0" cellpadding="3" border="1"
|-
| nowrap="nowrap" align="center" | '''Toolbar Element''' 
| '''Function'''
|-
| align="center" | [[Image:CKEditor_source.png]] 
| View or edit the document source code (for advanced users). See [[CKEditor 3.x/Users Guide/Source Editor|Source Editor]]. 
|-
| align="center" | [[Image:CKEditor_save.gif]]
| Saves the page you were editing.
|-
| align="center" | [[Image:CKEditor_new.png]]
| Removes all contentes, creating a new blank page.
|-
| align="center" | [[Image:CKEditor_preview.png]] 
| Preview what the HTML page will look like for users. 
|-
| align="center" | [[Image:CKEditor_templates.png]] 
| Select a layout template. See [[CKEditor_3.x/Users Guide/Common Tasks/Templates|Templates]] 
|-
| align="center" | [[Image:CKEditor_cut.png]] 
| Cut the highlighted text to the clipboard. See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_copy.png]] 
| Copy the highlighted text to the clipboard. See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_paste.png]][[Image:CKEditor_paste_text.png]] 
| Paste the data copied to the clipboard (with or without formatting). See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_paste_word.png]] 
| Paste content copied from Microsoft Word or similar applications. See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_print.gif]] 
| Print the current document. See [[CKEditor_3.x/Users Guide/Other Tasks/Printing|Printing]]. 
|-
| align="center" | [[Image:CKEditor_checkspell.png]][[Image:CKEditor_SCAYT.png]] 
| Spell check the text in the document or spell check the text as you type. See [[CKEditor_3.x/Users Guide/Other Tasks/Spell Checking|Spell Checking]]. 

|-
| align="center" | [[Image:CKEditor_undo.png]][[Image:CKEditor_redo.png]] 
| Undo or redo the most recent action taken. See [[CKEditor_3.x/Users Guide/Other Tasks/Undo and Redo|Undo and Redo]]. 
|-
| align="center" | [[Image:CKEditor_find.png]] 
| Find a word or phrase within the document. See [[CKEditor_3.x/Users Guide/Other Tasks/Find and Replace|Find and Replace]]. 
|-
| align="center" | [[Image:CKEditor_find_replace..png]] 
| Find and replace a word or phrase within the document. See [[CKEditor_3.x/Users Guide/Other Tasks/Find and Replace|Find and Replace]]. 
|-
| align="center" | [[Image:CKEditor_select_all.png]] 
| Select the entire content in the document. 
|-
| align="center" | [[Image:CKEditor_remove_format.png]] 
| Remove the formatting from the highlighted text. 
|-
| align="center" | [[Image:CKEditor_bold.png]][[Image:CKEditor_italic.png]][[Image:CKEditor_underline.png]][[Image:CKEditor_strikethough.png]] 
| Applies '''bold''', ''italic'', underscore or <strike>strikethrough</strike> formatting to the highlighted text.See [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_subscript.png]][[Image:CKEditor_superscript.png]] 
| Superscript or subscript the highlighted text.See Superscript and subscript in [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_insertorderlist.png]][[Image:CKEditor_insertunorderedlist.png]]
| Creates numbered or bulleted lists. See [[CKEditor_3.x/Users Guide/Common Tasks/Creating Lists|Creating Lists]]. 
|-
| align="center" | [[Image:CKEditor_outdent.png]][[Image:CKEditor_indent.png]]
| Increase or decrease the text indentation. 
|-
| align="center" | [[Image:CKEditor_blokquote.png]] 
| Format a block of text to identify quotations (text provenient from other sources). 
|-
| align="center" | [[Image:CKEditor_div_container.png]] 
| Create a new div container in document source. 
|-
| align="center" | [[Image:CKEditor_align_left.png]][[Image:CKEditor_align_center.png]][[Image:CKEditor_align_right.png]][[Image:CKEditor_justify.png‎]]
| Sets the text alignment (left, centered, right or justified). See Text layout and format in [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_text_direction_left.png]][[Image:CKEditor_text_direction_right.png]]
| Sets the text direction from left to right or from right to left. 
|-
| align="center" | [[Image:CKEditor_link.png]][[Image:CKEditor_unlink.png]]
| Converts or removes the text in hyperlinks. It may also by used to manage file uploads and links to files on the web server. See [[CKEditor_3.x/Users Guide/Common Tasks/Links, E-Mails and Anchors|Links, E-Mails and Anchors]]. 

|-
| align="center" | [[Image:CKEditor_anchors.png]]
| Inserts or modifies a link anchor. See [[CKEditor_3.x/Users Guide/Common Tasks/Links, E-Mails and Anchors|Links, E-Mails and Anchors]]
|-
| align="center" | [[Image:CKEditor_image.png]]
| Inserts images into the document. See [[CKEditor_3.x/Users Guide/Common Tasks/Inserting Images|Inserting Images]]. 
|-
| align="center" | [[Image:CKEditor_flash.png]]
| Inserts a Adobe Flash element into the page. See [[CKEditor_3.x/Users Guide/Common Tasks/Inserting Flash|Inserting Flash]]
|-
| align="center" | [[Image:CKEditor_table.png]]
| Creates a table with the defined number of columns and rows. See [[CKEditor_3.x/Users Guide/Common Tasks/Tables|Tables]]. 
|-
| align="center" | [[Image:CKEditor_horizontal_line.png]]
| Inserts a divider line (horizontal rule). 
|-
| align="center" | [[Image:CKEditor_smiley.png]]
| Inserts an emoticons image (smiley faces, email icon, lightbulb, etc.). 
|-
| align="center" | [[Image:CKEditor_specialchar.png]]
| Inserts special characters. 
|-
| align="center" | [[Image:CKEditor_pagebreak.png]]
| Inserts a printing page break. Only impacts printed version. 
|-
| align="center" | [[Image:CKEditor_styles.png]]
| Styles & formatting determine the appearance and semantic value of your document. You may use the drop down boxes to apply styles, set the font, its size, etc. To remove the applied style select the style name again. See [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_textcolor.png]]
| Changes the color of the text. See[[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_bgcolor.png]]
| Changes the background color of the text. See[[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_maximize.png]]
| Maximizes the editor size inside the browser.
|-
| align="center" | [[Image:CKEditor_show blocks.png]]
| Shows the block elements boundaries in the text.
|-
| align="center" | [[Image:CKEditor_about.png]]
| Shows information about the CKEditor.
|}

== Form Functions ==

{| cellspacing="0" cellpadding="3" border="1"
|-
| nowrap="nowrap" align="center" | '''Toolbar Element''' 
| '''Function'''
|-
| align="center" | [[Image:CKEditor_form.png]]
| Creates a new form block into the page. 
|-
| align="center" | [[Image:CKEditor_checkbox.png]]
| Inserts a checkbox to the page.
|-
| align="center" | [[Image:CKEditor_radiobutton.png]]
| Inserts a radio button to the page.
|-
| align="center" | [[Image:CKEditor_textfield.png]] 
| Inserts a text field into the page. 
|-
| align="center" | [[Image:CKEditor_textarea.png]]
| Inserts a multi-line text area into the page.
|-
| align="center" | [[Image:CKEditor_selection_field.png]] 
| Inserts a selection field into the page. 
|-
| align="center" | [[Image:CKEditor_button.png]] 
| Inserts a form button into the page. 
|-
| align="center" | [[Image:CKEditor_button_image.png]]
| Inserts an image into the page, which behaves much like form button used to submit forms. Do not use it to insert plain images into the document. 
|-
| align="center" | [[Image:CKEditor_hidden.png]] 
| Inserts a hidden field into the page. 
|}

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

2010-09-13T11:23:49Z

Magdalena.stachnik:

= Links and E-mails =

In order to insert a link to an URL address, anchor or an e-mail user should press [[Image:CKEditor_link.png]] button on the toolbar. A popup window called "Link" will appear. 

[[Image:CKEditor_link_popup.png]]

* '''Link Type''': specifies the type of the link which user would like to put in the document. You can choose from "URL", "Link to anchor in the text" or "E-mail". Depending on User's preference different options and bookmarks will appear in the window.

== URL ==

=== Link Info ===

In this bookmark user could change the link type. After choosing link type URL, user should set following options:

* '''Protocol''': specifies the type of protocol which user wishes to used. User could choose from "http://", "https://", "ftp://", "news://" or "<other>".
* '''URL''': specifies the address you want your link to refer to.

To set properties user should press "OK". Afterwards the link will appear in the document. 

=== Target ===

The second bookmark of the Link window refers to "Target":

[[Image:CKEditor_url_link.png]]

* '''Target''': sets the target of user's link and specifies the type of the window in which link appears. User may choose from "<frame>", "<popup window>" "New Window" ( _blank ), "Topmost Window" ( _top ), Same Window ( _self ), Parent Window ( _parent). 

If user selects "<frame>" the following options will be displayed:

[[Image:CKEditor_url_frame_option.png]]

* '''Target Frame Name''': defined name of Target Frame. 

In "Target" bookmark includes also the <popup window> option. When user selects <popup window> then following options will appears:

[[Image:CKEditor_popup.png]]

* '''Popup Window Name''': specifies the name of user's popup window. 
Popup window features are identical however depending on which browser you are using, some of the options may not be available:
* '''Resizables''': This option allows user to resizing popup window.
* '''Location Bar''': When user checks this option popup window will be appear without the action bar.
* '''Menu Bar''': When user sets this option window will be appear without menu bar.
* ''' Scroll Bars''': When user sets this option window will be appear without scroll bar.
* '''Status Bar''': when user checks this option popup window will be appear without status bar.
* '''Toolbar''': When user sets this option window will be appear without toolbar.
* '''Full Screen (IE)''' When user sets this option popup window will be open in full screen mode. Option available only in Internet Explorer.
* ''' Dependent (Netscape)''' When user sets this option, popup window will be depended on master window. Option available only in Netscape.
* '''Width''': Specifies the width of the window the linked address appears in. 
* '''Height''': specifies the hight of the window the linked address appears in.
* '''Left Position''': Sets the horizontal position of the window the linked address appears in, starting from the left side of user's screen. 
* '''Top Position''': Sets the vertical position of the window the linked address appears in, starting from the top of user's screen. 

Pressing "'''OK'''" inserts the link in user's document. 

=== Upload ===

Notice that this bookmark may not be available if CKEditor is not connected to the file manager, such as CKFinder.

The third bookmark refers to "Upload":

[[Image:CKEditor_url_upload.png]] 

* '''Upload''': specifies the location of the file which user want to upload. In order to choose the file user can type it's location either manually or by pressing "Browse...".
* '''Send it to Server''': sends the file specified in "Upload" to the server. 

== Link to anchor in the text ==

If user chooses "Link to anchor in the text" then new options will be displayed in the Link Info bookmark. 

[[Image:CKEditor_anchor_link.png]] 

User may select the link to the anchor in two ways.

* '''By Anchor Name''': After creating a new anchor, user can select the anchor by name.
* '''By Element Id''': Selects the anchor by Id.

Pressing "'''OK'''" inserts the link in user's document. 

== E-mail ==

If user sets "E-mail" new options will appear in the Link Info bookmark:

[[Image:CKEditor_link_email.png]] 

* '''E-mail Address''': specifies the e-mail address which link refers to. 
* '''Message Subject''': specifies the subject of the message which is send to the e-mail address. 
* '''Message Body''': specifies the text of the message which is send to the e-mail address. 

Press "'''OK'''" to insert the link in your document.

== Advanced options ==

No matter which Link Type user chooses, bookmark called "Advanced" remains unchangeable:

[[Image:CKEditor_link_advanced.png]] 

* '''Id''': specifies link's ID. 
* '''Language Direction''': sets the language direction from left to right ( LTR ) or from right to left ( RTL ).
* '''Access Key''': sets up an access key to the link. 
* '''Name''': specifies link's name. 
* '''Language Code:''' defines the code of the language e.g. en, pt, pt
* '''Tab Index''': defines the tab index. 
* '''Advisory Title''': specifies the description of the target object.
* '''Advisory Content Type''': specifies the MIME type of the target object. 
* '''Stylesheet Classes''': specifies the name of the CSS class. 
* '''Linked Resource Charset''': specifies the charset of the target object. 
* '''Style''': defines the style

Press "'''OK'''" to insert the link.

= Anchors =

In order to insert an anchor in the text place the cursor before the text or section you want to the anchor to refer and press [[Image:CKEditor_anchors.png‎]] button on the toolbar. A popup window called "Anchor Properties" appears: 

[[Image:CKEditor_anchor_add.png]]

* '''Anchor Name''': specifies the anchor name. User refers to this name while linking to the anchor.

The anchor appears in the document after pressing "OK” button.

CKEditor 3.x/Users Guide/Document/Find and Replace

2010-09-13T11:22:46Z

Magdalena.stachnik:

__TOC__
== Find ==

To find a phrase/word in the text user may press [[Image:CKEditor_find.png]] button on the toolbar. A popup window called "Find and Replace" will appear: 

[[Image:CKEditor_find_window.png]] 

* '''Find what''': in this field you put the phrase/word you would like to find. 
* '''Match case''': if you check this option the program will find only the text with the exact cases like e.g. aLberT 
* '''Match whole word''': if you check this option CKEditor will only look for a whole word. It will not look for a phrase. 
* '''Match cyclic''': if you check this option, when the program reaches the end of the text it begins searching from the top of the text.

After you select options to use press “Find”. The program will highlight search results. If you press "'''Find'''" again CKEditor will find the next phrase/word matching to your request. 

== Replace==

To replace a phrase/word in your text press [[Image:CKEditor_find_replace..png]] button on the toolbar. A popup window will appear: 

[[Image:CKEditor_replace_window.png]] 

* '''Find what''': in this field you place the phrase/word you would like to find 
* '''Replace with''': in this field you place the phrase/word you would like replace your text with. 
* '''Match case''': if you check this option CKEditor will find only the text with the exact cases like e.g. aLberT
* '''Match whole word''': if you check this option the program will only look for a whole word. It will not look for a phrase.
* '''Match cyclic''': if you check this option, when CKEditor reaches the end of the text it begins searching from the top of the text.
 

To replace only one phrase/word press "'''Replace'''". CKEditor will find and highlight the text. In order to continue a replacement process, press the "'''Replace'''" button again 
To replace all the phrases/words press "'''Replace All'''".

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

2010-09-13T11:21:54Z

Magdalena.stachnik:

== Creating a table ==

If you want to create a table in CKEditor you must press the "Insert/Edit Table" [[Image:CKEditor_table.png‎]]button on the toolbar. 

After that a pop up window called "Table Properties" will appear. It incudes two bookmarks. 

 

=== Table Properties ===

[[Image:CKEditor_table_popup.png|Table properties]] 

* '''Rows''': in this field user specify number of rows in the table. 
* '''Columns''': specifies number of columns in the table. 
* '''Width''': sets the width of the table in pixels or percentage. E.g. Choosing 40 percent table takes 40% of the editing area width. 
* '''"Height''': sets the height of the table in pixels. 
* '''Headers''': specifies how headers will look like. User may choose following option "First Line", "First column", "Both". 
* '''Border size''': sets the thickness of the tables border. 
* '''Alignment''': specifies the alignment of the table. Three options available: left, center and right. 
* '''Cell spacing''': specifies thickness of the cell’s border.
* '''Cell padding''': sets the hight of the cell.
* '''Caption''': specifies the title of the table. The title appears in the top of the table.
* '''Summary''': sets a comment on the table.The comment does not appear in the table.

Not all options are required to build a table. User is asked to fill only Rows and Columns. Filling the rest of the fields is optional. It may be used or not, depending on User’s needs.

=== Advanced ===

The second bookmarks refers to "Advanced": 

[[Image:CKEditor_table_advanced.png]]

This bookmark allows user to set following option:

* '''Id''': specifies link's ID.
* '''Language Direction''': sets the language direction from left to right (LTR)or from right to left ( RTL ).
* '''Style''': defines the style.
* '''Stylesheet Classes''': specifies the name of the CSS class.

== Working with the table ==

User is able to change table’s properties. To modify table user must point mouse on the table and press the right button to display a context menu.. 

[[Image:CKEditor_context_table.png]]

In order to change the tables’ properties "'''Table Properties'''" should be pressed. A popup window appears. Similar to the one which is used for creating the table.

To delete the table press "'''Delete Table'''".

The other three options are Cell, Row and Column. Pointing with mouse cursor on one of them shows a new context menu.

=== Cell ===

[[Image:CKEditor_cell_context.png|The cell context menu]]

* '''Insert Cell Before''': inserts a new cell before the cell where the cursor was located. 
* '''Insert Cell After''': inserts a new cell after the cell where the cursor was located.
* '''Delete Cells''': deletes a cell the cursor was by. User may also highlight more cells and delete them.
* '''Merge Cells''': merges cells you have highlighted into a one cell.
* '''Merge Right''': merges cell where the cursor was located with the right cell.
* '''Merge Down''': merges cell where the cursor was located with cell below.
* '''Split Cell Horizontally''': splits a cell in two. One cell is split into two columns. 
* '''Split Cell Vertically''': splits a cell in two. One cell is split into two rows.
* '''Cell properties''': Clicking the cell properties displays a new popup window called "Cell Properties". :

 

[[Image:CKEditor_cell_properties.png]] 

* '''Width''': sets the cell width in pixels or in percentage of the table width.
* '''Height''': sets the height of the cell. 
* '''Word Wrap''': turns on/off word wrapping.
* '''Horizontal Alignment''':determines the horizontal alignment of the text in a cell. Three options are available: Left, Center and Right.
* '''Vertical Alignment''': determines the vertical alignment of the text in a cell, which may be set to Top, Middle, Bottom or Baseline.
* '''Cell Type''': determines the type of cell, user may set Data cell or Header cell.
* '''Rows span''': extends vertical rows.
* '''Columns span''':extends cells on a horizontal row (left and right).
* '''Background color''': sets the background color of a cell. User may either select a color or type it manually.
* '''Border Color''': sets the color of your cells border. User may either select a color or type it manually.

=== Row ===

[[Image:CKEditor_row_context.png]]

* '''Insert Row Before''': inserts a new row before the row where the cursor was located.
* '''Insert Row After''': inserts a new row after the row where the cursor was located.
* '''Delete Rows''': deletes highlighted rows or the row the cursor was by.

=== Column ===

[[Image:CKEditor_column_context.png]] 

* '''Insert Column Before''': inserts a column before the column where the cursor was located.
* '''Insert Column After''': inserts a column after the column where the cursor was located.
* '''Delete Columns''': deletes highlighted columns or the column the cursor was by.

CKEditor 3.x/Users Guide/Document/Templates

2010-09-13T11:21:10Z

Magdalena.stachnik:

A template is CKEditor's function which allows user to change the page layout, style and to organize user's document better.In order to activate it press [[Image:CKEditor_templates.png]] button on the toolbar. A pop up window called "Content Templates" will appear:

[[Image:CKEditor_templates_window.png]]

* '''Image and Title''': one main image with a title and text that surround the image.
* '''Strange Template''': a template that defines two columns, each one with title, and some text.
* '''Text and Table''': a title with some text and a table.

'''Replace actual contents''': If user checks this option, current content will be replace by the new one.

If you chose a template double-click on it and it will appear in your document.

Example:

[[Image:CKEditor_templetes_example.png]]

CKEditor 3.x/Users Guide/Document/Undo and Redo

2010-09-13T11:17:48Z

Magdalena.stachnik:

== Undo ==

CKEditor contains many useful functions for example undo and redo function.
"Undo" function is helpful when user needs to cancel previous changes. 

You can activate the "undo" function in two ways: 

# by pressing the [[Image:CKEditor_undo.png]]button on the toolbar.
# by pressing the combination of CTRL+Z on the keyboard.

After user activates the function it will go back to the last change that had been made e.g.: You have written a whole chapter in your text, highlighted it and then deleted it accidently. In order to restore it user may activate the "Undo" function which will take you back to the moment when the chapter was highlighted but has not been deleted yet. This option allows user to go as many steps back as desired.

== Redo ==

If "undo" function was used and for any reason user wish to go back to the state before the undo, the redo function may be used. In order to activate redo option, [[Image:CKEditor_redo.png]] button on the toolbar.

CKEditor 3.x/Users Guide/Spell Checking

2010-09-13T11:15:08Z

Magdalena.stachnik:

Spell checking is a CKEditor's function which helps user to find the mistakes which are made while typing. User may notice that this function depends on the editors’ settings, version and could be different than shown below. CKEditor provides two options of spell checking: Spell checking in pop up window and Spell checking as you type 

== Spell Check ==
To activate the function of spell checking in pop up window simply press [[Image:CKEditor_checkspell.png]] on your toolbar. A popup window called "Spell Check" will appear: 

[[Image:CKEditor_spellcheck_popup.png‎]] 

Appearence of Spell Check window may be different in a hosted and licensed version SpellChecker.

The window contains two bookmarks "'''SpellChecker'''" and "'''Thesaurus'''".

In the upper right corner of the "'''SpellChecker'''" " you may choose which language you would like to use to spell checking. User's text is placed in middle section of the pop up window and Incorrect words are underlined. First incorrect word will appear in the field called "'''Change to'''". You may ignore one mistake by pressing "'''Ignore'''" or all of them by choosing "'''Ignore All'''".

In order to correct the mistake:: 

1. Use the list from "'''Suggestions'''" field to choose the correct word you have in mind. Selected word will appear in "'''Change to'''". field. In case when needed word is not on the list you may type it into the field "'''Change to:'''"

2. Press "'''Change to'''" ". Underlined word will be replaced with the correct one. If you wish to correct the same mistake in the whole text press "'''Change All'''". 

3. Underlined word can be added to the dictionary by pressing "'''Add'''" button. SpellChecker will recognize this word after this action and will not underline it anymore.

In order to change the option of Spell Checking user should press "'''Option'''" button. The pop-up window called "Spell checking options" will appear.

[[Image:CKEditor_spellchecking_option.png‎]]

Spell checking option allows User to set following:

* '''Ignore All-Caps Words''': Check this option if you wish to ignore Words that contains only capital letter, during spell checking.
* '''Ignore Words with Numers'''": Check this option if you wish to ignore Words which includes Numbers, during spell checking.
* '''Ignore Words with Mixed Case''': Check this option if you wish to ignore Word with capital and un capital letters , during spell checking.
* '''Ignore Domain Names''': Check this option if you wish to ignore a name of domain when spell checking.

Program also enables to create, delete, rename, restore User dictionary (this option is available only in hosted or licensed version of Spell Checker). To create User's dictionary you need to fill the "Dictionary name:" field and continue by pressing „Create" button. You may also delete, rename, restore dictionary the same way as explained above.

If setting the options is finished you need to press "'''Ok'''" button to save latest changes. In order to exit Spell Checking option press "Finish Checking" button or "Cancel" button.

=== Theaurus ===

To activate the Theaurus function press "'''Theaurus'''". A "'''Theaurus'''" bookmark will appear:

[[Image:CKEditor_spellcheck_thesaurus.png]] 

In the upper right corner of the "Thesaurus" you may choose which language you would like to use to find synonyms. A Middle section of pop up window contain user's text. If synonyms of the particular word are found, the dictionary will underline the word.

To find synonym of the word user need to click the underlined word. In field "Change to:" appears first synonym of this particular word.
Then choose the categories of the word from the field "'''Categories'''” which is connected with "'''Synonyms'''" field where list of synonyms will be shown. Selected synonym from the list will be displayed in field “Change to :“.In order to change the word with a selected synonym press the “'''Change to'''” button. To exit Check Spelling option press “'''Finish Checking'''” button or “Cancel” button.

== Spell Check As You Type ==

SpellCheckAsYouType (SCAYT) allows user to pick up and correct misspellings while typing. Misspelled words are underlined. To use this option Right-Click marked word and select a suggestion to replace the word with.

To active the function of Spell Checking as you type press [[Image:CKEditor_SCAYT.png]] on toolbar and choose "'''Enable SCAYT'''".

[[Image:CKEditor_checkspellastype_window.png]]

Pressing [[Image:CKEditor_SCAYT.png]] again will display a list of Spell Checking as You type settings. 

[[Image: CKEditor_scayt_options.png]]

There are four bookmarks: "'''Options'''", "'''Languages'''", "'''Dictionaries'''" and "'''About'''"

==== Options ====

To change option of Spell Checking As You Type choose "'''Options'''" from the list. A pop up window "Spell Check As You Type" will appear.

[[Image:CKEditor_SCAYT_option_window.png]]

In the "'''Options'''" bookmark we can set following:

* '''Ignore All-Caps Words''': Check this option if you wish to ignore Words that contains only capital letter, during spell checking.
* '''Ignore Domain Names''': Check this option if you wish to ignore a name of domain, during spell checking.
* '''Ignore Words with Mixed Case''': Check this option if you wish to ignore Word with capital and un capital letters, during spell checking.
* '''Ignore Words with Numers'''": Check this option if you wish to ignore Words with Numbers, during spell checking.

==== Language ====

In the "'''Language'''" bookmark user may choose which language will be used during spell checking.

[[Image: CKEditor_language.png]]

==== Dictionaries ====

"'''Dictionaries'''" bookmark allows User to create delete and rename dictionaries by filling "'''Dictionary name'''" field and pressing:

* "'''Create'''" button while creating,
*"'''Delete'''" button while selecting
*"'''Rename'''" button while renaming.

[[Image:CKEditor_checkspell_dictionary.png]]

==== About ====

Gives User the information about version of SpellChecker.

CKEditor 3.x/Users Guide/Document/Printing

2010-09-13T11:13:11Z

Magdalena.stachnik:

In order to print user's document press the [[Image:CKEditor_print.png]] button on the toolbar. A following popup window will appear:

[[Image:CKEditor_print_popup.png|Image:CKEditor_print_popup.png]]

In "Select Printer" user have an option to choose printer which will be used for printing. "Range of printing" enables to choose print range. There are three options to choose: All, Pages from-to or Selection. User may also define the number of copies to printing.

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

2010-09-13T11:07:21Z

Magdalena.stachnik:

= Links and E-mails =

In order to insert a link to an URL address, anchor or an e-mail user should press [[Image:CKEditor_link.png]] button on the toolbar. A popup window called "Link" will appear. 

[[Image:CKEditor_link_popup.png]]

* '''Link Type''': specifies the type of the link which user would like to put in the document. You can choose from "URL", "Link to anchor in the text" or "E-mail". Depending on User's preference different options and bookmarks will appear in the window.

== URL ==

=== Link Info ===

In this bookmark user could change the link type. After choosing link type URL, user should set following options:

* '''Protocol''': specifies the type of protocol which user wishes to used. User could choose from "http://", "https://", "ftp://", "news://" or "<other>".
* '''URL''': specifies the address you want your link to refer to.

To set properties user should press "OK". Afterwards the link will appear in the document. 

=== Target ===

The second bookmark of the Link window refers to "Target":

[[Image:CKEditor_url_link.png]]

* '''Target''': sets the target of user's link and specifies the type of the window in which link appears. User may choose from "<frame>", "<popup window>" "New Window" ( _blank ), "Topmost Window" ( _top ), Same Window ( _self ), Parent Window ( _parent). 

If user selects "<frame>" the following options will be displayed:

[[Image:CKEditor_url_frame_option.png]]

* '''Target Frame Name''': defined name of Target Frame. 

In "Target" bookmark includes also the <popup window> option. When user selects <popup window> then following options will appears:

[[Image:CKEditor_popup.png]]

* '''Popup Window Name''': specifies the name of user's popup window. 
Popup window features are identical however depending on which browser you are using, some of the options may not be available:
* '''Resizables''': This option allows user to resizing popup window.
* '''Location Bar''': When user checks this option popup window will be appear without the action bar.
* '''Menu Bar''': When user sets this option window will be appear without menu bar.
* ''' Scroll Bars''': When user sets this option window will be appear without scroll bar.
* '''Status Bar''': when user checks this option popup window will be appear without status bar.
* '''Toolbar''': When user sets this option window will be appear without toolbar.
* '''Full Screen (IE)''' When user sets this option popup window will be open in full screen mode. Option available only in Internet Explorer.
* ''' Dependent (Netscape)''' When user sets this option, popup window will be depended on master window. Option available only in Netscape.
* '''Width''': Specifies the width of the window the linked address appears in. 
* '''Height''': specifies the hight of the window the linked address appears in.
* '''Left Position''': Sets the horizontal position of the window the linked address appears in, starting from the left side of user's screen. 
* '''Top Position''': Sets the vertical position of the window the linked address appears in, starting from the top of user's screen. 

Pressing "'''OK'''" inserts the link in user's document. 

=== Upload ===

Notice that this bookmark may not be available if CKEditor is not connected to the file manager, such as CKFinder.

The third bookmark refers to "Upload":

[[Image:CKEditor_url_upload.png]] 

* '''Upload''': specifies the location of the file which user want to upload. In order to choose the file user can type it's location either manually or by pressing "Browse...".
* '''Send it to Server''': sends the file specified in "Upload" to the server. 

== Link to anchor in the text ==

If user chooses "Link to anchor in the text" then new options will be displayed in the Link Info bookmark. 

[[Image:CKEditor_anchor_link.png]] 

User may select the link to the anchor in two ways.

* '''By Anchor Name''': selects the anchor by previously specified name.
* '''By Element Id''': selects the anchor by Id.

Pressing "'''OK'''" inserts the link in user's document. 

== E-mail ==

If user sets "E-mail" new options will appear in the Link Info bookmark:

[[Image:CKEditor_link_email.png]] 

* '''E-mail Address''': specifies the e-mail address which link refers to. 
* '''Message Subject''': specifies the subject of the message which is send to the e-mail address. 
* '''Message Body''': specifies the text of the message which is send to the e-mail address. 

Press "'''OK'''" to insert the link in your document.

== Advanced options ==

No matter which Link Type user chooses, bookmark called "Advanced" remains unchangeable:

[[Image:CKEditor_link_advanced.png]] 

* '''Id''': specifies link's ID. 
* '''Language Direction''': sets the language direction from left to right ( LTR ) or from right to left ( RTL ).
* '''Access Key''': sets up an access key to the link. 
* '''Name''': specifies link's name. 
* '''Language Code:''' defines the code of the language e.g. en, pt, pt
* '''Tab Index''': defines the tab index. 
* '''Advisory Title''': specifies the description of the target object.
* '''Advisory Content Type''': specifies the MIME type of the target object. 
* '''Stylesheet Classes''': specifies the name of the CSS class. 
* '''Linked Resource Charset''': specifies the charset of the target object. 
* '''Style''': defines the style

Press "'''OK'''" to insert the link.

= Anchors =

In order to insert an anchor in the text place the cursor before the text or section you want to the anchor to refer and press [[Image:CKEditor_anchors.png‎]] button on the toolbar. A popup window called "Anchor Properties" appears: 

[[Image:CKEditor_anchor_add.png]]

* '''Anchor Name''': specifies the anchor name. User refers to this name while linking to the anchor.

The anchor appears in the document after pressing "OK” button.

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

2010-09-13T09:43:45Z

Magdalena.stachnik:

CKEditor provides easy and intuitive feature of creating list.

CKEditor offers two kind of lists: numbered lists and bulletted lists.

== Numbered Lists ==

=== Creating ===

In order to create and numbered list user ought to press [[Image:CKEditor_insertorderlist.png‎]]on the toolbar. The text which was beside the cursor will automatically gain number one on the list.

Example:

[[Image:CKEditor_numberedlist_example.png]]

In order to set next numbered line, user should press '''ENTER'''. After that another numbered line will appear.

Example:

[[Image:CKEditor_numberedlist_example2.png]]

Another way to set a numbered list is to highlight the lines which should be listed and press [[Image:CKEditor_insertorderlist.png‎]].

User can easily stop a numbered list by pressing [[Image:CKEditor_insertorderlist.png‎]] button again. The function will be deactivated.

=== Properties ===

In order to change the list's properties user should press right mouse button on any place inside the list. A context menu will appear:

[[Image:CKEditor_numbered_context.png]]

User should select Numbered list Properties. A popup window called "Numbered List Properties" will appear:

[[Image:CKEditor_numbered_properties.png]]

* '''Start''': specifies which number will be fist in numbered list.
* '''Type''': specifies type of list. User may choose one of the following options:
** '''Lower Roman''' (i, ii, iii, iv, v, etc.)
** '''Upper Roman''' (I, II, III, IV, V, etc.)
** '''Lower Alpha''' (a, b, c, d, e, etc.)
** '''Upper Aplha''' (A, B, C, D, E, etc.)
** '''Decimal''' (1, 2, 3, 4, 5, etc.)

[[Image:CKEditor_numbered_properties_type.png]]

== Bulletted Lists ==

=== Creating ===

User can create bulletted list in similar way as numbered list. The difference between them is that in numbered list we use number while in bulletted list we use characters like disc, square, circle. In order to activate bulletted list user should press[[Image:CKEditor_insertunorderedlist.png‎ ]] button on the toolbar.

Example:

[[Image:CKEditor_bulletedlist_example.png]]

=== Properties ===

In order to set list's properties user should press right mouse button on any place inside the bulletted list. A context menu will appear:

[[Image:CKEditor_bulletedlist_context.png]]

User should select Bulleted List Properties. A popup window called "Bulleted List Properties" will appear:

[[Image:CKEditor_bulletedlist_properties.png]]

* '''Type''': specifies type of list. User may choose one of the following options: circle, disc, square.

CKEditor 3.x/Users Guide/Styling

2010-09-13T06:59:54Z

Magdalena.stachnik: /* Subscript and Superscript */

Text formatting is used to modify the text. This function keeps document legible and clear and gives user a chance to decide how the text will look like. 

== Bold, Italic, Underlined and Strike-through ==

User may arrange the way font is displayed, using four different options:

* To make font bold press the [[Image:CKEditor_bold.png]] on the toolbar. 
* To have your text italic press the[[Image:CKEditor_italic.png]]on the toolbar . 
* For underlined press the[[Image:CKEditor_underline.png]] on the toolbar. 
* To strike lines through the text press [[Image:CKEditor_strikethough.png|Strike-through]] on the toolbar. 

Example:

[[Image:CKEditor_example_formatting.png]]

Choosing any options highlight the toolbar’s buttons. In order to cancel formatting press the button responsible for specific option again. 

Example:

[[Image:CKEditor_example_mixed.png]] 

Notice that if you do not switch the underline option off the underline will go between your blanks.

Example:

[[Image:CKEditor_underliendfont.png]] 

This also includes the strike through function.

Mixing the options is available, however too much formatting makes the text illegibly and ugly. Keep that in mind and try not to overuse these options. 

== Styles ==

Using lots of different formatting on the text makes it ugly and difficult to read.

Styles keep all formatting uniform. Each style provides a predefined combination of formatting features. It combines all the formatting functions described in this chapter and enables fast access to the common used text formats. For example: Instead of changing individually: the font, its color, its background, its size user may simply pick a preferred style from the Style menu and start typing.

[[Image:CKEditor_style.png]] 

Please remember to be instructed on how properly use each style.

Example:

[[Image:CKEditor_example_style.png]] 

== Text Alignment ==

Paragraphs’ lines may be modified as well.

* To align the text at the left side of the editing area, User needs to press the [[Image:CKEditor_align_left.png]] button on the toolbar.

Example:

[[Image:CKEditor_example_align_left.png]]

* To align the text at the right side of the editing area[[Image:CKEditor_align_right.png]]button on the toolbar should be pressed.

Example:

[[Image:CKEditor_example_align_right.png]]

* To align the text in the center of the document, User should press[[Image:CKEditor_align_center.png]] button on the toolbar.

Example:

[[Image:CKEditor_example_align_center.png]]
* To use the block alignment also called "justify" user needs to press [[Image:CKEditor_justify.png]]on the toolbar (“Justify” expands the text and makes it equally long so that the lines will end in the same place)

Example:

[[Image:AlignmentB example.png|Image:AlignmentB_example.png]]

== Paragraph (Block) Format ==

Format menu located in the toolbar is one of the most important functions. 

[[Image:CKEditor_format_menu.png]]

User uses format to organize the text and to distinguish different parts of the text e.g.: if user wishes to start a new chapter or to put different categories and subcategories he/she utilizes the format menu and chooses different headings.

Example:

[[Image:CKEditor_example_format.png]]

== Fonts ==

Different style of writing are called fonts. Fonts are functions which determine how the letters in the text look like. Most popular fonts are "Times New Roman" and "Arial”. In order to set a different font in the document User needs to access the font menu in the toolbar and chooses a font.

[[Image:CKEditor_font_menu.png]] 

Example:

[[Image:CKEditor_example_font.png]]

Make sure not to overuse this feature. Give preference to the [[#Styles|Styles]] menu instead. Styles have been precisely designed by the web side developer which make document more legible. 

== Text Size ==

If font’s size needs to be changed User should open the "Size menu" located in the toolbar. Predefined range of size will be display. In order to change the font’s size user needs to choose one of the available options.

[[Image:CKEditor_size_menu.png]] 

Example: 

[[Image:CKEditor_fontsize_example.png]] 

CKEditor offers a big variety of sizes.

== Colors ==

CKEditor enables User to change the color of the text or the background.

In order to change color of the text User need to press [[Image:CKEditor_textcolor.png]]button. Several colors will appear in that menu. User may choose more colors available under "More colors...".

Clicking on the color activates it. 

[[Image:CKEditor_color_menu.png]] 

Example:

[[Image:CKEditor_example_color.png]]

In order to change the background color User should [[Image:CKEditor_bgcolor.png]] button. A range of colors the same ones as in the text color will appear.

Example:

[[Image:CKEditor_example_bgcolor.png]]

You may also mix the colours of your text and the background. 

== Subscript and Superscript ==

Subscript and superscript are usually used for mathematical needs.

In order to put subscript to a letter or a number user should press [[Image:CKEditor_subscript.png]] button on the toolbar.

Example:

[[Image:CKEditor_example_subscript.png]]

As you can see letter and number are written a smaller font than the normal text.

The superscript function works in the same way as the subscript but instead of putting the index on the bottom, it is placed on the top.

In order to use superscript function user ought to press [[Image:CKEditor_superscript.png‎]] button 

Example:

[[Image:CKEditor_example_superscript.png]]

User could freely mixok dxi subscript and superscript function.

Example:

[[Image:CKEditor_example_mix.png]]

CKEditor 3.x/Users Guide/Styling

2010-09-13T06:41:18Z

Magdalena.stachnik:

Text formatting is used to modify the text. This function keeps document legible and clear and gives user a chance to decide how the text will look like. 

== Bold, Italic, Underlined and Strike-through ==

User may arrange the way font is displayed, using four different options:

* To make font bold press the [[Image:CKEditor_bold.png]] on the toolbar. 
* To have your text italic press the[[Image:CKEditor_italic.png]]on the toolbar . 
* For underlined press the[[Image:CKEditor_underline.png]] on the toolbar. 
* To strike lines through the text press [[Image:CKEditor_strikethough.png|Strike-through]] on the toolbar. 

Example:

[[Image:CKEditor_example_formatting.png]]

Choosing any options highlight the toolbar’s buttons. In order to cancel formatting press the button responsible for specific option again. 

Example:

[[Image:CKEditor_example_mixed.png]] 

Notice that if you do not switch the underline option off the underline will go between your blanks.

Example:

[[Image:CKEditor_underliendfont.png]] 

This also includes the strike through function.

Mixing the options is available, however too much formatting makes the text illegibly and ugly. Keep that in mind and try not to overuse these options. 

== Styles ==

Using lots of different formatting on the text makes it ugly and difficult to read.

Styles keep all formatting uniform. Each style provides a predefined combination of formatting features. It combines all the formatting functions described in this chapter and enables fast access to the common used text formats. For example: Instead of changing individually: the font, its color, its background, its size user may simply pick a preferred style from the Style menu and start typing.

[[Image:CKEditor_style.png]] 

Please remember to be instructed on how properly use each style.

Example:

[[Image:CKEditor_example_style.png]] 

== Text Alignment ==

Paragraphs’ lines may be modified as well.

* To align the text at the left side of the editing area, User needs to press the [[Image:CKEditor_align_left.png]] button on the toolbar.

Example:

[[Image:CKEditor_example_align_left.png]]

* To align the text at the right side of the editing area[[Image:CKEditor_align_right.png]]button on the toolbar should be pressed.

Example:

[[Image:CKEditor_example_align_right.png]]

* To align the text in the center of the document, User should press[[Image:CKEditor_align_center.png]] button on the toolbar.

Example:

[[Image:CKEditor_example_align_center.png]]
* To use the block alignment also called "justify" user needs to press [[Image:CKEditor_justify.png]]on the toolbar (“Justify” expands the text and makes it equally long so that the lines will end in the same place)

Example:

[[Image:AlignmentB example.png|Image:AlignmentB_example.png]]

== Paragraph (Block) Format ==

Format menu located in the toolbar is one of the most important functions. 

[[Image:CKEditor_format_menu.png]]

User uses format to organize the text and to distinguish different parts of the text e.g.: if user wishes to start a new chapter or to put different categories and subcategories he/she utilizes the format menu and chooses different headings.

Example:

[[Image:CKEditor_example_format.png]]

== Fonts ==

Different style of writing are called fonts. Fonts are functions which determine how the letters in the text look like. Most popular fonts are "Times New Roman" and "Arial”. In order to set a different font in the document User needs to access the font menu in the toolbar and chooses a font.

[[Image:CKEditor_font_menu.png]] 

Example:

[[Image:CKEditor_example_font.png]]

Make sure not to overuse this feature. Give preference to the [[#Styles|Styles]] menu instead. Styles have been precisely designed by the web side developer which make document more legible. 

== Text Size ==

If font’s size needs to be changed User should open the "Size menu" located in the toolbar. Predefined range of size will be display. In order to change the font’s size user needs to choose one of the available options.

[[Image:CKEditor_size_menu.png]] 

Example: 

[[Image:CKEditor_fontsize_example.png]] 

CKEditor offers a big variety of sizes.

== Colors ==

CKEditor enables User to change the color of the text or the background.

In order to change color of the text User need to press [[Image:CKEditor_textcolor.png]]button. Several colors will appear in that menu. User may choose more colors available under "More colors...".

Clicking on the color activates it. 

[[Image:CKEditor_color_menu.png]] 

Example:

[[Image:CKEditor_example_color.png]]

In order to change the background color User should [[Image:CKEditor_bgcolor.png]] button. A range of colors the same ones as in the text color will appear.

Example:

[[Image:CKEditor_example_bgcolor.png]]

You may also mix the colours of your text and the background. 

== Subscript and Superscript ==

Subscript and superscript are usually used for mathematical needs.

In order to put subscript to a letter or a number user should press [[Image:CKEditor_subscript.png]] button on the toolbar.

Example:

[[Image:CKEditor_example_subscript.png]]

As you can see letter and number are written a smaller font than the normal text.

The superscript work in the same way as the subscript but instead of placing the index in the bottom you place it in the top. This function is usually used in mathematical equations to write the "to the power of" function. You can access it from the toolbar using the [[Image:CKEditor_superscript.png‎]] button 

Example:

[[Image:CKEditor_example_superscript.png]]

You can also mix these two functions:

Example:

[[Image:CKEditor_example_mix.png]]

CKEditor 3.x/Users Guide/Styling

2010-09-13T06:08:35Z

Magdalena.stachnik:

Text formatting is used to modify the text. This function keeps document legible and clear and gives user a chance to decide how the text will look like. 

== Bold, Italic, Underlined and Strike-through ==

User may arrange the way font is displayed, using four different options:

* To make font bold press the [[Image:CKEditor_bold.png]] on the toolbar. 
* To have your text italic press the[[Image:CKEditor_italic.png]]on the toolbar . 
* For underlined press the[[Image:CKEditor_underline.png]] on the toolbar. 
* To strike lines through the text press [[Image:CKEditor_strikethough.png|Strike-through]] on the toolbar. 

Example:

[[Image:CKEditor_example_formatting.png]]

Choosing any options highlight the toolbar’s buttons. In order to cancel formatting press the button responsible for specific option again. 

Example:

[[Image:CKEditor_example_mixed.png]] 

Notice that if you do not switch the underline option off the underline will go between your blanks.

Example:

[[Image:CKEditor_underliendfont.png]] 

This also includes the strike through function. Mixing the options is available, however too much formatting makes the text illegibly and ugly. Keep that in mind and try not to overuse these options. 

== Styles ==

Notice that using lots of different formatting on the text makes it ugly and difficult to read.

Styles were design to help making all formatting uniform in the text. Each style option contains a predefined combination of formatting features, which have been defined by the web site developer. Make sure to be instructed on how to properly use each of the available styles.

Styles combine all the formatting function described in this page. They give fast access to the common used text formats. For example: Instead of changing individually: the font, its color, its background, its size user may simply pick a preferred style from the Style menu and start typing.

[[Image:CKEditor_style.png]] 

It is the best way to change the text look.

Example:

[[Image:CKEditor_example_style.png]] 

== Text Alignment ==

A paragraph of text can have its lines aligned to either of the sides of the document, as well as centered. User may also force the lines to take the entire space available in the document (like aligning to both sides at the same time).

To align your text at the left side of the editing area, press the [[Image:CKEditor_align_left.png]] button on the toolbar.

Example:

[[Image:CKEditor_example_align_left.png]]

If you wish instead to have the text aligned at the right side of the editing area, just press the [[Image:CKEditor_align_right.png]]button on the toolbar.

Example:

[[Image:CKEditor_example_align_right.png]]

In order to align your text it the center of the document, press the [[Image:CKEditor_align_center.png]]on your toolbar.

Example:

[[Image:CKEditor_example_align_center.png]]

The last option is the block alignment called "justify".To activate it press [[Image:CKEditor_justify.png]] on the toolbar. This function is similar to the left alignment. User also begin typing from the left side of the screen. The difference between these two option can be noted when writing several lines of text. Each one will have the same length even though they do not to have the same amount of characters. The lines will just expand and the text will be equally long so that the lines will end in the same place.

Example:

[[Image:AlignmentB example.png|Image:AlignmentB_example.png]]

== Paragraph (Block) Format ==

Another very important function which is used a lot during formatting is Format menu located in the toolbar: 

[[Image:CKEditor_format_menu.png]]

A format is utilized to organize your text and to distinguish different parts of your text. For example if you want to start a new chapter or to put different categories and subcategories you use the format menu and choose different headings.

Example:

[[Image:CKEditor_example_format.png]]

You may noticed that this document includes headings as well. Fonts, Layout and format, Styles are all headings used to divide this document into categories.

== Fonts ==

Fonts are style of writing. Fonts determine how the letters of the text look like. The most common used fonts are "Times New Roman" and "Arial". People use them in most documents created all over the world. You may say that they are very official fonts used in formal documents. In order to set a different font in the document you need to access the font menu in your toolbar and choose a font you would like to use.

[[Image:CKEditor_font_menu.png]] 

Example:

[[Image:CKEditor_example_font.png]]

You can easily create a document that looks bad or difficult to read. Therefore we encourage you to avoid overusing this feature. Give preference to the [[#Styles|Styles]] menu instead. Styles have been precisely designed by your web side developer and make document more legible. 

== Text Size ==
To change the font size open the "Size" menu in the toolbar. A range of sizes which were defined by web site developer will be display. Choose one of the options in order to change font seize.

[[Image:CKEditor_size_menu.png]] 

Example: 

[[Image:CKEditor_fontsize_example.png]] 

As you may see CKEditor offers a big variety of sizes.

== Colors ==

User is able to change the text color or the background color in the text in order to make it different and interesting.

If you wish to change color of the text press the text color button [[Image:CKEditor_textcolor.png]]. Several colors will appear in a menu. If you are not satisfied with the available colors in that panel click "'''More colors...'''". 

To choose the color you would like to use, just click on it.

[[Image:CKEditor_color_menu.png]] 

Example:

[[Image:CKEditor_example_color.png]]

You may also change the text background color using the [[Image:CKEditor_bgcolor.png]] button. You will find a range of colors the same ones as in the text color. Click on the color you want to choose.

Example:

[[Image:CKEditor_example_bgcolor.png]]

You may also mix the colors of your text and the background. 

== Subscript and Superscript ==

Subscript and superscript are usually used for mathematical needs. Subscript is a way to put an index to a letter or to a number. The subscript has a smaller font than the normal text. To activate subscript you must press the [[Image:CKEditor_subscript.png]] button on the toolbar.

Example:

[[Image:CKEditor_example_subscript.png]]

As you can see you can use either a number in a subscript or a text.

The superscript work in the same way as the subscript but instead of placing the index in the bottom you place it in the top. This function is usually used in mathematical equations to write the "to the power of" function. You can access it from the toolbar using the [[Image:CKEditor_superscript.png‎]] button 

Example:

[[Image:CKEditor_example_superscript.png]]

You can also mix these two functions:

Example:

[[Image:CKEditor_example_mix.png]]

CKEditor 3.x/Users Guide/Keyboard Shortcuts

2010-09-13T06:02:43Z

Magdalena.stachnik:

Many functions in the CKEditor have their keyboard keystrokes. This is one of the reasons why working with the editor is simple and faster.

An alphabetical list located below contains all available keyboard shortcuts:

* '''CTRL+A''' highlights the whole editing area
* '''CTRL+B''' changes your font to '''bold'''.
* '''CTRL+C''' copies the highlighted area to the clipboard. 
* '''CTRL+I''' changes your font to ''italic''.
* '''CTRL+L''' opens the Link window.
* '''CTRL+SHIFT+S''' saves the document.
* '''CTRL+U''' changes your font to underlined.
* '''CTRL+''V''''' or '''SHIFT+INSERT''' pastes the data from the clipboard
* '''CTRL+X''' or '''SHIFT+DELETE''' cuts the highlighted area.
* '''CTRL+Y '''or '''CTRL+SHITF+Z''' starts the redo function.
* '''CTRL+Z''' starts the undo function.
* '''CTRL+ALT+ENTER''' fits the editor in the browsers window.

CKEditor 3.x/Users Guide/Rich Text

2010-09-13T05:48:30Z

Magdalena.stachnik:

This section describes most of the important tasks available in CKEditor. This part instructs step by step how to utilize them so that working on word processing could be easier and pleasant.

Tasks specifications are available below or User may access them from the main page.

* [[CKEditor_ 3.x/Users Guide/Common Tasks/Writing|Writing]]
* [[CKEditor_ 3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]
* [[CKEditor_3.x/Users Guide/Common Tasks/Templates|Templates]]
* [[CKEditor_3.x/Users Guide/Common Tasks/Creating Lists|Creating Lists]]
* [[CKEditor_3.x/Users Guide/Common Tasks/Links, E-Mails and Anchors|Links, E-Mails and Anchors]]
* [[CKEditor_3.x/Users Guide/Common Tasks/Inserting Images|Inserting Images]]
* [[CKEditor_3.x/Users Guide/Common Tasks/Inserting Flash|Inserting Flash]]
* [[CKEditor_3.x/Users Guide/Common Tasks/Tables|Tables]]
* [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]

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

2010-09-13T05:48:01Z

Magdalena.stachnik:

Dialogs are the small windows which pop-out when User activates some functions like e.g.: paste, paste a text, find and replace etc. They also provide more options of the particular function. The example of the dialog window is present below.

[[Image: CKEditor_dialog_window.png]]

When any dialog window is open, operations in the main window are blocked. After it is closed main window is available again. Dialogs box are not uniform, their appearance depends on what features User decides to use.

CKEditor 3.x/Users Guide/Interface/Context Menu

2010-09-13T05:44:47Z

Magdalena.stachnik:

The '''context menu''' is very useful tool. It is a menu which appears after User activates the right button of mouse anywhere inside the [[CKEditor_3.x/Users_Guide/Interface/Editing Area|Editing Area]] anywhere on the existing object.

Example:

[[Image:CKEditor_context_menu.png]] 

 

The menu is '''context sensitive''', which means that available menu depends on where (on which place of the program) user clicks. For example, the following options appear if user clicks inside a table: 

[[Image:CKEditor_contextmenu_table.png]] 

To execute available options the menu item needs to be pressed only once. Please notice that some functions may not be available. For example, the cut and the copy options will not work unless the text is not highlighted.

CKEditor 3.x/Users Guide/Interface

2010-09-13T05:41:09Z

Magdalena.stachnik:

CKEditor provides clear and simple user’s interface. These Users who have ever worked on common desktop text editors like MS Word or Open Office will recognize that CKEditor’s interface is not much different.

[[Image: CKEditor_interface.png]]

It contains four primary elements:

* [[CKEditor_3.x/Users Guide/Interface/Toolbar|Toolbar]] (1) - the section at the top of the editor, which contains many different buttons, used to activate the program’s functions. 
* [[CKEditor_3.x/Users Guide/Interface/Editing Area|Editing Area]] (2) - the area below the toolbar where user types the text in. 
* [[CKEditor_3.x/Users Guide/Interface/Context Menu|Context Menu]](3) - a menu with functions which appears after clicking the right button of the mouse inside the editing area. 
* [[CKEditor_3.x/Users Guide/Interface/Dialogs|Dialogs]] - small windows that appear when some of the functions are activated.

CKEditor 3.x/Users Guide/Interface/Editing Area

2010-09-13T05:28:43Z

Magdalena.stachnik:

The '''Editing Area''' is the space where user types the text in. It is also used to format the whole document.

[[Image:CKEditor_editing_area.png|frame|center|The CKEditor Editing Area]]

If the content of the document is longer than the available space a scroll bar will appear. The scrollbar allows going up and down through the entire text. User may also move inside the text with keyboard keys, for example PAGE UP, PAGE DOWN, HOME, END and ARROW KEYS. 

Other important and useful function that needs to be mentioned in this user guide is the text selection (also called text highlighted). To select the text, User need to press mouse’s left button, hold it and cover the text with the highlight. Text will remain selected even after releasing the button.

CKEditor 3.x/Users Guide/Interface/Toolbar

2010-09-13T05:23:38Z

Magdalena.stachnik:

The '''Toolbar''' is the section that activates editor’s features. Each toolbar’s button access a different function. Toolbar includes both simple functions (like basic text formatting) and more advanced features (like links and table creation).

[[Image:CKEditor_toolbar.png|frame|center|The CKEditor Toolbar]]

To acquaint with the toolbar’s '''buttons''' User must move mouse’s pointer over the button. It will project a small window with the name of the button. Clicking on the button executes its function. Users with more experience use them intuitively without reading the description.

CKEditor contains also toolbar combos (drop down boxes). The combos are the white areas with a little arrow on its side. User easily access combos by clicking on the white area or on the little arrow. Clicking the menu expand and enables user to choose from one of its options. To execute one of the options, it needs to be pressed.

User may also collapse toolbar by pressing [[Image:CKEditor_toolbar_rollup.png]]. After pressing this button more than once the toolbar will expand

CKEditor 3.x/Users Guide/Interface

2010-09-13T05:19:23Z

Magdalena.stachnik:

CKEditor provides a clean and simple user interface. It is familiar to a common desktop text editors like MS Word or Open Office. It helps Users to adjust really easy and fast.

CKEditor's interface is shown below:

[[Image: CKEditor_interface.png]]

It includes four distinct elements:

* [[CKEditor_3.x/Users Guide/Interface/Toolbar|Toolbar]] (1) - the area located at the top of the editor, which contains many different buttons. User utilizes these buttons in order to activate the program's functions. 
* [[CKEditor_3.x/Users Guide/Interface/Editing Area|Editing Area]] (2) - the area below the toolbar where user types the text in. 
* [[CKEditor_3.x/Users Guide/Interface/Context Menu|Context Menu]](3) - a menu with functions which appears after clicking the right button of the mouse inside the editing area. 
* [[CKEditor_3.x/Users Guide/Interface/Dialogs|Dialogs]] - small windows that appear when some of the functions are activated. Dialogs are also used to provide the necessary information to accomplish that function.

CKEditor 3.x/Users Guide/Quick Reference

2010-09-13T05:16:42Z

Magdalena.stachnik:

This section describes all functions available in the default CKEditor’s toolbar.

In order to download a file with a full description of the toolbar element’s functions click here (pdf file)

== Common Toolbar Functions ==

{| cellspacing="0" cellpadding="3" border="1"
|-
| nowrap="nowrap" align="center" | '''Toolbar Element''' 
| '''Function'''
|-
| align="center" | [[Image:CKEditor_source.png]] 
| View or edit the document source code (for advanced users). See [[CKEditor 3.x/Users Guide/Source Editor|Source Editor]]. 
|-
| align="center" | [[Image:CKEditor_save.gif]]
| Saves the page you were editing.
|-
| align="center" | [[Image:CKEditor_new.png]]
| Removes all contentes, creating a new blank page.
|-
| align="center" | [[Image:CKEditor_preview.png]] 
| Preview what the HTML page will look like for users. 
|-
| align="center" | [[Image:CKEditor_templates.png]] 
| Select a layout template. See [[CKEditor_3.x/Users Guide/Common Tasks/Templates|Templates]] 
|-
| align="center" | [[Image:CKEditor_cut.png]] 
| Cut the highlighted text to the clipboard. See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_copy.png]] 
| Copy the highlighted text to the clipboard. See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_paste.png]][[Image:CKEditor_paste_text.png]] 
| Paste the data copied to the clipboard (with or without formatting). See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_paste_word.png]] 
| Paste content copied from Microsoft Word or similar applications. See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_print.gif]] 
| Print the current document. See [[CKEditor_3.x/Users Guide/Other Tasks/Printing|Printing]]. 
|-
| align="center" | [[Image:CKEditor_checkspell.png]][[Image:CKEditor_SCAYT.png]] 
| Spell check the text in the document or spell check the text as you type. See [[CKEditor_3.x/Users Guide/Other Tasks/Spell Checking|Spell Checking]]. 

|-
| align="center" | [[Image:CKEditor_undo.png]][[Image:CKEditor_redo.png]] 
| Undo or redo the most recent action taken. See [[CKEditor_3.x/Users Guide/Other Tasks/Undo and Redo|Undo and Redo]]. 
|-
| align="center" | [[Image:CKEditor_find.png]] 
| Find a word or phrase within the document. See [[CKEditor_3.x/Users Guide/Other Tasks/Find and Replace|Find and Replace]]. 
|-
| align="center" | [[Image:CKEditor_find_replace..png]] 
| Find and replace a word or phrase within the document. See [[CKEditor_3.x/Users Guide/Other Tasks/Find and Replace|Find and Replace]]. 
|-
| align="center" | [[Image:CKEditor_select_all.png]] 
| Select the entire content in the document. 
|-
| align="center" | [[Image:CKEditor_remove_format.png]] 
| Remove the formatting from the highlighted text. 
|-
| align="center" | [[Image:CKEditor_bold.png]][[Image:CKEditor_italic.png]][[Image:CKEditor_underline.png]][[Image:CKEditor_strikethough.png]] 
| Applies '''bold''', ''italic'', underscore or <strike>strikethrough</strike> formatting to the highlighted text.See [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_subscript.png]][[Image:CKEditor_superscript.png]] 
| Superscript or subscript the highlighted text.See Superscript and subscript in [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_insertorderlist.png]][[Image:CKEditor_insertunorderedlist.png]]
| Creates numbered or bulleted lists. See [[CKEditor_3.x/Users Guide/Common Tasks/Creating Lists|Creating Lists]]. 
|-
| align="center" | [[Image:CKEditor_outdent.png]][[Image:CKEditor_indent.png]]
| Increase or decrease the text indentation. 
|-
| align="center" | [[Image:CKEditor_blokquote.png]] 
| Format a block of text to identify quotations (text provenient from other sources). 
|-
| align="center" | [[Image:CKEditor_div_container.png]] 
| Create a new div container in document source. 
|-
| align="center" | [[Image:CKEditor_align_left.png]][[Image:CKEditor_align_center.png]][[Image:CKEditor_align_right.png]][[Image:CKEditor_justify.png‎]]
| Sets the text alignment (left, centered, right or justified). See Text layout and format in [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_text_direction_left.png]][[Image:CKEditor_text_direction_right.png]]
| Sets the text direction from left to right or from right to left. 
|-
| align="center" | [[Image:CKEditor_link.png]][[Image:CKEditor_unlink.png]]
| Converts or removes the text in hyperlinks. It may also by used to manage file uploads and links to files on the web server. See [[CKEditor_3.x/Users Guide/Common Tasks/Links, E-Mails and Anchors|Links, E-Mails and Anchors]]. 

|-
| align="center" | [[Image:CKEditor_anchors.png]]
| Inserts or modifies a link anchor. See [[CKEditor_3.x/Users Guide/Common Tasks/Links, E-Mails and Anchors|Links, E-Mails and Anchors]]
|-
| align="center" | [[Image:CKEditor_image.png]]
| Inserts images into the document. See [[CKEditor_3.x/Users Guide/Common Tasks/Inserting Images|Inserting Images]]. 
|-
| align="center" | [[Image:CKEditor_flash.png]]
| Inserts a Adobe Flash element into the page. See [[CKEditor_3.x/Users Guide/Common Tasks/Inserting Flash|Inserting Flash]]
|-
| align="center" | [[Image:CKEditor_table.png]]
| Creates a table with the defined number of columns and rows. See [[CKEditor_3.x/Users Guide/Common Tasks/Tables|Tables]]. 
|-
| align="center" | [[Image:CKEditor_horizontal_line.png]]
| Inserts a divider line (horizontal rule). 
|-
| align="center" | [[Image:CKEditor_smiley.png]]
| Inserts an emoticons image (smiley faces, email icon, lightbulb, etc.). 
|-
| align="center" | [[Image:CKEditor_specialchar.png]]
| Inserts special characters. 
|-
| align="center" | [[Image:CKEditor_pagebreak.png]]
| Inserts a printing page break. Only impacts printed version. 
|-
| align="center" | [[Image:CKEditor_styles.png]]
| Styles & formatting determine the appearance and semantic value of your document. You may use the drop down boxes to apply styles, set the font, its size, etc. To remove the applied style select the style name again. See [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_textcolor.png]]
| Changes the color of the text. See[[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_bgcolor.png]]
| Changes the background color of the text. See[[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_maximize.png]]
| Maximizes the editor size inside the browser.
|-
| align="center" | [[Image:CKEditor_show blocks.png]]
| Shows the block elements boundaries in the text.
|-
| align="center" | [[Image:CKEditor_about.png]]
| Shows information about the CKEditor.
|}

== Form Functions ==

{| cellspacing="0" cellpadding="3" border="1"
|-
| nowrap="nowrap" align="center" | '''Toolbar Element''' 
| '''Function'''
|-
| align="center" | [[Image:CKEditor_form.png]]
| Creates a new form block into the page. 
|-
| align="center" | [[Image:CKEditor_checkbox.png]]
| Inserts a checkbox to the page.
|-
| align="center" | [[Image:CKEditor_radiobutton.png]]
| Inserts a radio button to the page.
|-
| align="center" | [[Image:CKEditor_textfield.png]] 
| Inserts a text field into the page. 
|-
| align="center" | [[Image:CKEditor_textarea.png]]
| Inserts a multi-line text area into the page.
|-
| align="center" | [[Image:CKEditor_selection_field.png]] 
| Inserts a selection field into the page. 
|-
| align="center" | [[Image:CKEditor_button.png]] 
| Inserts a form button into the page. 
|-
| align="center" | [[Image:CKEditor_button_image.png]]
| Inserts an image into the page, which behaves much like form button used to submit forms. Do not use it to insert plain images into the document. 
|-
| align="center" | [[Image:CKEditor_hidden.png]] 
| Inserts a hidden field into the page. 
|}

CKEditor 3.x/Users Guide/Introduction

2010-09-13T05:15:43Z

Magdalena.stachnik:

User’s Guide is a documentation which includes all necessary information about The CKEditor and its features. It is meant for all users and has been created in a simple language. The purpose of this guide is to explain how the program works and to teach about all its functions. 

== Navigation ==

The guide was design in a legible way. It contains several sections which are accessible through the [[CKEditor_3.x/Users Guide|Table of Contents]]. 

Each section includes detailed explanation of CKEditor’s functions or tasks. At the top of the page links are located. Links help to return back to the main page or to any other pages.

Example:

[[Image:CKEditor_goback_example.png]]

Some pages were divided into subsections, which explain additional function or group of functions. All available subsections are listed at the top of all pages. 

Example:

[[Image:CKEditor_content_example.png]] 

Clicking one of the items moves the page to the related subsection. 

== Examples ==

This document should help every User to understand how CKEditor operates. That is why a screenshot and an example come with almost every explained function. The examples are always placed in a framed box with the "Example:" word before it.

Example:

[[Image:Example window.png|Image:Example_window.png]]

== Important Notice ==

CKEditor is extremely configurable and its functions are customized by the developer or by the system administrator. Please notice that not all of the functions described in the User's Guide may be available at owned installation. Some of the functions may not be found in the guide due to system’s customizations.

The editor interface can be different in its colors, icons and formats as well. This guide is based on the default editor interface.

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

2010-09-10T13:54:33Z

Magdalena.stachnik:

== Creating a table ==

If you want to create a table in CKEditor you must press the "Insert/Edit Table" [[Image:CKEditor_table.png‎]]button on the toolbar. 

After that a pop up window called "Table Properties" will appear. It incudes two bookmarks. 

 

=== Table Properties ===

[[Image:CKEditor_table_popup.png|Table properties]] 

* '''Rows''': in this field user specify number of rows in the table. 
* '''Columns''': specifies number of columns in the table. 
* '''Width''': sets the width of the table in pixels or percentage. E.g. Choosing 40 percent table takes 40% of the editing area width. 
* '''"Height''': sets the height of the table in pixels. 
* '''Headers''': specifies how headers will look like. User may choose following option "First Line", "First column", "Both". 
* '''Border size''': sets the thickness of the tables border. 
* '''Alignment''': specifies the alignment of the table. Three options available: left, center and right. 
* '''Cell spacing''': specifies thickness of the cell’s border.
* '''Cell padding''': sets the hight of the cell.
* '''Caption''': specifies the title of the table. The title appears in the top of the table.
* '''Summary''': sets a comment on the table.The comment does not appear in the table.

Not all options are required to build a table. User is asked to fill only Rows and Columns. Filling the rest of the fields is optional. It may be used or not, depending on User’s needs.

=== Advanced ===

The second bookmarks refers to "Advanced": 

[[Image:CKEditor_table_advanced.png]]

This bookmark allows user to set following option:

* '''Id''': specifies link's ID.
* '''Language Direction''': sets the language direction from left to right (LTR)or from right to left ( RTL ).
* '''Style''': defines the style.
* '''Stylesheet Classes''': specifies the name of the CSS class.

== Working with the table ==

User is able to change table’s properties. To modify table user must point mouse on the table and press the right button to display a context menu.. 

[[Image:CKEditor_context_table.png]]

In order to change the tables’ properties "'''Table Properties'''" should be pressed. A popup window appears. Identical to the one which is used for creating the table.

To delete the table press "'''Delete Table'''".

The other three options are Cell, Row and Column. Pointing with mouse cursor on one of them shows a new context menu.

=== Cell ===

[[Image:CKEditor_cell_context.png|The cell context menu]]

* '''Insert Cell Before''': inserts a new cell before the cell where the cursor was located. 
* '''Insert Cell After''': inserts a new cell after the cell where the cursor was located.
* '''Delete Cells''': deletes a cell the cursor was by. User may also highlight more cells and delete them.
* '''Merge Cells''': merges cells you have highlighted into a one cell.
* '''Merge Right''': merges cell where the cursor was located with the right cell.
* '''Merge Down''': merges cell where the cursor was located with cell below.
* '''Split Cell Horizontally''': splits a cell in two. One cell is split into two columns. 
* '''Split Cell Vertically''': splits a cell in two. One cell is split into two rows.
* '''Cell properties''': Clicking the cell properties displays a new popup window called "Cell Properties". :

 

[[Image:CKEditor_cell_properties.png]] 

* '''Width''': sets the cell width in pixels or in percentage of the table width.
* '''Height''': sets the height of the cell. 
* '''Word Wrap''': turns on/off word wrapping.
* '''Horizontal Alignment''':determines the horizontal alignment of the text in a cell. Three options are available: Left, Center and Right.
* '''Vertical Alignment''': determines the vertical alignment of the text in a cell, which may be set to Top, Middle, Bottom or Baseline.
* '''Cell Type''': determines the type of cell, user may set Data cell or Header cell.
* '''Rows span''': extends vertical rows.
* '''Columns span''':extends cells on a horizontal row (left and right).
* '''Background color''': sets the background color of a cell. User may either select a color or type it manually.
* '''Border Color''': sets the color of your cells border. User may either select a color or type it manually.

=== Row ===

[[Image:CKEditor_row_context.png]]

* '''Insert Row Before''': inserts a new row before the row where the cursor was located.
* '''Insert Row After''': inserts a new row after the row where the cursor was located.
* '''Delete Rows''': deletes highlighted rows or the row the cursor was by.

=== Column ===

[[Image:CKEditor_column_context.png]] 

* '''Insert Column Before''': inserts a column before the column where the cursor was located.
* '''Insert Column After''': inserts a column after the column where the cursor was located.
* '''Delete Columns''': deletes highlighted columns or the column the cursor was by.

CKEditor 3.x/Users Guide/Document/Cut, Copy and Paste

2010-09-10T13:32:38Z

Magdalena.stachnik:

__TOC__
== Cut ==

In order to begin cutting the text, the fragment should be firstly highlighted. CKEditor enables User three methods to cut the text. 

# by pressing the [[Image:CKEditor_cut.png]]button on the toolbar. 
# by pressing the right mouse button on the highlighted area. Choose cut, after context menu will appear. 
# by pressing the combination of CTRL+X keys. 

== Copy ==
User may utilizes one of three ways to copy a highlighted area. 

# by pressing the [[Image:CKEditor_copy.png]]button on the toolbar. 
# by pressing the right mouse button on the highlighted area. Choose copy, after context menu is shown. 
# by pressing the combination of CTRL+C keys. 

== Paste ==

CKEditor offers three options to paste into the text: 

# by pressing the combination of CTRL+V keys or pressing [[Image:CKEditor_paste.png]] on the toolbar. This option will paste data from your clipboard. Depends on security settings placed in user’s browser the editor may or may not be able to paste the date directly from a clipboard. In case of failure a popup window will appear with instruction what should be done next. [[Image:CKEditor_paste_window.png]] 
# by pressing [[Image:CKEditor_paste_text.png]]. This option enables user to paste plain text which user should first paste inside the following box by using the combination of CTRL+V keys. [[Image:CKEditor_pasttext_window.png]] 
# by pressing [[Image:CKEditor_paste_word.png]]. This option enables user pasting a text previously written in MS Word editor. To paste the text just press CTRL+V key combination on your keyboard. [[Image:CKEditor_pasteword_window.png]]

CKEditor 3.x/Users Guide/Rich Text

2010-09-10T11:04:02Z

Magdalena.stachnik:

This section describes most of the important tasks available in CKEditor. It instructs step by step how to utilize them so that working on word processing could be easier and pleasant.

Tasks specifications are available below or User may access them from the main page.

* [[CKEditor_ 3.x/Users Guide/Common Tasks/Writing|Writing]]
* [[CKEditor_ 3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]
* [[CKEditor_3.x/Users Guide/Common Tasks/Templates|Templates]]
* [[CKEditor_3.x/Users Guide/Common Tasks/Creating Lists|Creating Lists]]
* [[CKEditor_3.x/Users Guide/Common Tasks/Links, E-Mails and Anchors|Links, E-Mails and Anchors]]
* [[CKEditor_3.x/Users Guide/Common Tasks/Inserting Images|Inserting Images]]
* [[CKEditor_3.x/Users Guide/Common Tasks/Inserting Flash|Inserting Flash]]
* [[CKEditor_3.x/Users Guide/Common Tasks/Tables|Tables]]
* [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]

CKEditor 3.x/Users Guide/Document/Templates

2010-09-10T10:57:05Z

Magdalena.stachnik:

A template is CKEditor's function which allows user to change the page layout, style and to organizee user's document better.In order to activate it press [[Image:CKEditor_templates.png]] button on the toolbar. A pop up window called "Content Templates" will appear:

[[Image:CKEditor_templates_window.png]]

* '''Image and Title''': one main image with a title and text that surround the image.
* '''Strange Template''': a template that defines two columns, each one with title, and some text.
* '''Text and Table''': a title with some text and a table.

'''Replace actual contents''': If user checks this option, current content will be replace by the new one.

If you chose a template double-click on it and it will appear in your document.

Example:

[[Image:CKEditor_templetes_example.png]]

CKEditor 3.x/Users Guide/Document/Find and Replace

2010-09-10T10:37:52Z

Magdalena.stachnik:

__TOC__
== Find ==

To find a phrase/word in the text user may press [[Image:CKEditor_find.png]] button on the toolbar. A popup window called "Find and Replace" will appear: 

[[Image:CKEditor_find_window.png]] 

* '''Find what''': in this field you put the phrase/word you would like to find. 
* '''Match case''': if you check this option the program will find only the text with the exact cases like e.g. aLberT 
* '''Match whole word''': if you check this option CKEditor will only look for a whole word. It will not look for a phrase. 
* '''Match cyclic''': if you check this option, when the program reaches the end of the text it begins searching from the top of the text.

After you select options you would like to use press “Find”. The program will highlight search results. If you press "'''Find'''" again CKEditor will find the next phrase/word matching to your request. 

== Replace==

To replace a phrase/word in your text press [[Image:CKEditor_find_replace..png]] button on the toolbar. A popup window will appear: 

[[Image:CKEditor_replace_window.png]] 

* '''Find what''': in this field you place the phrase/word you would like to find 
* '''Replace with''': in this field you place the phrase/word you would like replace your text with. 
* '''Match case''': if you check this option CKEditor will find only the text with the exact cases like e.g. aLberT
* '''Match whole word''': if you check this option the program will only look for a whole word. It will not look for a phrase.
* '''Match cyclic''': if you check this option, when CKEditor reaches the end of the text it begins searching from the top of the text.
 

To replace only one phrase/word press "'''Replace'''". CKEditor will find and highlight the text. In order to continue a replacement process, press the "'''Replace'''" button again 
To replace all the phrases/words press "'''Replace All'''".

CKEditor 3.x/Users Guide/Document/Find and Replace

2010-09-10T10:36:37Z

Magdalena.stachnik:

__TOC__
== Find ==

To find a phrase/word in the text user may press [[Image:CKEditor_find.png]] button on the toolbar. A popup window called "Find and Replace" will appear: 

[[Image:CKEditor_find_window.png]] 

* '''Find what''': in this field you put the phrase/word you would like to find. 
* '''Match case''': if you check this option the program will find only the text with the exact cases like e.g. aLberT 
* '''Match whole word''': if you check this option CKEditor will only look for a whole word. It will not look for a phrase. 
* '''Match cyclic''': if you check this option, when the program reaches the end of the text it begins searching from the top of the text.

After you select options you would like to use press “Find”. The program will highlight search results. If you press "'''Find'''" again CKEditor will find the next phrase/word matching to your request. 

== Replace==

To replace a phrase/word in your text press [[Image:CKEditor_find_replace..png]] button on the toolbar. A popup window will appear: 

[[Image:CKEditor_replace_window.png]] 

* '''Find what''': in this field you place the phrase/word you would like to find 
* '''Replace with''': in this field you place the phrase/word you would like replace your text with. 
* '''Match case''': if you check this option CKEditor will find only the text with the exact cases like e.g. aLberT
* '''Match whole word''': if you check this option the program will only look for a whole word. It will not look for a phrase.
* '''Match cyclic''': if you check this option, when CKEditor reaches the end of the text it begins searching from the top of the text.
 

To replace only one phrase/word press "'''Replace'''". The program will find and highlight the text. In order to continue a replacement process, press the "'''Replace'''" button again 
To replace all the phrases/words press "'''Replace All'''".

CKEditor 3.x/Users Guide/Document/Undo and Redo

2010-09-10T09:44:25Z

Magdalena.stachnik:

== Undo ==

CKEditor contains many useful function for example undo and redo function.
"undo" function is useful when user needs to cancel previous changes. 

You can activate the "undo" function in two ways: 

# by pressing the [[Image:CKEditor_undo.png]]button on the toolbar.
# by pressing the combination of CTRL+Z on the keyboard.

After user activates the function it will go back to the last change that had been made e.g.: You have written a whole chapter in your text, highlighted it and then deleted it accidently. In order to restore it user may activate the "Undo" function which will take you back to the moment when the chapter was highlighted but has not been deleted yet. This option allows user to go as many steps back as desired.

== Redo ==

If "undo" function was used and for any reason user wish to go back to the state before the undo, the redo function may be used. In order to activate redo option, [[Image:CKEditor_redo.png]] button on the toolbar.

CKEditor 3.x/Users Guide/Spell Checking

2010-09-10T08:55:36Z

Magdalena.stachnik: /* Language */

Spell checking is a CKEditor's function which helps user to find the mistakes which are made while typing. User may notice that this function depends on the editors’ settings, version and could be different than shown below. CKEditor provides two option of spell checking: Spell checking in pop up window and Spell checking as you type 

== Spell Check ==
To activate the function of spell checking in pop up window simply press [[Image:CKEditor_checkspell.png]] on your toolbar. A popup window called "Spell Check" will appear: 

[[Image:CKEditor_spellcheck_popup.png‎]] 

Appearence of Spell Check window may be different in a hosted and licensed version SpellChecker.

The window contains two bookmarks "'''SpellChecker'''" and "'''Thesaurus'''".

In the upper right corner of the "'''SpellChecker'''" " you may choose which language you would like to use to spell checking. User's text is placed in middle section of the pop up window and Incorrect words are underlined. First incorrect word will appear in the field called "'''Change to'''". You may ignore one mistake by pressing "'''Ignore'''" or all of them by choosing "'''Ignore All'''".

In order to correct the mistake:: 

1. Use the list from "'''Suggestions'''" field to choose the correct word you have in mind. Selected word will appear in "'''Change to'''". field. In case when needed word is not on the list you may type it into the field "'''Change to:'''"

2. Press "'''Change to'''" ". Underlined word will be replaced with the correct one. If you wish to correct the same mistake in the whole text press "'''Change All'''". 

3. Underlined word can be added to the dictionary by pressing "'''Add'''" button. SpellChecker will recognize this word after this action and will not underline it anymore.

In order to change the option of Spell Checking user should press "'''Option'''" button. The pop-up window called "Spell checking options" will appear.

[[Image:CKEditor_spellchecking_option.png‎]]

Spell checking option allows User to set following:

* '''Ignore All-Caps Words''': Check this option if you wish to ignore Words that contains only capital letter, during spell checking.
* '''Ignore Words with Numers'''": Check this option if you wish to ignore Words with Numbers , during spell checking.
* '''Ignore Words with Mixed Case''': Check this option if you wish to ignore Word with capital and un capital letters , during spell checking.
* '''Ignore Domain Names''': Check this option if you wish to ignore a name of domain when spell checking.

Program also enables to create, delete, rename, restore User dictionary (this option is available only in hosted or licensed version of Spell Checker). To create User's dictionary you need to fill the "Dictionary name:" field and continue by pressing „Create" button. You may also delete, rename, restore dictionary the same way as explained above.

If setting the options is finished you need to press "'''Ok'''" button to save latest changes. In order to exit Spell Checking option press "Finish Checking" button or "Cancel" button.

=== Theaurus ===

To activate the Theaurus function press "'''Theaurus'''". A "'''Theaurus'''" bookmark will appear:

[[Image:CKEditor_spellcheck_thesaurus.png]] 

In the upper right corner of the "Thesaurus" you may choose which language you would like to use to find synonyms. A Middle section of pop up window contain user's text. If synonyms of the particular word are found, the dictionary will underline the word.

To find synonym of the word user need to click the underlined word. In field "Change to:" appears first synonym of this particular word.
Then choose the categories of the word from the field "'''Categories'''” which is connected with "'''Synonyms'''" field where list of synonyms will shown. Selected synonym from the list will be displayed in field “Change to :“.In order to change the word with a selected synonym press the “'''Change to'''” button. To exit Check Spelling option press “'''Finish Checking'''” button or “Cancel” button.

== Spell Check As You Type ==

SpellCheckAsYouType (SCAYT) allows user to pick up and correct misspellings while typing. Misspelled words are underlined. To use this option Right-Click marked word and select a suggestion to replace the word with.

To active the function of Spell Checking as you type press [[Image:CKEditor_SCAYT.png]] on toolbar and choose "'''Enable SCAYT'''".

[[Image:CKEditor_checkspellastype_window.png]]

Pressing [[Image:CKEditor_SCAYT.png]] again will display a list of Spell Checking as You type settings. 

[[Image: CKEditor_scayt_options.png]]

There are four bookmarks: "'''Options'''", "'''Languages'''", "'''Dictionaries'''" and "'''About'''"

==== Options ====

To change option of Spell Checking As You Type choose "'''Options'''" from the list. A pop up window "Spell Check As You Type" will appear.

[[Image:CKEditor_SCAYT_option_window.png]]

In the "'''Options'''" bookmark we can set following:

* '''Ignore All-Caps Words''': Check this option if you wish to ignore Words that contains only capital letter, during spell checking.
* '''Ignore Domain Names''': Check this option if you wish to ignore a name of domain, during spell checking.
* '''Ignore Words with Mixed Case''': Check this option if you wish to ignore Word with capital and un capital letters, during spell checking.
* '''Ignore Words with Numers'''": Check this option if you wish to ignore Words with Numbers, during spell checking.

==== Language ====

In the "'''Language'''" bookmark user may choose which language will be used during spell checking.

[[Image: CKEditor_language.png]]

==== Dictionaries ====

"'''Dictionaries'''" bookmark allows User to create delete and rename dictionaries by filling "'''Dictionary name'''" field and pressing:

* "'''Create'''" button while creating,
*"'''Delete'''" button while selecting
*"'''Rename'''" button while renaming.

[[Image:CKEditor_checkspell_dictionary.png]]

==== About ====

Gives User the information about version of SpellChecker.

CKEditor 3.x/Users Guide/Spell Checking

2010-09-10T08:54:45Z

Magdalena.stachnik: /* Language */

Spell checking is a CKEditor's function which helps user to find the mistakes which are made while typing. User may notice that this function depends on the editors’ settings, version and could be different than shown below. CKEditor provides two option of spell checking: Spell checking in pop up window and Spell checking as you type 

== Spell Check ==
To activate the function of spell checking in pop up window simply press [[Image:CKEditor_checkspell.png]] on your toolbar. A popup window called "Spell Check" will appear: 

[[Image:CKEditor_spellcheck_popup.png‎]] 

Appearence of Spell Check window may be different in a hosted and licensed version SpellChecker.

The window contains two bookmarks "'''SpellChecker'''" and "'''Thesaurus'''".

In the upper right corner of the "'''SpellChecker'''" " you may choose which language you would like to use to spell checking. User's text is placed in middle section of the pop up window and Incorrect words are underlined. First incorrect word will appear in the field called "'''Change to'''". You may ignore one mistake by pressing "'''Ignore'''" or all of them by choosing "'''Ignore All'''".

In order to correct the mistake:: 

1. Use the list from "'''Suggestions'''" field to choose the correct word you have in mind. Selected word will appear in "'''Change to'''". field. In case when needed word is not on the list you may type it into the field "'''Change to:'''"

2. Press "'''Change to'''" ". Underlined word will be replaced with the correct one. If you wish to correct the same mistake in the whole text press "'''Change All'''". 

3. Underlined word can be added to the dictionary by pressing "'''Add'''" button. SpellChecker will recognize this word after this action and will not underline it anymore.

In order to change the option of Spell Checking user should press "'''Option'''" button. The pop-up window called "Spell checking options" will appear.

[[Image:CKEditor_spellchecking_option.png‎]]

Spell checking option allows User to set following:

* '''Ignore All-Caps Words''': Check this option if you wish to ignore Words that contains only capital letter, during spell checking.
* '''Ignore Words with Numers'''": Check this option if you wish to ignore Words with Numbers , during spell checking.
* '''Ignore Words with Mixed Case''': Check this option if you wish to ignore Word with capital and un capital letters , during spell checking.
* '''Ignore Domain Names''': Check this option if you wish to ignore a name of domain when spell checking.

Program also enables to create, delete, rename, restore User dictionary (this option is available only in hosted or licensed version of Spell Checker). To create User's dictionary you need to fill the "Dictionary name:" field and continue by pressing „Create" button. You may also delete, rename, restore dictionary the same way as explained above.

If setting the options is finished you need to press "'''Ok'''" button to save latest changes. In order to exit Spell Checking option press "Finish Checking" button or "Cancel" button.

=== Theaurus ===

To activate the Theaurus function press "'''Theaurus'''". A "'''Theaurus'''" bookmark will appear:

[[Image:CKEditor_spellcheck_thesaurus.png]] 

In the upper right corner of the "Thesaurus" you may choose which language you would like to use to find synonyms. A Middle section of pop up window contain user's text. If synonyms of the particular word are found, the dictionary will underline the word.

To find synonym of the word user need to click the underlined word. In field "Change to:" appears first synonym of this particular word.
Then choose the categories of the word from the field "'''Categories'''” which is connected with "'''Synonyms'''" field where list of synonyms will shown. Selected synonym from the list will be displayed in field “Change to :“.In order to change the word with a selected synonym press the “'''Change to'''” button. To exit Check Spelling option press “'''Finish Checking'''” button or “Cancel” button.

== Spell Check As You Type ==

SpellCheckAsYouType (SCAYT) allows user to pick up and correct misspellings while typing. Misspelled words are underlined. To use this option Right-Click marked word and select a suggestion to replace the word with.

To active the function of Spell Checking as you type press [[Image:CKEditor_SCAYT.png]] on toolbar and choose "'''Enable SCAYT'''".

[[Image:CKEditor_checkspellastype_window.png]]

Pressing [[Image:CKEditor_SCAYT.png]] again will display a list of Spell Checking as You type settings. 

[[Image: CKEditor_scayt_options.png]]

There are four bookmarks: "'''Options'''", "'''Languages'''", "'''Dictionaries'''" and "'''About'''"

==== Options ====

To change option of Spell Checking As You Type choose "'''Options'''" from the list. A pop up window "Spell Check As You Type" will appear.

[[Image:CKEditor_SCAYT_option_window.png]]

In the "'''Options'''" bookmark we can set following:

* '''Ignore All-Caps Words''': Check this option if you wish to ignore Words that contains only capital letter, during spell checking.
* '''Ignore Domain Names''': Check this option if you wish to ignore a name of domain, during spell checking.
* '''Ignore Words with Mixed Case''': Check this option if you wish to ignore Word with capital and un capital letters, during spell checking.
* '''Ignore Words with Numers'''": Check this option if you wish to ignore Words with Numbers, during spell checking.

==== Language ====

In the "'''Language'''" bookmark user may choose which language will be used to spell checking.

[[Image: CKEditor_language.png]]

==== Dictionaries ====

"'''Dictionaries'''" bookmark allows User to create delete and rename dictionaries by filling "'''Dictionary name'''" field and pressing:

* "'''Create'''" button while creating,
*"'''Delete'''" button while selecting
*"'''Rename'''" button while renaming.

[[Image:CKEditor_checkspell_dictionary.png]]

==== About ====

Gives User the information about version of SpellChecker.

CKEditor 3.x/Users Guide/Spell Checking

2010-09-10T08:53:54Z

Magdalena.stachnik:

Spell checking is a CKEditor's function which helps user to find the mistakes which are made while typing. User may notice that this function depends on the editors’ settings, version and could be different than shown below. CKEditor provides two option of spell checking: Spell checking in pop up window and Spell checking as you type 

== Spell Check ==
To activate the function of spell checking in pop up window simply press [[Image:CKEditor_checkspell.png]] on your toolbar. A popup window called "Spell Check" will appear: 

[[Image:CKEditor_spellcheck_popup.png‎]] 

Appearence of Spell Check window may be different in a hosted and licensed version SpellChecker.

The window contains two bookmarks "'''SpellChecker'''" and "'''Thesaurus'''".

In the upper right corner of the "'''SpellChecker'''" " you may choose which language you would like to use to spell checking. User's text is placed in middle section of the pop up window and Incorrect words are underlined. First incorrect word will appear in the field called "'''Change to'''". You may ignore one mistake by pressing "'''Ignore'''" or all of them by choosing "'''Ignore All'''".

In order to correct the mistake:: 

1. Use the list from "'''Suggestions'''" field to choose the correct word you have in mind. Selected word will appear in "'''Change to'''". field. In case when needed word is not on the list you may type it into the field "'''Change to:'''"

2. Press "'''Change to'''" ". Underlined word will be replaced with the correct one. If you wish to correct the same mistake in the whole text press "'''Change All'''". 

3. Underlined word can be added to the dictionary by pressing "'''Add'''" button. SpellChecker will recognize this word after this action and will not underline it anymore.

In order to change the option of Spell Checking user should press "'''Option'''" button. The pop-up window called "Spell checking options" will appear.

[[Image:CKEditor_spellchecking_option.png‎]]

Spell checking option allows User to set following:

* '''Ignore All-Caps Words''': Check this option if you wish to ignore Words that contains only capital letter, during spell checking.
* '''Ignore Words with Numers'''": Check this option if you wish to ignore Words with Numbers , during spell checking.
* '''Ignore Words with Mixed Case''': Check this option if you wish to ignore Word with capital and un capital letters , during spell checking.
* '''Ignore Domain Names''': Check this option if you wish to ignore a name of domain when spell checking.

Program also enables to create, delete, rename, restore User dictionary (this option is available only in hosted or licensed version of Spell Checker). To create User's dictionary you need to fill the "Dictionary name:" field and continue by pressing „Create" button. You may also delete, rename, restore dictionary the same way as explained above.

If setting the options is finished you need to press "'''Ok'''" button to save latest changes. In order to exit Spell Checking option press "Finish Checking" button or "Cancel" button.

=== Theaurus ===

To activate the Theaurus function press "'''Theaurus'''". A "'''Theaurus'''" bookmark will appear:

[[Image:CKEditor_spellcheck_thesaurus.png]] 

In the upper right corner of the "Thesaurus" you may choose which language you would like to use to find synonyms. A Middle section of pop up window contain user's text. If synonyms of the particular word are found, the dictionary will underline the word.

To find synonym of the word user need to click the underlined word. In field "Change to:" appears first synonym of this particular word.
Then choose the categories of the word from the field "'''Categories'''” which is connected with "'''Synonyms'''" field where list of synonyms will shown. Selected synonym from the list will be displayed in field “Change to :“.In order to change the word with a selected synonym press the “'''Change to'''” button. To exit Check Spelling option press “'''Finish Checking'''” button or “Cancel” button.

== Spell Check As You Type ==

SpellCheckAsYouType (SCAYT) allows user to pick up and correct misspellings while typing. Misspelled words are underlined. To use this option Right-Click marked word and select a suggestion to replace the word with.

To active the function of Spell Checking as you type press [[Image:CKEditor_SCAYT.png]] on toolbar and choose "'''Enable SCAYT'''".

[[Image:CKEditor_checkspellastype_window.png]]

Pressing [[Image:CKEditor_SCAYT.png]] again will display a list of Spell Checking as You type settings. 

[[Image: CKEditor_scayt_options.png]]

There are four bookmarks: "'''Options'''", "'''Languages'''", "'''Dictionaries'''" and "'''About'''"

==== Options ====

To change option of Spell Checking As You Type choose "'''Options'''" from the list. A pop up window "Spell Check As You Type" will appear.

[[Image:CKEditor_SCAYT_option_window.png]]

In the "'''Options'''" bookmark we can set following:

* '''Ignore All-Caps Words''': Check this option if you wish to ignore Words that contains only capital letter, during spell checking.
* '''Ignore Domain Names''': Check this option if you wish to ignore a name of domain, during spell checking.
* '''Ignore Words with Mixed Case''': Check this option if you wish to ignore Word with capital and un capital letters, during spell checking.
* '''Ignore Words with Numers'''": Check this option if you wish to ignore Words with Numbers, during spell checking.

==== Language ====

In a "'''Language'''" bookmark user may choose which language will be used to spell checking.

[[Image: CKEditor_language.png]]

==== Dictionaries ====

"'''Dictionaries'''" bookmark allows User to create delete and rename dictionaries by filling "'''Dictionary name'''" field and pressing:

* "'''Create'''" button while creating,
*"'''Delete'''" button while selecting
*"'''Rename'''" button while renaming.

[[Image:CKEditor_checkspell_dictionary.png]]

==== About ====

Gives User the information about version of SpellChecker.

CKEditor 3.x/Users Guide/Quick Reference

2010-09-09T14:02:01Z

Magdalena.stachnik:

This section contains a quick overview concerning all functions available in the default CKEditor toolbar. 

To download a file with a description of the toolbar element function as a pdf,
== Common Toolbar Functions ==

{| cellspacing="0" cellpadding="3" border="1"
|-
| nowrap="nowrap" align="center" | '''Toolbar Element''' 
| '''Function'''
|-
| align="center" | [[Image:CKEditor_source.png]] 
| View or edit the document source code (for advanced users). See [[CKEditor 3.x/Users Guide/Source Editor|Source Editor]]. 
|-
| align="center" | [[Image:CKEditor_save.gif]]
| Saves the page you were editing.
|-
| align="center" | [[Image:CKEditor_new.png]]
| Removes all contentes, creating a new blank page.
|-
| align="center" | [[Image:CKEditor_preview.png]] 
| Preview what the HTML page will look like for users. 
|-
| align="center" | [[Image:CKEditor_templates.png]] 
| Select a layout template. See [[CKEditor_3.x/Users Guide/Common Tasks/Templates|Templates]] 
|-
| align="center" | [[Image:CKEditor_cut.png]] 
| Cut the highlighted text to the clipboard. See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_copy.png]] 
| Copy the highlighted text to the clipboard. See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_paste.png]][[Image:CKEditor_paste_text.png]] 
| Paste the data copied to the clipboard (with or without formatting). See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_paste_word.png]] 
| Paste content copied from Microsoft Word or similar applications. See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_print.gif]] 
| Print the current document. See [[CKEditor_3.x/Users Guide/Other Tasks/Printing|Printing]]. 
|-
| align="center" | [[Image:CKEditor_checkspell.png]][[Image:CKEditor_SCAYT.png]] 
| Spell check the text in the document or spell check the text as you type. See [[CKEditor_3.x/Users Guide/Other Tasks/Spell Checking|Spell Checking]]. 

|-
| align="center" | [[Image:CKEditor_undo.png]][[Image:CKEditor_redo.png]] 
| Undo or redo the most recent action taken. See [[CKEditor_3.x/Users Guide/Other Tasks/Undo and Redo|Undo and Redo]]. 
|-
| align="center" | [[Image:CKEditor_find.png]] 
| Find a word or phrase within the document. See [[CKEditor_3.x/Users Guide/Other Tasks/Find and Replace|Find and Replace]]. 
|-
| align="center" | [[Image:CKEditor_find_replace..png]] 
| Find and replace a word or phrase within the document. See [[CKEditor_3.x/Users Guide/Other Tasks/Find and Replace|Find and Replace]]. 
|-
| align="center" | [[Image:CKEditor_select_all.png]] 
| Select the entire content in the document. 
|-
| align="center" | [[Image:CKEditor_remove_format.png]] 
| Remove the formatting from the highlighted text. 
|-
| align="center" | [[Image:CKEditor_bold.png]][[Image:CKEditor_italic.png]][[Image:CKEditor_underline.png]][[Image:CKEditor_strikethough.png]] 
| Applies '''bold''', ''italic'', underscore or <strike>strikethrough</strike> formatting to the highlighted text.See [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_subscript.png]][[Image:CKEditor_superscript.png]] 
| Superscript or subscript the highlighted text.See Superscript and subscript in [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_insertorderlist.png]][[Image:CKEditor_insertunorderedlist.png]]
| Creates numbered or bulleted lists. See [[CKEditor_3.x/Users Guide/Common Tasks/Creating Lists|Creating Lists]]. 
|-
| align="center" | [[Image:CKEditor_outdent.png]][[Image:CKEditor_indent.png]]
| Increase or decrease the text indentation. 
|-
| align="center" | [[Image:CKEditor_blokquote.png]] 
| Format a block of text to identify quotations (text provenient from other sources). 
|-
| align="center" | [[Image:CKEditor_div_container.png]] 
| Create a new div container in document source. 
|-
| align="center" | [[Image:CKEditor_align_left.png]][[Image:CKEditor_align_center.png]][[Image:CKEditor_align_right.png]][[Image:CKEditor_justify.png‎]]
| Sets the text alignment (left, centered, right or justified). See Text layout and format in [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_text_direction_left.png]][[Image:CKEditor_text_direction_right.png]]
| Sets the text direction from left to right or from right to left. 
|-
| align="center" | [[Image:CKEditor_link.png]][[Image:CKEditor_unlink.png]]
| Converts or removes the text in hyperlinks. It may also by used to manage file uploads and links to files on the web server. See [[CKEditor_3.x/Users Guide/Common Tasks/Links, E-Mails and Anchors|Links, E-Mails and Anchors]]. 

|-
| align="center" | [[Image:CKEditor_anchors.png]]
| Inserts or modifies a link anchor. See [[CKEditor_3.x/Users Guide/Common Tasks/Links, E-Mails and Anchors|Links, E-Mails and Anchors]]
|-
| align="center" | [[Image:CKEditor_image.png]]
| Inserts images into the document. See [[CKEditor_3.x/Users Guide/Common Tasks/Inserting Images|Inserting Images]]. 
|-
| align="center" | [[Image:CKEditor_flash.png]]
| Inserts a Adobe Flash element into the page. See [[CKEditor_3.x/Users Guide/Common Tasks/Inserting Flash|Inserting Flash]]
|-
| align="center" | [[Image:CKEditor_table.png]]
| Creates a table with the defined number of columns and rows. See [[CKEditor_3.x/Users Guide/Common Tasks/Tables|Tables]]. 
|-
| align="center" | [[Image:CKEditor_horizontal_line.png]]
| Inserts a divider line (horizontal rule). 
|-
| align="center" | [[Image:CKEditor_smiley.png]]
| Inserts an emoticons image (smiley faces, email icon, lightbulb, etc.). 
|-
| align="center" | [[Image:CKEditor_specialchar.png]]
| Inserts special characters. 
|-
| align="center" | [[Image:CKEditor_pagebreak.png]]
| Inserts a printing page break. Only impacts printed version. 
|-
| align="center" | [[Image:CKEditor_styles.png]]
| Styles & formatting determine the appearance and semantic value of your document. You may use the drop down boxes to apply styles, set the font, its size, etc. To remove the applied style select the style name again. See [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_textcolor.png]]
| Changes the color of the text. See[[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_bgcolor.png]]
| Changes the background color of the text. See[[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_maximize.png]]
| Maximizes the editor size inside the browser.
|-
| align="center" | [[Image:CKEditor_show blocks.png]]
| Shows the block elements boundaries in the text.
|-
| align="center" | [[Image:CKEditor_about.png]]
| Shows information about the CKEditor.
|}

== Form Functions ==

{| cellspacing="0" cellpadding="3" border="1"
|-
| nowrap="nowrap" align="center" | '''Toolbar Element''' 
| '''Function'''
|-
| align="center" | [[Image:CKEditor_form.png]]
| Creates a new form block into the page. 
|-
| align="center" | [[Image:CKEditor_checkbox.png]]
| Inserts a checkbox to the page.
|-
| align="center" | [[Image:CKEditor_radiobutton.png]]
| Inserts a radio button to the page.
|-
| align="center" | [[Image:CKEditor_textfield.png]] 
| Inserts a text field into the page. 
|-
| align="center" | [[Image:CKEditor_textarea.png]]
| Inserts a multi-line text area into the page.
|-
| align="center" | [[Image:CKEditor_selection_field.png]] 
| Inserts a selection field into the page. 
|-
| align="center" | [[Image:CKEditor_button.png]] 
| Inserts a form button into the page. 
|-
| align="center" | [[Image:CKEditor_button_image.png]]
| Inserts an image into the page, which behaves much like form button used to submit forms. Do not use it to insert plain images into the document. 
|-
| align="center" | [[Image:CKEditor_hidden.png]] 
| Inserts a hidden field into the page. 
|}

CKEditor 3.x/Users Guide/Quick Reference

2010-09-09T14:01:17Z

Magdalena.stachnik:

This section contains a quick overview concerning all functions available in the default CKEditor toolbar. 

To download a file with a description of the toolbar element function as a pdf, [[Click here|File:CKEditor_Toolbar.pdf]]

== Common Toolbar Functions ==

{| cellspacing="0" cellpadding="3" border="1"
|-
| nowrap="nowrap" align="center" | '''Toolbar Element''' 
| '''Function'''
|-
| align="center" | [[Image:CKEditor_source.png]] 
| View or edit the document source code (for advanced users). See [[CKEditor 3.x/Users Guide/Source Editor|Source Editor]]. 
|-
| align="center" | [[Image:CKEditor_save.gif]]
| Saves the page you were editing.
|-
| align="center" | [[Image:CKEditor_new.png]]
| Removes all contentes, creating a new blank page.
|-
| align="center" | [[Image:CKEditor_preview.png]] 
| Preview what the HTML page will look like for users. 
|-
| align="center" | [[Image:CKEditor_templates.png]] 
| Select a layout template. See [[CKEditor_3.x/Users Guide/Common Tasks/Templates|Templates]] 
|-
| align="center" | [[Image:CKEditor_cut.png]] 
| Cut the highlighted text to the clipboard. See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_copy.png]] 
| Copy the highlighted text to the clipboard. See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_paste.png]][[Image:CKEditor_paste_text.png]] 
| Paste the data copied to the clipboard (with or without formatting). See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_paste_word.png]] 
| Paste content copied from Microsoft Word or similar applications. See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_print.gif]] 
| Print the current document. See [[CKEditor_3.x/Users Guide/Other Tasks/Printing|Printing]]. 
|-
| align="center" | [[Image:CKEditor_checkspell.png]][[Image:CKEditor_SCAYT.png]] 
| Spell check the text in the document or spell check the text as you type. See [[CKEditor_3.x/Users Guide/Other Tasks/Spell Checking|Spell Checking]]. 

|-
| align="center" | [[Image:CKEditor_undo.png]][[Image:CKEditor_redo.png]] 
| Undo or redo the most recent action taken. See [[CKEditor_3.x/Users Guide/Other Tasks/Undo and Redo|Undo and Redo]]. 
|-
| align="center" | [[Image:CKEditor_find.png]] 
| Find a word or phrase within the document. See [[CKEditor_3.x/Users Guide/Other Tasks/Find and Replace|Find and Replace]]. 
|-
| align="center" | [[Image:CKEditor_find_replace..png]] 
| Find and replace a word or phrase within the document. See [[CKEditor_3.x/Users Guide/Other Tasks/Find and Replace|Find and Replace]]. 
|-
| align="center" | [[Image:CKEditor_select_all.png]] 
| Select the entire content in the document. 
|-
| align="center" | [[Image:CKEditor_remove_format.png]] 
| Remove the formatting from the highlighted text. 
|-
| align="center" | [[Image:CKEditor_bold.png]][[Image:CKEditor_italic.png]][[Image:CKEditor_underline.png]][[Image:CKEditor_strikethough.png]] 
| Applies '''bold''', ''italic'', underscore or <strike>strikethrough</strike> formatting to the highlighted text.See [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_subscript.png]][[Image:CKEditor_superscript.png]] 
| Superscript or subscript the highlighted text.See Superscript and subscript in [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_insertorderlist.png]][[Image:CKEditor_insertunorderedlist.png]]
| Creates numbered or bulleted lists. See [[CKEditor_3.x/Users Guide/Common Tasks/Creating Lists|Creating Lists]]. 
|-
| align="center" | [[Image:CKEditor_outdent.png]][[Image:CKEditor_indent.png]]
| Increase or decrease the text indentation. 
|-
| align="center" | [[Image:CKEditor_blokquote.png]] 
| Format a block of text to identify quotations (text provenient from other sources). 
|-
| align="center" | [[Image:CKEditor_div_container.png]] 
| Create a new div container in document source. 
|-
| align="center" | [[Image:CKEditor_align_left.png]][[Image:CKEditor_align_center.png]][[Image:CKEditor_align_right.png]][[Image:CKEditor_justify.png‎]]
| Sets the text alignment (left, centered, right or justified). See Text layout and format in [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_text_direction_left.png]][[Image:CKEditor_text_direction_right.png]]
| Sets the text direction from left to right or from right to left. 
|-
| align="center" | [[Image:CKEditor_link.png]][[Image:CKEditor_unlink.png]]
| Converts or removes the text in hyperlinks. It may also by used to manage file uploads and links to files on the web server. See [[CKEditor_3.x/Users Guide/Common Tasks/Links, E-Mails and Anchors|Links, E-Mails and Anchors]]. 

|-
| align="center" | [[Image:CKEditor_anchors.png]]
| Inserts or modifies a link anchor. See [[CKEditor_3.x/Users Guide/Common Tasks/Links, E-Mails and Anchors|Links, E-Mails and Anchors]]
|-
| align="center" | [[Image:CKEditor_image.png]]
| Inserts images into the document. See [[CKEditor_3.x/Users Guide/Common Tasks/Inserting Images|Inserting Images]]. 
|-
| align="center" | [[Image:CKEditor_flash.png]]
| Inserts a Adobe Flash element into the page. See [[CKEditor_3.x/Users Guide/Common Tasks/Inserting Flash|Inserting Flash]]
|-
| align="center" | [[Image:CKEditor_table.png]]
| Creates a table with the defined number of columns and rows. See [[CKEditor_3.x/Users Guide/Common Tasks/Tables|Tables]]. 
|-
| align="center" | [[Image:CKEditor_horizontal_line.png]]
| Inserts a divider line (horizontal rule). 
|-
| align="center" | [[Image:CKEditor_smiley.png]]
| Inserts an emoticons image (smiley faces, email icon, lightbulb, etc.). 
|-
| align="center" | [[Image:CKEditor_specialchar.png]]
| Inserts special characters. 
|-
| align="center" | [[Image:CKEditor_pagebreak.png]]
| Inserts a printing page break. Only impacts printed version. 
|-
| align="center" | [[Image:CKEditor_styles.png]]
| Styles & formatting determine the appearance and semantic value of your document. You may use the drop down boxes to apply styles, set the font, its size, etc. To remove the applied style select the style name again. See [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_textcolor.png]]
| Changes the color of the text. See[[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_bgcolor.png]]
| Changes the background color of the text. See[[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_maximize.png]]
| Maximizes the editor size inside the browser.
|-
| align="center" | [[Image:CKEditor_show blocks.png]]
| Shows the block elements boundaries in the text.
|-
| align="center" | [[Image:CKEditor_about.png]]
| Shows information about the CKEditor.
|}

== Form Functions ==

{| cellspacing="0" cellpadding="3" border="1"
|-
| nowrap="nowrap" align="center" | '''Toolbar Element''' 
| '''Function'''
|-
| align="center" | [[Image:CKEditor_form.png]]
| Creates a new form block into the page. 
|-
| align="center" | [[Image:CKEditor_checkbox.png]]
| Inserts a checkbox to the page.
|-
| align="center" | [[Image:CKEditor_radiobutton.png]]
| Inserts a radio button to the page.
|-
| align="center" | [[Image:CKEditor_textfield.png]] 
| Inserts a text field into the page. 
|-
| align="center" | [[Image:CKEditor_textarea.png]]
| Inserts a multi-line text area into the page.
|-
| align="center" | [[Image:CKEditor_selection_field.png]] 
| Inserts a selection field into the page. 
|-
| align="center" | [[Image:CKEditor_button.png]] 
| Inserts a form button into the page. 
|-
| align="center" | [[Image:CKEditor_button_image.png]]
| Inserts an image into the page, which behaves much like form button used to submit forms. Do not use it to insert plain images into the document. 
|-
| align="center" | [[Image:CKEditor_hidden.png]] 
| Inserts a hidden field into the page. 
|}

CKEditor 3.x/Users Guide/Quick Reference

2010-09-09T12:42:40Z

Magdalena.stachnik:

This section contains a quick overview concerning all functions available in the default CKEditor toolbar. 

To download a file with a description of the toolbar element function as a pdf, [[images/0/04/CKEditor_Toolbar.pdf| Click here]]

== Common Toolbar Functions ==

{| cellspacing="0" cellpadding="3" border="1"
|-
| nowrap="nowrap" align="center" | '''Toolbar Element''' 
| '''Function'''
|-
| align="center" | [[Image:CKEditor_source.png]] 
| View or edit the document source code (for advanced users). See [[CKEditor 3.x/Users Guide/Source Editor|Source Editor]]. 
|-
| align="center" | [[Image:CKEditor_save.gif]]
| Saves the page you were editing.
|-
| align="center" | [[Image:CKEditor_new.png]]
| Removes all contentes, creating a new blank page.
|-
| align="center" | [[Image:CKEditor_preview.png]] 
| Preview what the HTML page will look like for users. 
|-
| align="center" | [[Image:CKEditor_templates.png]] 
| Select a layout template. See [[CKEditor_3.x/Users Guide/Common Tasks/Templates|Templates]] 
|-
| align="center" | [[Image:CKEditor_cut.png]] 
| Cut the highlighted text to the clipboard. See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_copy.png]] 
| Copy the highlighted text to the clipboard. See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_paste.png]][[Image:CKEditor_paste_text.png]] 
| Paste the data copied to the clipboard (with or without formatting). See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_paste_word.png]] 
| Paste content copied from Microsoft Word or similar applications. See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_print.gif]] 
| Print the current document. See [[CKEditor_3.x/Users Guide/Other Tasks/Printing|Printing]]. 
|-
| align="center" | [[Image:CKEditor_checkspell.png]][[Image:CKEditor_SCAYT.png]] 
| Spell check the text in the document or spell check the text as you type. See [[CKEditor_3.x/Users Guide/Other Tasks/Spell Checking|Spell Checking]]. 

|-
| align="center" | [[Image:CKEditor_undo.png]][[Image:CKEditor_redo.png]] 
| Undo or redo the most recent action taken. See [[CKEditor_3.x/Users Guide/Other Tasks/Undo and Redo|Undo and Redo]]. 
|-
| align="center" | [[Image:CKEditor_find.png]] 
| Find a word or phrase within the document. See [[CKEditor_3.x/Users Guide/Other Tasks/Find and Replace|Find and Replace]]. 
|-
| align="center" | [[Image:CKEditor_find_replace..png]] 
| Find and replace a word or phrase within the document. See [[CKEditor_3.x/Users Guide/Other Tasks/Find and Replace|Find and Replace]]. 
|-
| align="center" | [[Image:CKEditor_select_all.png]] 
| Select the entire content in the document. 
|-
| align="center" | [[Image:CKEditor_remove_format.png]] 
| Remove the formatting from the highlighted text. 
|-
| align="center" | [[Image:CKEditor_bold.png]][[Image:CKEditor_italic.png]][[Image:CKEditor_underline.png]][[Image:CKEditor_strikethough.png]] 
| Applies '''bold''', ''italic'', underscore or <strike>strikethrough</strike> formatting to the highlighted text.See [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_subscript.png]][[Image:CKEditor_superscript.png]] 
| Superscript or subscript the highlighted text.See Superscript and subscript in [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_insertorderlist.png]][[Image:CKEditor_insertunorderedlist.png]]
| Creates numbered or bulleted lists. See [[CKEditor_3.x/Users Guide/Common Tasks/Creating Lists|Creating Lists]]. 
|-
| align="center" | [[Image:CKEditor_outdent.png]][[Image:CKEditor_indent.png]]
| Increase or decrease the text indentation. 
|-
| align="center" | [[Image:CKEditor_blokquote.png]] 
| Format a block of text to identify quotations (text provenient from other sources). 
|-
| align="center" | [[Image:CKEditor_div_container.png]] 
| Create a new div container in document source. 
|-
| align="center" | [[Image:CKEditor_align_left.png]][[Image:CKEditor_align_center.png]][[Image:CKEditor_align_right.png]][[Image:CKEditor_justify.png‎]]
| Sets the text alignment (left, centered, right or justified). See Text layout and format in [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_text_direction_left.png]][[Image:CKEditor_text_direction_right.png]]
| Sets the text direction from left to right or from right to left. 
|-
| align="center" | [[Image:CKEditor_link.png]][[Image:CKEditor_unlink.png]]
| Converts or removes the text in hyperlinks. It may also by used to manage file uploads and links to files on the web server. See [[CKEditor_3.x/Users Guide/Common Tasks/Links, E-Mails and Anchors|Links, E-Mails and Anchors]]. 

|-
| align="center" | [[Image:CKEditor_anchors.png]]
| Inserts or modifies a link anchor. See [[CKEditor_3.x/Users Guide/Common Tasks/Links, E-Mails and Anchors|Links, E-Mails and Anchors]]
|-
| align="center" | [[Image:CKEditor_image.png]]
| Inserts images into the document. See [[CKEditor_3.x/Users Guide/Common Tasks/Inserting Images|Inserting Images]]. 
|-
| align="center" | [[Image:CKEditor_flash.png]]
| Inserts a Adobe Flash element into the page. See [[CKEditor_3.x/Users Guide/Common Tasks/Inserting Flash|Inserting Flash]]
|-
| align="center" | [[Image:CKEditor_table.png]]
| Creates a table with the defined number of columns and rows. See [[CKEditor_3.x/Users Guide/Common Tasks/Tables|Tables]]. 
|-
| align="center" | [[Image:CKEditor_horizontal_line.png]]
| Inserts a divider line (horizontal rule). 
|-
| align="center" | [[Image:CKEditor_smiley.png]]
| Inserts an emoticons image (smiley faces, email icon, lightbulb, etc.). 
|-
| align="center" | [[Image:CKEditor_specialchar.png]]
| Inserts special characters. 
|-
| align="center" | [[Image:CKEditor_pagebreak.png]]
| Inserts a printing page break. Only impacts printed version. 
|-
| align="center" | [[Image:CKEditor_styles.png]]
| Styles & formatting determine the appearance and semantic value of your document. You may use the drop down boxes to apply styles, set the font, its size, etc. To remove the applied style select the style name again. See [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_textcolor.png]]
| Changes the color of the text. See[[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_bgcolor.png]]
| Changes the background color of the text. See[[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_maximize.png]]
| Maximizes the editor size inside the browser.
|-
| align="center" | [[Image:CKEditor_show blocks.png]]
| Shows the block elements boundaries in the text.
|-
| align="center" | [[Image:CKEditor_about.png]]
| Shows information about the CKEditor.
|}

== Form Functions ==

{| cellspacing="0" cellpadding="3" border="1"
|-
| nowrap="nowrap" align="center" | '''Toolbar Element''' 
| '''Function'''
|-
| align="center" | [[Image:CKEditor_form.png]]
| Creates a new form block into the page. 
|-
| align="center" | [[Image:CKEditor_checkbox.png]]
| Inserts a checkbox to the page.
|-
| align="center" | [[Image:CKEditor_radiobutton.png]]
| Inserts a radio button to the page.
|-
| align="center" | [[Image:CKEditor_textfield.png]] 
| Inserts a text field into the page. 
|-
| align="center" | [[Image:CKEditor_textarea.png]]
| Inserts a multi-line text area into the page.
|-
| align="center" | [[Image:CKEditor_selection_field.png]] 
| Inserts a selection field into the page. 
|-
| align="center" | [[Image:CKEditor_button.png]] 
| Inserts a form button into the page. 
|-
| align="center" | [[Image:CKEditor_button_image.png]]
| Inserts an image into the page, which behaves much like form button used to submit forms. Do not use it to insert plain images into the document. 
|-
| align="center" | [[Image:CKEditor_hidden.png]] 
| Inserts a hidden field into the page. 
|}

CKEditor 3.x/Users Guide/Quick Reference

2010-09-09T12:41:32Z

Magdalena.stachnik:

This section contains a quick overview concerning all functions available in the default CKEditor toolbar. 

To download a file with a description of the toolbar element function as a pdf, [[http://docs.cksource.com/images/0/04/CKEditor_Toolbar.pdf| Click here]]

== Common Toolbar Functions ==

{| cellspacing="0" cellpadding="3" border="1"
|-
| nowrap="nowrap" align="center" | '''Toolbar Element''' 
| '''Function'''
|-
| align="center" | [[Image:CKEditor_source.png]] 
| View or edit the document source code (for advanced users). See [[CKEditor 3.x/Users Guide/Source Editor|Source Editor]]. 
|-
| align="center" | [[Image:CKEditor_save.gif]]
| Saves the page you were editing.
|-
| align="center" | [[Image:CKEditor_new.png]]
| Removes all contentes, creating a new blank page.
|-
| align="center" | [[Image:CKEditor_preview.png]] 
| Preview what the HTML page will look like for users. 
|-
| align="center" | [[Image:CKEditor_templates.png]] 
| Select a layout template. See [[CKEditor_3.x/Users Guide/Common Tasks/Templates|Templates]] 
|-
| align="center" | [[Image:CKEditor_cut.png]] 
| Cut the highlighted text to the clipboard. See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_copy.png]] 
| Copy the highlighted text to the clipboard. See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_paste.png]][[Image:CKEditor_paste_text.png]] 
| Paste the data copied to the clipboard (with or without formatting). See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_paste_word.png]] 
| Paste content copied from Microsoft Word or similar applications. See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_print.gif]] 
| Print the current document. See [[CKEditor_3.x/Users Guide/Other Tasks/Printing|Printing]]. 
|-
| align="center" | [[Image:CKEditor_checkspell.png]][[Image:CKEditor_SCAYT.png]] 
| Spell check the text in the document or spell check the text as you type. See [[CKEditor_3.x/Users Guide/Other Tasks/Spell Checking|Spell Checking]]. 

|-
| align="center" | [[Image:CKEditor_undo.png]][[Image:CKEditor_redo.png]] 
| Undo or redo the most recent action taken. See [[CKEditor_3.x/Users Guide/Other Tasks/Undo and Redo|Undo and Redo]]. 
|-
| align="center" | [[Image:CKEditor_find.png]] 
| Find a word or phrase within the document. See [[CKEditor_3.x/Users Guide/Other Tasks/Find and Replace|Find and Replace]]. 
|-
| align="center" | [[Image:CKEditor_find_replace..png]] 
| Find and replace a word or phrase within the document. See [[CKEditor_3.x/Users Guide/Other Tasks/Find and Replace|Find and Replace]]. 
|-
| align="center" | [[Image:CKEditor_select_all.png]] 
| Select the entire content in the document. 
|-
| align="center" | [[Image:CKEditor_remove_format.png]] 
| Remove the formatting from the highlighted text. 
|-
| align="center" | [[Image:CKEditor_bold.png]][[Image:CKEditor_italic.png]][[Image:CKEditor_underline.png]][[Image:CKEditor_strikethough.png]] 
| Applies '''bold''', ''italic'', underscore or <strike>strikethrough</strike> formatting to the highlighted text.See [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_subscript.png]][[Image:CKEditor_superscript.png]] 
| Superscript or subscript the highlighted text.See Superscript and subscript in [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_insertorderlist.png]][[Image:CKEditor_insertunorderedlist.png]]
| Creates numbered or bulleted lists. See [[CKEditor_3.x/Users Guide/Common Tasks/Creating Lists|Creating Lists]]. 
|-
| align="center" | [[Image:CKEditor_outdent.png]][[Image:CKEditor_indent.png]]
| Increase or decrease the text indentation. 
|-
| align="center" | [[Image:CKEditor_blokquote.png]] 
| Format a block of text to identify quotations (text provenient from other sources). 
|-
| align="center" | [[Image:CKEditor_div_container.png]] 
| Create a new div container in document source. 
|-
| align="center" | [[Image:CKEditor_align_left.png]][[Image:CKEditor_align_center.png]][[Image:CKEditor_align_right.png]][[Image:CKEditor_justify.png‎]]
| Sets the text alignment (left, centered, right or justified). See Text layout and format in [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_text_direction_left.png]][[Image:CKEditor_text_direction_right.png]]
| Sets the text direction from left to right or from right to left. 
|-
| align="center" | [[Image:CKEditor_link.png]][[Image:CKEditor_unlink.png]]
| Converts or removes the text in hyperlinks. It may also by used to manage file uploads and links to files on the web server. See [[CKEditor_3.x/Users Guide/Common Tasks/Links, E-Mails and Anchors|Links, E-Mails and Anchors]]. 

|-
| align="center" | [[Image:CKEditor_anchors.png]]
| Inserts or modifies a link anchor. See [[CKEditor_3.x/Users Guide/Common Tasks/Links, E-Mails and Anchors|Links, E-Mails and Anchors]]
|-
| align="center" | [[Image:CKEditor_image.png]]
| Inserts images into the document. See [[CKEditor_3.x/Users Guide/Common Tasks/Inserting Images|Inserting Images]]. 
|-
| align="center" | [[Image:CKEditor_flash.png]]
| Inserts a Adobe Flash element into the page. See [[CKEditor_3.x/Users Guide/Common Tasks/Inserting Flash|Inserting Flash]]
|-
| align="center" | [[Image:CKEditor_table.png]]
| Creates a table with the defined number of columns and rows. See [[CKEditor_3.x/Users Guide/Common Tasks/Tables|Tables]]. 
|-
| align="center" | [[Image:CKEditor_horizontal_line.png]]
| Inserts a divider line (horizontal rule). 
|-
| align="center" | [[Image:CKEditor_smiley.png]]
| Inserts an emoticons image (smiley faces, email icon, lightbulb, etc.). 
|-
| align="center" | [[Image:CKEditor_specialchar.png]]
| Inserts special characters. 
|-
| align="center" | [[Image:CKEditor_pagebreak.png]]
| Inserts a printing page break. Only impacts printed version. 
|-
| align="center" | [[Image:CKEditor_styles.png]]
| Styles & formatting determine the appearance and semantic value of your document. You may use the drop down boxes to apply styles, set the font, its size, etc. To remove the applied style select the style name again. See [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_textcolor.png]]
| Changes the color of the text. See[[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_bgcolor.png]]
| Changes the background color of the text. See[[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_maximize.png]]
| Maximizes the editor size inside the browser.
|-
| align="center" | [[Image:CKEditor_show blocks.png]]
| Shows the block elements boundaries in the text.
|-
| align="center" | [[Image:CKEditor_about.png]]
| Shows information about the CKEditor.
|}

== Form Functions ==

{| cellspacing="0" cellpadding="3" border="1"
|-
| nowrap="nowrap" align="center" | '''Toolbar Element''' 
| '''Function'''
|-
| align="center" | [[Image:CKEditor_form.png]]
| Creates a new form block into the page. 
|-
| align="center" | [[Image:CKEditor_checkbox.png]]
| Inserts a checkbox to the page.
|-
| align="center" | [[Image:CKEditor_radiobutton.png]]
| Inserts a radio button to the page.
|-
| align="center" | [[Image:CKEditor_textfield.png]] 
| Inserts a text field into the page. 
|-
| align="center" | [[Image:CKEditor_textarea.png]]
| Inserts a multi-line text area into the page.
|-
| align="center" | [[Image:CKEditor_selection_field.png]] 
| Inserts a selection field into the page. 
|-
| align="center" | [[Image:CKEditor_button.png]] 
| Inserts a form button into the page. 
|-
| align="center" | [[Image:CKEditor_button_image.png]]
| Inserts an image into the page, which behaves much like form button used to submit forms. Do not use it to insert plain images into the document. 
|-
| align="center" | [[Image:CKEditor_hidden.png]] 
| Inserts a hidden field into the page. 
|}

CKEditor 3.x/Users Guide/Quick Reference

2010-09-09T12:40:58Z

Magdalena.stachnik:

This section contains a quick overview concerning all functions available in the default CKEditor toolbar. 

To download a file with a description of the toolbar element function as a pdf, [[CKEditor_Toolbar.pdf Click here]]

== Common Toolbar Functions ==

{| cellspacing="0" cellpadding="3" border="1"
|-
| nowrap="nowrap" align="center" | '''Toolbar Element''' 
| '''Function'''
|-
| align="center" | [[Image:CKEditor_source.png]] 
| View or edit the document source code (for advanced users). See [[CKEditor 3.x/Users Guide/Source Editor|Source Editor]]. 
|-
| align="center" | [[Image:CKEditor_save.gif]]
| Saves the page you were editing.
|-
| align="center" | [[Image:CKEditor_new.png]]
| Removes all contentes, creating a new blank page.
|-
| align="center" | [[Image:CKEditor_preview.png]] 
| Preview what the HTML page will look like for users. 
|-
| align="center" | [[Image:CKEditor_templates.png]] 
| Select a layout template. See [[CKEditor_3.x/Users Guide/Common Tasks/Templates|Templates]] 
|-
| align="center" | [[Image:CKEditor_cut.png]] 
| Cut the highlighted text to the clipboard. See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_copy.png]] 
| Copy the highlighted text to the clipboard. See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_paste.png]][[Image:CKEditor_paste_text.png]] 
| Paste the data copied to the clipboard (with or without formatting). See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_paste_word.png]] 
| Paste content copied from Microsoft Word or similar applications. See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_print.gif]] 
| Print the current document. See [[CKEditor_3.x/Users Guide/Other Tasks/Printing|Printing]]. 
|-
| align="center" | [[Image:CKEditor_checkspell.png]][[Image:CKEditor_SCAYT.png]] 
| Spell check the text in the document or spell check the text as you type. See [[CKEditor_3.x/Users Guide/Other Tasks/Spell Checking|Spell Checking]]. 

|-
| align="center" | [[Image:CKEditor_undo.png]][[Image:CKEditor_redo.png]] 
| Undo or redo the most recent action taken. See [[CKEditor_3.x/Users Guide/Other Tasks/Undo and Redo|Undo and Redo]]. 
|-
| align="center" | [[Image:CKEditor_find.png]] 
| Find a word or phrase within the document. See [[CKEditor_3.x/Users Guide/Other Tasks/Find and Replace|Find and Replace]]. 
|-
| align="center" | [[Image:CKEditor_find_replace..png]] 
| Find and replace a word or phrase within the document. See [[CKEditor_3.x/Users Guide/Other Tasks/Find and Replace|Find and Replace]]. 
|-
| align="center" | [[Image:CKEditor_select_all.png]] 
| Select the entire content in the document. 
|-
| align="center" | [[Image:CKEditor_remove_format.png]] 
| Remove the formatting from the highlighted text. 
|-
| align="center" | [[Image:CKEditor_bold.png]][[Image:CKEditor_italic.png]][[Image:CKEditor_underline.png]][[Image:CKEditor_strikethough.png]] 
| Applies '''bold''', ''italic'', underscore or <strike>strikethrough</strike> formatting to the highlighted text.See [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_subscript.png]][[Image:CKEditor_superscript.png]] 
| Superscript or subscript the highlighted text.See Superscript and subscript in [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_insertorderlist.png]][[Image:CKEditor_insertunorderedlist.png]]
| Creates numbered or bulleted lists. See [[CKEditor_3.x/Users Guide/Common Tasks/Creating Lists|Creating Lists]]. 
|-
| align="center" | [[Image:CKEditor_outdent.png]][[Image:CKEditor_indent.png]]
| Increase or decrease the text indentation. 
|-
| align="center" | [[Image:CKEditor_blokquote.png]] 
| Format a block of text to identify quotations (text provenient from other sources). 
|-
| align="center" | [[Image:CKEditor_div_container.png]] 
| Create a new div container in document source. 
|-
| align="center" | [[Image:CKEditor_align_left.png]][[Image:CKEditor_align_center.png]][[Image:CKEditor_align_right.png]][[Image:CKEditor_justify.png‎]]
| Sets the text alignment (left, centered, right or justified). See Text layout and format in [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_text_direction_left.png]][[Image:CKEditor_text_direction_right.png]]
| Sets the text direction from left to right or from right to left. 
|-
| align="center" | [[Image:CKEditor_link.png]][[Image:CKEditor_unlink.png]]
| Converts or removes the text in hyperlinks. It may also by used to manage file uploads and links to files on the web server. See [[CKEditor_3.x/Users Guide/Common Tasks/Links, E-Mails and Anchors|Links, E-Mails and Anchors]]. 

|-
| align="center" | [[Image:CKEditor_anchors.png]]
| Inserts or modifies a link anchor. See [[CKEditor_3.x/Users Guide/Common Tasks/Links, E-Mails and Anchors|Links, E-Mails and Anchors]]
|-
| align="center" | [[Image:CKEditor_image.png]]
| Inserts images into the document. See [[CKEditor_3.x/Users Guide/Common Tasks/Inserting Images|Inserting Images]]. 
|-
| align="center" | [[Image:CKEditor_flash.png]]
| Inserts a Adobe Flash element into the page. See [[CKEditor_3.x/Users Guide/Common Tasks/Inserting Flash|Inserting Flash]]
|-
| align="center" | [[Image:CKEditor_table.png]]
| Creates a table with the defined number of columns and rows. See [[CKEditor_3.x/Users Guide/Common Tasks/Tables|Tables]]. 
|-
| align="center" | [[Image:CKEditor_horizontal_line.png]]
| Inserts a divider line (horizontal rule). 
|-
| align="center" | [[Image:CKEditor_smiley.png]]
| Inserts an emoticons image (smiley faces, email icon, lightbulb, etc.). 
|-
| align="center" | [[Image:CKEditor_specialchar.png]]
| Inserts special characters. 
|-
| align="center" | [[Image:CKEditor_pagebreak.png]]
| Inserts a printing page break. Only impacts printed version. 
|-
| align="center" | [[Image:CKEditor_styles.png]]
| Styles & formatting determine the appearance and semantic value of your document. You may use the drop down boxes to apply styles, set the font, its size, etc. To remove the applied style select the style name again. See [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_textcolor.png]]
| Changes the color of the text. See[[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_bgcolor.png]]
| Changes the background color of the text. See[[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_maximize.png]]
| Maximizes the editor size inside the browser.
|-
| align="center" | [[Image:CKEditor_show blocks.png]]
| Shows the block elements boundaries in the text.
|-
| align="center" | [[Image:CKEditor_about.png]]
| Shows information about the CKEditor.
|}

== Form Functions ==

{| cellspacing="0" cellpadding="3" border="1"
|-
| nowrap="nowrap" align="center" | '''Toolbar Element''' 
| '''Function'''
|-
| align="center" | [[Image:CKEditor_form.png]]
| Creates a new form block into the page. 
|-
| align="center" | [[Image:CKEditor_checkbox.png]]
| Inserts a checkbox to the page.
|-
| align="center" | [[Image:CKEditor_radiobutton.png]]
| Inserts a radio button to the page.
|-
| align="center" | [[Image:CKEditor_textfield.png]] 
| Inserts a text field into the page. 
|-
| align="center" | [[Image:CKEditor_textarea.png]]
| Inserts a multi-line text area into the page.
|-
| align="center" | [[Image:CKEditor_selection_field.png]] 
| Inserts a selection field into the page. 
|-
| align="center" | [[Image:CKEditor_button.png]] 
| Inserts a form button into the page. 
|-
| align="center" | [[Image:CKEditor_button_image.png]]
| Inserts an image into the page, which behaves much like form button used to submit forms. Do not use it to insert plain images into the document. 
|-
| align="center" | [[Image:CKEditor_hidden.png]] 
| Inserts a hidden field into the page. 
|}

CKEditor 3.x/Users Guide/Quick Reference

2010-09-09T12:39:54Z

Magdalena.stachnik:

This section contains a quick overview concerning all functions available in the default CKEditor toolbar. 

To download a file with a description of the toolbar element function as a pdf, [[CKEditor_Toolbar.pdf|Click here.]]

== Common Toolbar Functions ==

{| cellspacing="0" cellpadding="3" border="1"
|-
| nowrap="nowrap" align="center" | '''Toolbar Element''' 
| '''Function'''
|-
| align="center" | [[Image:CKEditor_source.png]] 
| View or edit the document source code (for advanced users). See [[CKEditor 3.x/Users Guide/Source Editor|Source Editor]]. 
|-
| align="center" | [[Image:CKEditor_save.gif]]
| Saves the page you were editing.
|-
| align="center" | [[Image:CKEditor_new.png]]
| Removes all contentes, creating a new blank page.
|-
| align="center" | [[Image:CKEditor_preview.png]] 
| Preview what the HTML page will look like for users. 
|-
| align="center" | [[Image:CKEditor_templates.png]] 
| Select a layout template. See [[CKEditor_3.x/Users Guide/Common Tasks/Templates|Templates]] 
|-
| align="center" | [[Image:CKEditor_cut.png]] 
| Cut the highlighted text to the clipboard. See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_copy.png]] 
| Copy the highlighted text to the clipboard. See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_paste.png]][[Image:CKEditor_paste_text.png]] 
| Paste the data copied to the clipboard (with or without formatting). See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_paste_word.png]] 
| Paste content copied from Microsoft Word or similar applications. See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_print.gif]] 
| Print the current document. See [[CKEditor_3.x/Users Guide/Other Tasks/Printing|Printing]]. 
|-
| align="center" | [[Image:CKEditor_checkspell.png]][[Image:CKEditor_SCAYT.png]] 
| Spell check the text in the document or spell check the text as you type. See [[CKEditor_3.x/Users Guide/Other Tasks/Spell Checking|Spell Checking]]. 

|-
| align="center" | [[Image:CKEditor_undo.png]][[Image:CKEditor_redo.png]] 
| Undo or redo the most recent action taken. See [[CKEditor_3.x/Users Guide/Other Tasks/Undo and Redo|Undo and Redo]]. 
|-
| align="center" | [[Image:CKEditor_find.png]] 
| Find a word or phrase within the document. See [[CKEditor_3.x/Users Guide/Other Tasks/Find and Replace|Find and Replace]]. 
|-
| align="center" | [[Image:CKEditor_find_replace..png]] 
| Find and replace a word or phrase within the document. See [[CKEditor_3.x/Users Guide/Other Tasks/Find and Replace|Find and Replace]]. 
|-
| align="center" | [[Image:CKEditor_select_all.png]] 
| Select the entire content in the document. 
|-
| align="center" | [[Image:CKEditor_remove_format.png]] 
| Remove the formatting from the highlighted text. 
|-
| align="center" | [[Image:CKEditor_bold.png]][[Image:CKEditor_italic.png]][[Image:CKEditor_underline.png]][[Image:CKEditor_strikethough.png]] 
| Applies '''bold''', ''italic'', underscore or <strike>strikethrough</strike> formatting to the highlighted text.See [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_subscript.png]][[Image:CKEditor_superscript.png]] 
| Superscript or subscript the highlighted text.See Superscript and subscript in [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_insertorderlist.png]][[Image:CKEditor_insertunorderedlist.png]]
| Creates numbered or bulleted lists. See [[CKEditor_3.x/Users Guide/Common Tasks/Creating Lists|Creating Lists]]. 
|-
| align="center" | [[Image:CKEditor_outdent.png]][[Image:CKEditor_indent.png]]
| Increase or decrease the text indentation. 
|-
| align="center" | [[Image:CKEditor_blokquote.png]] 
| Format a block of text to identify quotations (text provenient from other sources). 
|-
| align="center" | [[Image:CKEditor_div_container.png]] 
| Create a new div container in document source. 
|-
| align="center" | [[Image:CKEditor_align_left.png]][[Image:CKEditor_align_center.png]][[Image:CKEditor_align_right.png]][[Image:CKEditor_justify.png‎]]
| Sets the text alignment (left, centered, right or justified). See Text layout and format in [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_text_direction_left.png]][[Image:CKEditor_text_direction_right.png]]
| Sets the text direction from left to right or from right to left. 
|-
| align="center" | [[Image:CKEditor_link.png]][[Image:CKEditor_unlink.png]]
| Converts or removes the text in hyperlinks. It may also by used to manage file uploads and links to files on the web server. See [[CKEditor_3.x/Users Guide/Common Tasks/Links, E-Mails and Anchors|Links, E-Mails and Anchors]]. 

|-
| align="center" | [[Image:CKEditor_anchors.png]]
| Inserts or modifies a link anchor. See [[CKEditor_3.x/Users Guide/Common Tasks/Links, E-Mails and Anchors|Links, E-Mails and Anchors]]
|-
| align="center" | [[Image:CKEditor_image.png]]
| Inserts images into the document. See [[CKEditor_3.x/Users Guide/Common Tasks/Inserting Images|Inserting Images]]. 
|-
| align="center" | [[Image:CKEditor_flash.png]]
| Inserts a Adobe Flash element into the page. See [[CKEditor_3.x/Users Guide/Common Tasks/Inserting Flash|Inserting Flash]]
|-
| align="center" | [[Image:CKEditor_table.png]]
| Creates a table with the defined number of columns and rows. See [[CKEditor_3.x/Users Guide/Common Tasks/Tables|Tables]]. 
|-
| align="center" | [[Image:CKEditor_horizontal_line.png]]
| Inserts a divider line (horizontal rule). 
|-
| align="center" | [[Image:CKEditor_smiley.png]]
| Inserts an emoticons image (smiley faces, email icon, lightbulb, etc.). 
|-
| align="center" | [[Image:CKEditor_specialchar.png]]
| Inserts special characters. 
|-
| align="center" | [[Image:CKEditor_pagebreak.png]]
| Inserts a printing page break. Only impacts printed version. 
|-
| align="center" | [[Image:CKEditor_styles.png]]
| Styles & formatting determine the appearance and semantic value of your document. You may use the drop down boxes to apply styles, set the font, its size, etc. To remove the applied style select the style name again. See [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_textcolor.png]]
| Changes the color of the text. See[[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_bgcolor.png]]
| Changes the background color of the text. See[[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_maximize.png]]
| Maximizes the editor size inside the browser.
|-
| align="center" | [[Image:CKEditor_show blocks.png]]
| Shows the block elements boundaries in the text.
|-
| align="center" | [[Image:CKEditor_about.png]]
| Shows information about the CKEditor.
|}

== Form Functions ==

{| cellspacing="0" cellpadding="3" border="1"
|-
| nowrap="nowrap" align="center" | '''Toolbar Element''' 
| '''Function'''
|-
| align="center" | [[Image:CKEditor_form.png]]
| Creates a new form block into the page. 
|-
| align="center" | [[Image:CKEditor_checkbox.png]]
| Inserts a checkbox to the page.
|-
| align="center" | [[Image:CKEditor_radiobutton.png]]
| Inserts a radio button to the page.
|-
| align="center" | [[Image:CKEditor_textfield.png]] 
| Inserts a text field into the page. 
|-
| align="center" | [[Image:CKEditor_textarea.png]]
| Inserts a multi-line text area into the page.
|-
| align="center" | [[Image:CKEditor_selection_field.png]] 
| Inserts a selection field into the page. 
|-
| align="center" | [[Image:CKEditor_button.png]] 
| Inserts a form button into the page. 
|-
| align="center" | [[Image:CKEditor_button_image.png]]
| Inserts an image into the page, which behaves much like form button used to submit forms. Do not use it to insert plain images into the document. 
|-
| align="center" | [[Image:CKEditor_hidden.png]] 
| Inserts a hidden field into the page. 
|}

CKEditor 3.x/Users Guide/Quick Reference

2010-09-09T12:31:02Z

Magdalena.stachnik:

This section contains a quick overview concerning all functions available in the default CKEditor toolbar. 

To download a file with a description of the toolbar element function as a pdf, [[pdf_embed|CKEditor_Toolbar.pdf|Click here.]]

== Common Toolbar Functions ==

{| cellspacing="0" cellpadding="3" border="1"
|-
| nowrap="nowrap" align="center" | '''Toolbar Element''' 
| '''Function'''
|-
| align="center" | [[Image:CKEditor_source.png]] 
| View or edit the document source code (for advanced users). See [[CKEditor 3.x/Users Guide/Source Editor|Source Editor]]. 
|-
| align="center" | [[Image:CKEditor_save.gif]]
| Saves the page you were editing.
|-
| align="center" | [[Image:CKEditor_new.png]]
| Removes all contentes, creating a new blank page.
|-
| align="center" | [[Image:CKEditor_preview.png]] 
| Preview what the HTML page will look like for users. 
|-
| align="center" | [[Image:CKEditor_templates.png]] 
| Select a layout template. See [[CKEditor_3.x/Users Guide/Common Tasks/Templates|Templates]] 
|-
| align="center" | [[Image:CKEditor_cut.png]] 
| Cut the highlighted text to the clipboard. See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_copy.png]] 
| Copy the highlighted text to the clipboard. See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_paste.png]][[Image:CKEditor_paste_text.png]] 
| Paste the data copied to the clipboard (with or without formatting). See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_paste_word.png]] 
| Paste content copied from Microsoft Word or similar applications. See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_print.gif]] 
| Print the current document. See [[CKEditor_3.x/Users Guide/Other Tasks/Printing|Printing]]. 
|-
| align="center" | [[Image:CKEditor_checkspell.png]][[Image:CKEditor_SCAYT.png]] 
| Spell check the text in the document or spell check the text as you type. See [[CKEditor_3.x/Users Guide/Other Tasks/Spell Checking|Spell Checking]]. 

|-
| align="center" | [[Image:CKEditor_undo.png]][[Image:CKEditor_redo.png]] 
| Undo or redo the most recent action taken. See [[CKEditor_3.x/Users Guide/Other Tasks/Undo and Redo|Undo and Redo]]. 
|-
| align="center" | [[Image:CKEditor_find.png]] 
| Find a word or phrase within the document. See [[CKEditor_3.x/Users Guide/Other Tasks/Find and Replace|Find and Replace]]. 
|-
| align="center" | [[Image:CKEditor_find_replace..png]] 
| Find and replace a word or phrase within the document. See [[CKEditor_3.x/Users Guide/Other Tasks/Find and Replace|Find and Replace]]. 
|-
| align="center" | [[Image:CKEditor_select_all.png]] 
| Select the entire content in the document. 
|-
| align="center" | [[Image:CKEditor_remove_format.png]] 
| Remove the formatting from the highlighted text. 
|-
| align="center" | [[Image:CKEditor_bold.png]][[Image:CKEditor_italic.png]][[Image:CKEditor_underline.png]][[Image:CKEditor_strikethough.png]] 
| Applies '''bold''', ''italic'', underscore or <strike>strikethrough</strike> formatting to the highlighted text.See [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_subscript.png]][[Image:CKEditor_superscript.png]] 
| Superscript or subscript the highlighted text.See Superscript and subscript in [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_insertorderlist.png]][[Image:CKEditor_insertunorderedlist.png]]
| Creates numbered or bulleted lists. See [[CKEditor_3.x/Users Guide/Common Tasks/Creating Lists|Creating Lists]]. 
|-
| align="center" | [[Image:CKEditor_outdent.png]][[Image:CKEditor_indent.png]]
| Increase or decrease the text indentation. 
|-
| align="center" | [[Image:CKEditor_blokquote.png]] 
| Format a block of text to identify quotations (text provenient from other sources). 
|-
| align="center" | [[Image:CKEditor_div_container.png]] 
| Create a new div container in document source. 
|-
| align="center" | [[Image:CKEditor_align_left.png]][[Image:CKEditor_align_center.png]][[Image:CKEditor_align_right.png]][[Image:CKEditor_justify.png‎]]
| Sets the text alignment (left, centered, right or justified). See Text layout and format in [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_text_direction_left.png]][[Image:CKEditor_text_direction_right.png]]
| Sets the text direction from left to right or from right to left. 
|-
| align="center" | [[Image:CKEditor_link.png]][[Image:CKEditor_unlink.png]]
| Converts or removes the text in hyperlinks. It may also by used to manage file uploads and links to files on the web server. See [[CKEditor_3.x/Users Guide/Common Tasks/Links, E-Mails and Anchors|Links, E-Mails and Anchors]]. 

|-
| align="center" | [[Image:CKEditor_anchors.png]]
| Inserts or modifies a link anchor. See [[CKEditor_3.x/Users Guide/Common Tasks/Links, E-Mails and Anchors|Links, E-Mails and Anchors]]
|-
| align="center" | [[Image:CKEditor_image.png]]
| Inserts images into the document. See [[CKEditor_3.x/Users Guide/Common Tasks/Inserting Images|Inserting Images]]. 
|-
| align="center" | [[Image:CKEditor_flash.png]]
| Inserts a Adobe Flash element into the page. See [[CKEditor_3.x/Users Guide/Common Tasks/Inserting Flash|Inserting Flash]]
|-
| align="center" | [[Image:CKEditor_table.png]]
| Creates a table with the defined number of columns and rows. See [[CKEditor_3.x/Users Guide/Common Tasks/Tables|Tables]]. 
|-
| align="center" | [[Image:CKEditor_horizontal_line.png]]
| Inserts a divider line (horizontal rule). 
|-
| align="center" | [[Image:CKEditor_smiley.png]]
| Inserts an emoticons image (smiley faces, email icon, lightbulb, etc.). 
|-
| align="center" | [[Image:CKEditor_specialchar.png]]
| Inserts special characters. 
|-
| align="center" | [[Image:CKEditor_pagebreak.png]]
| Inserts a printing page break. Only impacts printed version. 
|-
| align="center" | [[Image:CKEditor_styles.png]]
| Styles & formatting determine the appearance and semantic value of your document. You may use the drop down boxes to apply styles, set the font, its size, etc. To remove the applied style select the style name again. See [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_textcolor.png]]
| Changes the color of the text. See[[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_bgcolor.png]]
| Changes the background color of the text. See[[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_maximize.png]]
| Maximizes the editor size inside the browser.
|-
| align="center" | [[Image:CKEditor_show blocks.png]]
| Shows the block elements boundaries in the text.
|-
| align="center" | [[Image:CKEditor_about.png]]
| Shows information about the CKEditor.
|}

== Form Functions ==

{| cellspacing="0" cellpadding="3" border="1"
|-
| nowrap="nowrap" align="center" | '''Toolbar Element''' 
| '''Function'''
|-
| align="center" | [[Image:CKEditor_form.png]]
| Creates a new form block into the page. 
|-
| align="center" | [[Image:CKEditor_checkbox.png]]
| Inserts a checkbox to the page.
|-
| align="center" | [[Image:CKEditor_radiobutton.png]]
| Inserts a radio button to the page.
|-
| align="center" | [[Image:CKEditor_textfield.png]] 
| Inserts a text field into the page. 
|-
| align="center" | [[Image:CKEditor_textarea.png]]
| Inserts a multi-line text area into the page.
|-
| align="center" | [[Image:CKEditor_selection_field.png]] 
| Inserts a selection field into the page. 
|-
| align="center" | [[Image:CKEditor_button.png]] 
| Inserts a form button into the page. 
|-
| align="center" | [[Image:CKEditor_button_image.png]]
| Inserts an image into the page, which behaves much like form button used to submit forms. Do not use it to insert plain images into the document. 
|-
| align="center" | [[Image:CKEditor_hidden.png]] 
| Inserts a hidden field into the page. 
|}

CKEditor 3.x/Users Guide/Quick Reference

2010-09-09T12:29:23Z

Magdalena.stachnik:

This section contains a quick overview concerning all functions available in the default CKEditor toolbar. 

To download a file with a description of the toolbar element function as a pdf, [[File:CKEditor_Toolbar.pdf|Click here.]]

== Common Toolbar Functions ==

{| cellspacing="0" cellpadding="3" border="1"
|-
| nowrap="nowrap" align="center" | '''Toolbar Element''' 
| '''Function'''
|-
| align="center" | [[Image:CKEditor_source.png]] 
| View or edit the document source code (for advanced users). See [[CKEditor 3.x/Users Guide/Source Editor|Source Editor]]. 
|-
| align="center" | [[Image:CKEditor_save.gif]]
| Saves the page you were editing.
|-
| align="center" | [[Image:CKEditor_new.png]]
| Removes all contentes, creating a new blank page.
|-
| align="center" | [[Image:CKEditor_preview.png]] 
| Preview what the HTML page will look like for users. 
|-
| align="center" | [[Image:CKEditor_templates.png]] 
| Select a layout template. See [[CKEditor_3.x/Users Guide/Common Tasks/Templates|Templates]] 
|-
| align="center" | [[Image:CKEditor_cut.png]] 
| Cut the highlighted text to the clipboard. See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_copy.png]] 
| Copy the highlighted text to the clipboard. See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_paste.png]][[Image:CKEditor_paste_text.png]] 
| Paste the data copied to the clipboard (with or without formatting). See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_paste_word.png]] 
| Paste content copied from Microsoft Word or similar applications. See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_print.gif]] 
| Print the current document. See [[CKEditor_3.x/Users Guide/Other Tasks/Printing|Printing]]. 
|-
| align="center" | [[Image:CKEditor_checkspell.png]][[Image:CKEditor_SCAYT.png]] 
| Spell check the text in the document or spell check the text as you type. See [[CKEditor_3.x/Users Guide/Other Tasks/Spell Checking|Spell Checking]]. 

|-
| align="center" | [[Image:CKEditor_undo.png]][[Image:CKEditor_redo.png]] 
| Undo or redo the most recent action taken. See [[CKEditor_3.x/Users Guide/Other Tasks/Undo and Redo|Undo and Redo]]. 
|-
| align="center" | [[Image:CKEditor_find.png]] 
| Find a word or phrase within the document. See [[CKEditor_3.x/Users Guide/Other Tasks/Find and Replace|Find and Replace]]. 
|-
| align="center" | [[Image:CKEditor_find_replace..png]] 
| Find and replace a word or phrase within the document. See [[CKEditor_3.x/Users Guide/Other Tasks/Find and Replace|Find and Replace]]. 
|-
| align="center" | [[Image:CKEditor_select_all.png]] 
| Select the entire content in the document. 
|-
| align="center" | [[Image:CKEditor_remove_format.png]] 
| Remove the formatting from the highlighted text. 
|-
| align="center" | [[Image:CKEditor_bold.png]][[Image:CKEditor_italic.png]][[Image:CKEditor_underline.png]][[Image:CKEditor_strikethough.png]] 
| Applies '''bold''', ''italic'', underscore or <strike>strikethrough</strike> formatting to the highlighted text.See [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_subscript.png]][[Image:CKEditor_superscript.png]] 
| Superscript or subscript the highlighted text.See Superscript and subscript in [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_insertorderlist.png]][[Image:CKEditor_insertunorderedlist.png]]
| Creates numbered or bulleted lists. See [[CKEditor_3.x/Users Guide/Common Tasks/Creating Lists|Creating Lists]]. 
|-
| align="center" | [[Image:CKEditor_outdent.png]][[Image:CKEditor_indent.png]]
| Increase or decrease the text indentation. 
|-
| align="center" | [[Image:CKEditor_blokquote.png]] 
| Format a block of text to identify quotations (text provenient from other sources). 
|-
| align="center" | [[Image:CKEditor_div_container.png]] 
| Create a new div container in document source. 
|-
| align="center" | [[Image:CKEditor_align_left.png]][[Image:CKEditor_align_center.png]][[Image:CKEditor_align_right.png]][[Image:CKEditor_justify.png‎]]
| Sets the text alignment (left, centered, right or justified). See Text layout and format in [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_text_direction_left.png]][[Image:CKEditor_text_direction_right.png]]
| Sets the text direction from left to right or from right to left. 
|-
| align="center" | [[Image:CKEditor_link.png]][[Image:CKEditor_unlink.png]]
| Converts or removes the text in hyperlinks. It may also by used to manage file uploads and links to files on the web server. See [[CKEditor_3.x/Users Guide/Common Tasks/Links, E-Mails and Anchors|Links, E-Mails and Anchors]]. 

|-
| align="center" | [[Image:CKEditor_anchors.png]]
| Inserts or modifies a link anchor. See [[CKEditor_3.x/Users Guide/Common Tasks/Links, E-Mails and Anchors|Links, E-Mails and Anchors]]
|-
| align="center" | [[Image:CKEditor_image.png]]
| Inserts images into the document. See [[CKEditor_3.x/Users Guide/Common Tasks/Inserting Images|Inserting Images]]. 
|-
| align="center" | [[Image:CKEditor_flash.png]]
| Inserts a Adobe Flash element into the page. See [[CKEditor_3.x/Users Guide/Common Tasks/Inserting Flash|Inserting Flash]]
|-
| align="center" | [[Image:CKEditor_table.png]]
| Creates a table with the defined number of columns and rows. See [[CKEditor_3.x/Users Guide/Common Tasks/Tables|Tables]]. 
|-
| align="center" | [[Image:CKEditor_horizontal_line.png]]
| Inserts a divider line (horizontal rule). 
|-
| align="center" | [[Image:CKEditor_smiley.png]]
| Inserts an emoticons image (smiley faces, email icon, lightbulb, etc.). 
|-
| align="center" | [[Image:CKEditor_specialchar.png]]
| Inserts special characters. 
|-
| align="center" | [[Image:CKEditor_pagebreak.png]]
| Inserts a printing page break. Only impacts printed version. 
|-
| align="center" | [[Image:CKEditor_styles.png]]
| Styles & formatting determine the appearance and semantic value of your document. You may use the drop down boxes to apply styles, set the font, its size, etc. To remove the applied style select the style name again. See [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_textcolor.png]]
| Changes the color of the text. See[[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_bgcolor.png]]
| Changes the background color of the text. See[[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_maximize.png]]
| Maximizes the editor size inside the browser.
|-
| align="center" | [[Image:CKEditor_show blocks.png]]
| Shows the block elements boundaries in the text.
|-
| align="center" | [[Image:CKEditor_about.png]]
| Shows information about the CKEditor.
|}

== Form Functions ==

{| cellspacing="0" cellpadding="3" border="1"
|-
| nowrap="nowrap" align="center" | '''Toolbar Element''' 
| '''Function'''
|-
| align="center" | [[Image:CKEditor_form.png]]
| Creates a new form block into the page. 
|-
| align="center" | [[Image:CKEditor_checkbox.png]]
| Inserts a checkbox to the page.
|-
| align="center" | [[Image:CKEditor_radiobutton.png]]
| Inserts a radio button to the page.
|-
| align="center" | [[Image:CKEditor_textfield.png]] 
| Inserts a text field into the page. 
|-
| align="center" | [[Image:CKEditor_textarea.png]]
| Inserts a multi-line text area into the page.
|-
| align="center" | [[Image:CKEditor_selection_field.png]] 
| Inserts a selection field into the page. 
|-
| align="center" | [[Image:CKEditor_button.png]] 
| Inserts a form button into the page. 
|-
| align="center" | [[Image:CKEditor_button_image.png]]
| Inserts an image into the page, which behaves much like form button used to submit forms. Do not use it to insert plain images into the document. 
|-
| align="center" | [[Image:CKEditor_hidden.png]] 
| Inserts a hidden field into the page. 
|}

File:CKEditor Toolbar.pdf

2010-09-09T12:28:55Z

Magdalena.stachnik:

CKEditor 3.x/Users Guide/Quick Reference

2010-09-09T12:28:08Z

Magdalena.stachnik:

This section contains a quick overview concerning all functions available in the default CKEditor toolbar. 

To download a file with a description of the toolbar element function as a pdf, [[CKEditor_Toolbar.pdf|Click here.]]

== Common Toolbar Functions ==

{| cellspacing="0" cellpadding="3" border="1"
|-
| nowrap="nowrap" align="center" | '''Toolbar Element''' 
| '''Function'''
|-
| align="center" | [[Image:CKEditor_source.png]] 
| View or edit the document source code (for advanced users). See [[CKEditor 3.x/Users Guide/Source Editor|Source Editor]]. 
|-
| align="center" | [[Image:CKEditor_save.gif]]
| Saves the page you were editing.
|-
| align="center" | [[Image:CKEditor_new.png]]
| Removes all contentes, creating a new blank page.
|-
| align="center" | [[Image:CKEditor_preview.png]] 
| Preview what the HTML page will look like for users. 
|-
| align="center" | [[Image:CKEditor_templates.png]] 
| Select a layout template. See [[CKEditor_3.x/Users Guide/Common Tasks/Templates|Templates]] 
|-
| align="center" | [[Image:CKEditor_cut.png]] 
| Cut the highlighted text to the clipboard. See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_copy.png]] 
| Copy the highlighted text to the clipboard. See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_paste.png]][[Image:CKEditor_paste_text.png]] 
| Paste the data copied to the clipboard (with or without formatting). See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_paste_word.png]] 
| Paste content copied from Microsoft Word or similar applications. See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. 
|-
| align="center" | [[Image:CKEditor_print.gif]] 
| Print the current document. See [[CKEditor_3.x/Users Guide/Other Tasks/Printing|Printing]]. 
|-
| align="center" | [[Image:CKEditor_checkspell.png]][[Image:CKEditor_SCAYT.png]] 
| Spell check the text in the document or spell check the text as you type. See [[CKEditor_3.x/Users Guide/Other Tasks/Spell Checking|Spell Checking]]. 

|-
| align="center" | [[Image:CKEditor_undo.png]][[Image:CKEditor_redo.png]] 
| Undo or redo the most recent action taken. See [[CKEditor_3.x/Users Guide/Other Tasks/Undo and Redo|Undo and Redo]]. 
|-
| align="center" | [[Image:CKEditor_find.png]] 
| Find a word or phrase within the document. See [[CKEditor_3.x/Users Guide/Other Tasks/Find and Replace|Find and Replace]]. 
|-
| align="center" | [[Image:CKEditor_find_replace..png]] 
| Find and replace a word or phrase within the document. See [[CKEditor_3.x/Users Guide/Other Tasks/Find and Replace|Find and Replace]]. 
|-
| align="center" | [[Image:CKEditor_select_all.png]] 
| Select the entire content in the document. 
|-
| align="center" | [[Image:CKEditor_remove_format.png]] 
| Remove the formatting from the highlighted text. 
|-
| align="center" | [[Image:CKEditor_bold.png]][[Image:CKEditor_italic.png]][[Image:CKEditor_underline.png]][[Image:CKEditor_strikethough.png]] 
| Applies '''bold''', ''italic'', underscore or <strike>strikethrough</strike> formatting to the highlighted text.See [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_subscript.png]][[Image:CKEditor_superscript.png]] 
| Superscript or subscript the highlighted text.See Superscript and subscript in [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_insertorderlist.png]][[Image:CKEditor_insertunorderedlist.png]]
| Creates numbered or bulleted lists. See [[CKEditor_3.x/Users Guide/Common Tasks/Creating Lists|Creating Lists]]. 
|-
| align="center" | [[Image:CKEditor_outdent.png]][[Image:CKEditor_indent.png]]
| Increase or decrease the text indentation. 
|-
| align="center" | [[Image:CKEditor_blokquote.png]] 
| Format a block of text to identify quotations (text provenient from other sources). 
|-
| align="center" | [[Image:CKEditor_div_container.png]] 
| Create a new div container in document source. 
|-
| align="center" | [[Image:CKEditor_align_left.png]][[Image:CKEditor_align_center.png]][[Image:CKEditor_align_right.png]][[Image:CKEditor_justify.png‎]]
| Sets the text alignment (left, centered, right or justified). See Text layout and format in [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_text_direction_left.png]][[Image:CKEditor_text_direction_right.png]]
| Sets the text direction from left to right or from right to left. 
|-
| align="center" | [[Image:CKEditor_link.png]][[Image:CKEditor_unlink.png]]
| Converts or removes the text in hyperlinks. It may also by used to manage file uploads and links to files on the web server. See [[CKEditor_3.x/Users Guide/Common Tasks/Links, E-Mails and Anchors|Links, E-Mails and Anchors]]. 

|-
| align="center" | [[Image:CKEditor_anchors.png]]
| Inserts or modifies a link anchor. See [[CKEditor_3.x/Users Guide/Common Tasks/Links, E-Mails and Anchors|Links, E-Mails and Anchors]]
|-
| align="center" | [[Image:CKEditor_image.png]]
| Inserts images into the document. See [[CKEditor_3.x/Users Guide/Common Tasks/Inserting Images|Inserting Images]]. 
|-
| align="center" | [[Image:CKEditor_flash.png]]
| Inserts a Adobe Flash element into the page. See [[CKEditor_3.x/Users Guide/Common Tasks/Inserting Flash|Inserting Flash]]
|-
| align="center" | [[Image:CKEditor_table.png]]
| Creates a table with the defined number of columns and rows. See [[CKEditor_3.x/Users Guide/Common Tasks/Tables|Tables]]. 
|-
| align="center" | [[Image:CKEditor_horizontal_line.png]]
| Inserts a divider line (horizontal rule). 
|-
| align="center" | [[Image:CKEditor_smiley.png]]
| Inserts an emoticons image (smiley faces, email icon, lightbulb, etc.). 
|-
| align="center" | [[Image:CKEditor_specialchar.png]]
| Inserts special characters. 
|-
| align="center" | [[Image:CKEditor_pagebreak.png]]
| Inserts a printing page break. Only impacts printed version. 
|-
| align="center" | [[Image:CKEditor_styles.png]]
| Styles & formatting determine the appearance and semantic value of your document. You may use the drop down boxes to apply styles, set the font, its size, etc. To remove the applied style select the style name again. See [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_textcolor.png]]
| Changes the color of the text. See[[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_bgcolor.png]]
| Changes the background color of the text. See[[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]]. 
|-
| align="center" | [[Image:CKEditor_maximize.png]]
| Maximizes the editor size inside the browser.
|-
| align="center" | [[Image:CKEditor_show blocks.png]]
| Shows the block elements boundaries in the text.
|-
| align="center" | [[Image:CKEditor_about.png]]
| Shows information about the CKEditor.
|}

== Form Functions ==

{| cellspacing="0" cellpadding="3" border="1"
|-
| nowrap="nowrap" align="center" | '''Toolbar Element''' 
| '''Function'''
|-
| align="center" | [[Image:CKEditor_form.png]]
| Creates a new form block into the page. 
|-
| align="center" | [[Image:CKEditor_checkbox.png]]
| Inserts a checkbox to the page.
|-
| align="center" | [[Image:CKEditor_radiobutton.png]]
| Inserts a radio button to the page.
|-
| align="center" | [[Image:CKEditor_textfield.png]] 
| Inserts a text field into the page. 
|-
| align="center" | [[Image:CKEditor_textarea.png]]
| Inserts a multi-line text area into the page.
|-
| align="center" | [[Image:CKEditor_selection_field.png]] 
| Inserts a selection field into the page. 
|-
| align="center" | [[Image:CKEditor_button.png]] 
| Inserts a form button into the page. 
|-
| align="center" | [[Image:CKEditor_button_image.png]]
| Inserts an image into the page, which behaves much like form button used to submit forms. Do not use it to insert plain images into the document. 
|-
| align="center" | [[Image:CKEditor_hidden.png]] 
| Inserts a hidden field into the page. 
|}