Quick Reference"

This website contains links to software which is either no longer maintained or will be supported only until the end of 2019 (CKFinder 2). For the latest documentation about current CKSource projects, including software like CKEditor 4/CKEditor 5, CKFinder 3, Cloud Services, Letters, Accessibility Checker, please visit the new documentation website.

If you look for an information about very old versions of CKEditor, FCKeditor and CKFinder check also the CKEditor forum, which was closed in 2015. If not, please head to StackOverflow for support.

(Image replacement, tooltips added)
(Redundant <br> elements removed, new intro text and title)
Line 1: Line 1:
−
This section describes all functions available in the default CKEditor’s toolbar ([[Media:CKEditor_Toolbar.pdf|download as pdf]]).
+
This section gives an overview of all features available in the default CKEditor toolbar ([[Media:CKEditor_Toolbar.pdf|download as pdf]]).
−
 
 
−
 
 
−
== Common Toolbar Functions  ==
 
  
 +
== Working with a Document  ==
 
{| cellspacing="0" cellpadding="3" border="1"
 
{| cellspacing="0" cellpadding="3" border="1"
 
|-
 
|-
−
| nowrap="nowrap" align="center" | '''Toolbar Element'''<br>
+
| nowrap="nowrap" align="center" | '''Button'''  
 
| '''Function'''
 
| '''Function'''
 
|-
 
|-
−
| align="center" | [[Image:CKEditor_source.png|Source]]<br>
+
| align="center" | [[Image:CKEditor_source.png|Source]]  
 
| View or edit the document source code (for advanced users). See [[CKEditor 3.x/Users Guide/Source Editor|Source Editor]].<br>
 
| View or edit the document source code (for advanced users). See [[CKEditor 3.x/Users Guide/Source Editor|Source Editor]].<br>
 
|-
 
|-
Line 18: Line 16:
 
| Removes all contentes, creating a new blank page.
 
| Removes all contentes, creating a new blank page.
 
|-
 
|-
−
| align="center" | [[Image:CKEditor_preview.png|Preview]]<br>
+
| align="center" | [[Image:CKEditor_preview.png|Preview]]
 
| Preview what the HTML page will look like for users.<br>
 
| Preview what the HTML page will look like for users.<br>
 
|-
 
|-
−
| align="center" | [[Image:CKEditor_templates.png|Templates]]<br>
+
| align="center" | [[Image:CKEditor_templates.png|Templates]]
 
| Select a layout template. See [[CKEditor_3.x/Users Guide/Common Tasks/Templates|Templates]]<br>
 
| Select a layout template. See [[CKEditor_3.x/Users Guide/Common Tasks/Templates|Templates]]<br>
 
|-
 
|-
−
| align="center" | [[Image:CKEditor_cut.png|Cut]]<br>
+
| align="center" | [[Image:CKEditor_cut.png|Cut]]
−
| Cut the highlighted text to the clipboard. See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]].<br>
+
| 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]]<br>
+
| align="center" | [[Image:CKEditor_copy.png|Copy]]
−
| Copy the highlighted text to the clipboard. See [[CKEditor_3.x/Users Guide/Common Tasks/Cut, Copy and Paste|Cut, Copy and Paste]]. <br>
+
| 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|Paste]] [[Image:CKEditor_paste_text.png|Paste as plain text]]<br>
+
| align="center" | [[Image:CKEditor_paste.png|Paste]] [[Image:CKEditor_paste_text.png|Paste as plain text]]
−
| 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]].<br>
+
| 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 from Word]]<br>
+
| align="center" | [[Image:CKEditor_paste_word.png|Paste from Word]]
−
| 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]]. <br>
+
| 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.png|Print]]<br>
+
| align="center" | [[Image:CKEditor_print.png|Print]]
−
| Print the current document. See [[CKEditor_3.x/Users Guide/Other Tasks/Printing|Printing]]. <br>
+
| Print the current document. See [[CKEditor_3.x/Users Guide/Other Tasks/Printing|Printing]].
 
|-
 
|-
−
| align="center" | [[Image:CKEditor_spellcheck.png|Check Spelling]] [[Image:CKEditor_SCAYT.png]]<br>
+
| align="center" | [[Image:CKEditor_spellcheck.png|Check Spelling]] [[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]].<br>
+
| 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|Undo]] [[Image:CKEditor_redo.png|Redo]]<br>
+
| align="center" | [[Image:CKEditor_undo.png|Undo]] [[Image:CKEditor_redo.png|Redo]]
−
| Undo or redo the most recent action taken. See [[CKEditor_3.x/Users Guide/Other Tasks/Undo and Redo|Undo and Redo]].<br>
+
| 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]]<br>
+
| align="center" | [[Image:CKEditor_find.png|Find]]
−
| Find a word or phrase within the document. See [[CKEditor_3.x/Users Guide/Other Tasks/Find and Replace|Find and Replace]].<br>
+
| 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|Replace]]<br>
+
| align="center" | [[Image:CKEditor_find_replace.png|Replace]]
−
| Find and replace a word or phrase within the document. See [[CKEditor_3.x/Users Guide/Other Tasks/Find and Replace|Find and Replace]].<br>
+
| 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_selectall.png|Select All]]<br>
+
| align="center" | [[Image:CKEditor_selectall.png|Select All]]
−
| Select the entire content in the document.<br>
+
| Select the entire content in the document.
 
|-
 
|-
−
| align="center" | [[Image:CKEditor_remove_format.png|Remove Format]]<br>
+
| align="center" | [[Image:CKEditor_remove_format.png|Remove Format]]  
−
| Remove the formatting from the highlighted text.<br>
+
| Remove the formatting from the highlighted text.
 
|-
 
|-
−
| align="center" | [[Image:CKEditor_bold.png|Bold]] [[Image:CKEditor_italic.png|Italic]] [[Image:CKEditor_underline.png|Underline]] [[Image:CKEditor_strikethrough.png|Strike Through]]<br>
+
| align="center" | [[Image:CKEditor_bold.png|Bold]] [[Image:CKEditor_italic.png|Italic]] [[Image:CKEditor_underline.png|Underline]] [[Image:CKEditor_strikethrough.png|Strike Through]]
−
| Applies '''bold''', ''italic'', <u>underscore</u> or <strike>strikethrough</strike> formatting to the highlighted text.See [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]].<br>
+
| Applies '''bold''', ''italic'', <u>underscore</u> 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|Subscript]] [[Image:CKEditor_superscript.png|Superscript]]<br>
+
| align="center" | [[Image:CKEditor_subscript.png|Subscript]] [[Image:CKEditor_superscript.png|Superscript]]
−
| Superscript or subscript the highlighted text.See Superscript and subscript in [[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]].<br>
+
| 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_numberedlist.png|Insert/Remove Numbered List]] [[Image:CKEditor_bulletedlist.png|Insert/Remove Bulleted List]]  
 
| align="center" | [[Image:CKEditor_numberedlist.png|Insert/Remove Numbered List]] [[Image:CKEditor_bulletedlist.png|Insert/Remove Bulleted List]]  
−
| Creates numbered or bulleted lists. See [[CKEditor_3.x/Users Guide/Common Tasks/Creating Lists|Creating Lists]].<br>
+
| Creates numbered or bulleted lists. See [[CKEditor_3.x/Users Guide/Common Tasks/Creating Lists|Creating Lists]].
 
|-
 
|-
 
| align="center" | [[Image:CKEditor_outdent.png|Decrease Indent]] [[Image:CKEditor_indent.png|Increase Indent]]  
 
| align="center" | [[Image:CKEditor_outdent.png|Decrease Indent]] [[Image:CKEditor_indent.png|Increase Indent]]  
−
| Increase or decrease the text indentation. <br>
+
| Increase or decrease the text indentation.
 
|-
 
|-
−
| align="center" | [[Image:CKEditor_blockquote.png|Block Quote]]<br>
+
| align="center" | [[Image:CKEditor_blockquote.png|Block Quote]]
−
| Format a block of text to identify quotations (text provenient from other sources).<br>
+
| Format a block of text to identify quotations (text provenient from other sources).
 
|-
 
|-
−
| align="center" | [[Image:CKEditor_div.png|Create Div Container]]<br>
+
| align="center" | [[Image:CKEditor_div.png|Create Div Container]]
−
| Create a new div container in document source.<br>
+
| Create a new div container in document source.
 
|-
 
|-
 
| align="center" | [[Image:CKEditor_alignleft.png|Align Left]] [[Image:CKEditor_center.png|Center]] [[Image:CKEditor_alignright.png|Align Right]] [[Image:CKEditor_justify.png|Justify‎]]  
 
| align="center" | [[Image:CKEditor_alignleft.png|Align Left]] [[Image:CKEditor_center.png|Center]] [[Image:CKEditor_alignright.png|Align Right]] [[Image:CKEditor_justify.png|Justify‎]]  
−
| 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]].<br>
+
| 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_ltr.png|Text direction from left to right]] [[Image:CKEditor_rtl.png|Text direction from right to left]]
 
| align="center" | [[Image:CKEditor_ltr.png|Text direction from left to right]] [[Image:CKEditor_rtl.png|Text direction from right to left]]
−
| Sets the text direction from left to right or from right to left. <br>
+
| Sets the text direction from left to right or from right to left.
 
|-
 
|-
 
| align="center" | [[Image:CKEditor_link.png|Link]] [[Image:CKEditor_unlink.png|Unlink]]  
 
| align="center" | [[Image:CKEditor_link.png|Link]] [[Image:CKEditor_unlink.png|Unlink]]  
−
| 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]].<br>
+
| 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]].
  
 
|-
 
|-
Line 90: Line 88:
 
|-
 
|-
 
| align="center" | [[Image:CKEditor_image.png|Image]]  
 
| align="center" | [[Image:CKEditor_image.png|Image]]  
−
| Inserts images into the document. See [[CKEditor_3.x/Users Guide/Common Tasks/Inserting Images|Inserting Images]].<br>
+
| Inserts images into the document. See [[CKEditor_3.x/Users Guide/Common Tasks/Inserting Images|Inserting Images]].
 
|-
 
|-
 
| align="center" | [[Image:CKEditor_flash.png|Flash]]  
 
| align="center" | [[Image:CKEditor_flash.png|Flash]]  
Line 96: Line 94:
 
|-
 
|-
 
| align="center" | [[Image:CKEditor_table.png|Table]]  
 
| align="center" | [[Image:CKEditor_table.png|Table]]  
−
| Creates a table with the defined number of columns and rows. See [[CKEditor_3.x/Users Guide/Common Tasks/Tables|Tables]].<br>
+
| 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_hr.png|Insert Horizontal Line]]  
 
| align="center" | [[Image:CKEditor_hr.png|Insert Horizontal Line]]  
−
| Inserts a divider line (horizontal rule). <br>
+
| Inserts a divider line (horizontal rule).
 
|-
 
|-
 
| align="center" | [[Image:CKEditor_smiley.png|Smiley]]  
 
| align="center" | [[Image:CKEditor_smiley.png|Smiley]]  
−
| Inserts an emoticons image (smiley faces, email icon, lightbulb, etc.).<br>
+
| Inserts an emoticons image (smiley faces, email icon, lightbulb, etc.).
 
|-
 
|-
 
| align="center" | [[Image:CKEditor_specialchar.png|Insert Special Character]]  
 
| align="center" | [[Image:CKEditor_specialchar.png|Insert Special Character]]  
−
| Inserts special characters.<br>
+
| Inserts special characters.
 
|-
 
|-
 
| align="center" | [[Image:CKEditor_pagebreak.png|Insert Page Break for Printing]]  
 
| align="center" | [[Image:CKEditor_pagebreak.png|Insert Page Break for Printing]]  
−
| Inserts a printing page break. Only impacts printed version. <br>
+
| Inserts a printing page break. Only impacts printed version.
 
|-
 
|-
 
| align="center" | [[Image:CKEditor_styles.png|Formatting Styles]]  
 
| align="center" | [[Image:CKEditor_styles.png|Formatting Styles]]  
−
| Styles &amp; 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]].<br>
+
| Styles &amp; 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|Text Color]]  
 
| align="center" | [[Image:CKEditor_textcolor.png|Text Color]]  
−
| Changes the color of the text. See[[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]].<br>
+
| Changes the color of the text. See[[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]].
 
|-
 
|-
 
| align="center" | [[Image:CKEditor_backgroundcolor.png|Background Color]]  
 
| align="center" | [[Image:CKEditor_backgroundcolor.png|Background Color]]  
−
| Changes the background color of the text. See[[CKEditor_3.x/Users Guide/Common Tasks/Text Formatting|Text Formatting]].<br>
+
| 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|Maximize]]  
 
| align="center" | [[Image:CKEditor_maximize.png|Maximize]]  
Line 133: Line 131:
 
{| cellspacing="0" cellpadding="3" border="1"
 
{| cellspacing="0" cellpadding="3" border="1"
 
|-
 
|-
−
| nowrap="nowrap" align="center" | '''Toolbar Element'''<br>
+
| nowrap="nowrap" align="center" | '''Button'''
 
| '''Function'''
 
| '''Function'''
 
|-
 
|-
 
| align="center" | [[Image:CKEditor_form.png|Form]]
 
| align="center" | [[Image:CKEditor_form.png|Form]]
−
| Creates a new form block into the page.<br>
+
| Creates a new form block into the page.
 
|-
 
|-
 
| align="center" | [[Image:CKEditor_checkbox.png|Checkbox]]
 
| align="center" | [[Image:CKEditor_checkbox.png|Checkbox]]
Line 145: Line 143:
 
| Inserts a radio button to the page.
 
| Inserts a radio button to the page.
 
|-
 
|-
−
| align="center" | [[Image:CKEditor_textfield.png|Text Field]]<br>
+
| align="center" | [[Image:CKEditor_textfield.png|Text Field]]
 
| Inserts a text field into the page.<br>
 
| Inserts a text field into the page.<br>
 
|-
 
|-
Line 151: Line 149:
 
| Inserts a multi-line text area into the page.
 
| Inserts a multi-line text area into the page.
 
|-
 
|-
−
| align="center" | [[Image:CKEditor_selectionfield.png|Selection Field]]<br>
+
| align="center" | [[Image:CKEditor_selectionfield.png|Selection Field]]
−
| Inserts a selection field into the page.<br>
+
| Inserts a selection field into the page.
 
|-
 
|-
−
| align="center" | [[Image:CKEditor_button.png|Button]]<br>
+
| align="center" | [[Image:CKEditor_button.png|Button]]
−
| Inserts a form button into the page.<br>
+
| Inserts a form button into the page.
 
|-
 
|-
 
| align="center" | [[Image:CKEditor_imagebutton.png|Image Button]]
 
| align="center" | [[Image:CKEditor_imagebutton.png|Image Button]]
−
| 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.<br>
+
| 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_hiddenfield.png|Hidden Field]]<br>
+
| align="center" | [[Image:CKEditor_hiddenfield.png|Hidden Field]]
−
| Inserts a hidden field into the page.<br>
+
| Inserts a hidden field into the page.
 
|}
 
|}

Revision as of 19:19, 2 December 2010

This section gives an overview of all features available in the default CKEditor toolbar (download as pdf).

Working with a Document

Button Function
Source View or edit the document source code (for advanced users). See Source Editor.
Save Saves the page you were editing.
New Page Removes all contentes, creating a new blank page.
Preview Preview what the HTML page will look like for users.
Templates Select a layout template. See Templates
Cut Cut the highlighted text to the clipboard. See Cut, Copy and Paste.
Copy Copy the highlighted text to the clipboard. See Cut, Copy and Paste.
Paste Paste as plain text Paste the data copied to the clipboard (with or without formatting). See Cut, Copy and Paste.
Paste from Word Paste content copied from Microsoft Word or similar applications. See Cut, Copy and Paste.
Print Print the current document. See Printing.
Check Spelling CKEditor SCAYT.png Spell check the text in the document or spell check the text as you type. See Spell Checking.
Undo Redo Undo or redo the most recent action taken. See Undo and Redo.
Find Find a word or phrase within the document. See Find and Replace.
Replace Find and replace a word or phrase within the document. See Find and Replace.
Select All Select the entire content in the document.
Remove Format Remove the formatting from the highlighted text.
Bold Italic Underline Strike Through Applies bold, italic, underscore or strikethrough formatting to the highlighted text.See Text Formatting.
Subscript Superscript Superscript or subscript the highlighted text.See Superscript and subscript in Text Formatting.
Insert/Remove Numbered List Insert/Remove Bulleted List Creates numbered or bulleted lists. See Creating Lists.
Decrease Indent Increase Indent Increase or decrease the text indentation.
Block Quote Format a block of text to identify quotations (text provenient from other sources).
Create Div Container Create a new div container in document source.
Align Left Center Align Right Justify‎ Sets the text alignment (left, centered, right or justified). See Text layout and format in Text Formatting.
Text direction from left to right Text direction from right to left Sets the text direction from left to right or from right to left.
Link Unlink 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 Links, E-Mails and Anchors.
Anchor Inserts or modifies a link anchor. See Links, E-Mails and Anchors
Image Inserts images into the document. See Inserting Images.
Flash Inserts a Adobe Flash element into the page. See Inserting Flash
Table Creates a table with the defined number of columns and rows. See Tables.
Insert Horizontal Line Inserts a divider line (horizontal rule).
Smiley Inserts an emoticons image (smiley faces, email icon, lightbulb, etc.).
Insert Special Character Inserts special characters.
Insert Page Break for Printing Inserts a printing page break. Only impacts printed version.
Formatting Styles 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 Text Formatting.
Text Color Changes the color of the text. SeeText Formatting.
Background Color Changes the background color of the text. SeeText Formatting.
Maximize Maximizes the editor size inside the browser.
Show Blocks Shows the block elements boundaries in the text.
About CKEditor Shows information about the CKEditor.

Form Functions

Button Function
Form Creates a new form block into the page.
Checkbox Inserts a checkbox to the page.
Radio Button Inserts a radio button to the page.
Text Field Inserts a text field into the page.
Textarea Inserts a multi-line text area into the page.
Selection Field Inserts a selection field into the page.
Button Inserts a form button into the page.
Image Button 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.
Hidden Field Inserts a hidden field into the page.
Retrieved from "https://docs-old.ckeditor.com/index.php?title=CKEditor_3.x/Users_Guide/Quick_Reference&oldid=5417"