(Missing dots added) |
|||
(93 intermediate revisions by 3 users not shown) | |||
Line 1: | Line 1: | ||
− | + | __TOC__ | |
− | + | Below you will find an overview of all features available in the default CKEditor [[CKEditor 3.x/Users Guide/Interface/Toolbar|toolbar]]. | |
− | |||
+ | == Working with a Document == | ||
{| cellspacing="0" cellpadding="3" border="1" | {| cellspacing="0" cellpadding="3" border="1" | ||
|- | |- | ||
− | | nowrap="nowrap" align="center" | '''Toolbar | + | | width="120px" nowrap="nowrap" align="center" | '''Toolbar Button''' |
− | | ''' | + | | '''Description''' |
+ | |- | ||
+ | | align="center" | [[Image:CKEditor_source.png|Source]] | ||
+ | | View or edit the source code of the document (for advanced users). See [[CKEditor 3.x/Users Guide/Document/Source|Document Source]]. | ||
+ | |- | ||
+ | | align="center" | [[Image:CKEditor_save.png|Save]] | ||
+ | | Save the contents of CKEditor and submit its data to the server, when CKEditor is placed inside an HTML form. See [[CKEditor 3.x/Users Guide/Document/Save|Saving Content]]. | ||
+ | |- | ||
+ | | align="center" | [[Image:CKEditor_new.png|New Page]] | ||
+ | | Clear the editing area and create a new page. See [[CKEditor 3.x/Users Guide/Document/New|Creating a New Page]]. | ||
+ | |- | ||
+ | | align="center" | [[Image:CKEditor_preview.png|Preview]] | ||
+ | | Show a preview of the document in the shape that will be displayed to end users. See [[CKEditor 3.x/Users Guide/Document/Preview|Document Preview]]. | ||
+ | |- | ||
+ | | align="center" | [[Image:CKEditor_templates.png|Templates]] | ||
+ | | Select a layout template. See [[CKEditor_3.x/Users Guide/Document/Templates|Templates]]. | ||
|- | |- | ||
− | | align="center" | [[Image: | + | | align="center" | [[Image:CKEditor_cut.png|Cut]] |
− | | | + | | Cut the selected text fragment to the clipboard. See [[CKEditor_3.x/Users Guide/Document/Cut, Copy and Paste#Cut|Cut]]. |
|- | |- | ||
− | | align="center" | [[Image: | + | | align="center" | [[Image:CKEditor_copy.png|Copy]] |
− | | | + | | Copy the selected text fragment to the clipboard. See [[CKEditor_3.x/Users Guide/Document/Cut, Copy and Paste#Copy|Copy]]. |
|- | |- | ||
− | | align="center" | [[Image: | + | | align="center" | [[Image:CKEditor_paste.png|Paste]] |
− | | | + | | Paste content copied to the clipboard along with formatting. See [[CKEditor 3.x/Users Guide/Document/Cut, Copy and Paste#Paste|Paste]]. |
|- | |- | ||
− | | align="center" | [[Image: | + | | align="center" | [[Image:CKEditor_paste_text.png|Paste as plain text]] |
− | | | + | | Paste content copied to the clipboard without formatting. See [[CKEditor 3.x/Users Guide/Document/Cut, Copy and Paste#Paste as Plain Text|Paste as Plain Text]]. |
|- | |- | ||
− | | align="center" | [[Image: | + | | align="center" | [[Image:CKEditor_paste_word.png|Paste from Word]] |
− | | | + | | Paste content copied from Microsoft Word or similar applications along with formatting. See [[CKEditor 3.x/Users Guide/Document/Cut, Copy and Paste#Paste from Word|Paste from Word]]. |
|- | |- | ||
− | | align="center" | [[Image: | + | | align="center" | [[Image:CKEditor_print.png|Print]] |
− | | | + | | Print document contents. See [[CKEditor_3.x/Users Guide/Document/Printing|Printing]]. |
|- | |- | ||
− | | align="center" | [[Image: | + | | align="center" | [[Image:CKEditor_pagebreak.png|Insert Page Break for Printing]] |
− | | | + | | Insert a page break. This only impacts the printed version. See [[CKEditor_3.x/Users Guide/Document/Printing#Page_Breaks|Page Breaks]]. |
|- | |- | ||
− | | align="center" | [[Image: | + | | align="center" | [[Image:CKEditor_spellcheck.png|Check Spelling]] [[Image:CKEditor_SCAYT.png|Spell Check As You Type]] |
− | | | + | | Check spelling of the document text or turn on the Spell Check As You Type (SCAYT) feature. See [[CKEditor_3.x/Users Guide/Spell Checking|Spell Checking]]. |
|- | |- | ||
− | | align="center" | [[Image: | + | | align="center" | [[Image:CKEditor_undo.png|Undo]] [[Image:CKEditor_redo.png|Redo]] |
− | | | + | | Undo or redo the most recent action performed. See [[CKEditor_3.x/Users Guide/Document/Undo and Redo|Undo and Redo]]. |
|- | |- | ||
− | | align="center" | [[Image: | + | | align="center" | [[Image:CKEditor_find.png|Find]] |
− | | | + | | Find a word or phrase in the document. See [[CKEditor_3.x/Users Guide/Document/Find and Replace#Find|Find]]. |
|- | |- | ||
− | | align="center" | [[Image: | + | | align="center" | [[Image:CKEditor_find_replace.png|Replace]] |
− | | | + | | Find and replace a word or phrase in the document. See [[CKEditor_3.x/Users Guide/Document/Find and Replace#Replace|Replace]]. |
− | |||
|- | |- | ||
− | | align="center" | [[Image: | + | | align="center" | [[Image:CKEditor_selectall.png|Select All]] |
− | | | + | | Select all contents of the document. See [[CKEditor_3.x/Users Guide/Document/Selecting|Text Selection]]. |
|- | |- | ||
− | | align="center" | [[Image: | + | | align="center" | [[Image:CKEditor_remove_format.png|Remove Format]] |
− | | | + | | Remove the formatting of the selected text. See [[CKEditor_3.x/Users Guide/Document/Remove Format|Remove Format]]. |
|- | |- | ||
− | | align="center" | [[Image: | + | | align="center" | [[Image:CKEditor_maximize.png|Maximize]] |
− | | | + | | Maximize the editor in the browser window. See [[CKEditor 3.x/Users Guide/Interface#Resizing and Maximizing CKEditor|Resizing and Maximizing CKEditor]]. |
|- | |- | ||
− | | align="center" | [[Image: | + | | align="center" | [[Image:CKEditor_blocks.png|Show Blocks]] |
− | | | + | | Highlight all block-level elements in the document. See [[CKEditor_3.x/Users Guide/Document/Blocks|Show Blocks]]. |
|- | |- | ||
− | | align="center" | [[Image: | + | | align="center" | [[Image:CKEditor_about.png|About CKEditor]] |
− | | | + | | Show information about CKEditor. See [[CKEditor 3.x/Users Guide/Introduction#CKEditor_Version|CKEditor Version]]. |
+ | |} | ||
+ | |||
+ | == Text Styling == | ||
+ | {| cellspacing="0" cellpadding="3" border="1" | ||
|- | |- | ||
− | | align="center" | | + | | width="120px" nowrap="nowrap" align="center" | '''Toolbar Button''' |
− | + | | '''Description''' | |
|- | |- | ||
− | | align="center" | [[Image: | + | | align="center" | [[Image:CKEditor_bold.png|Bold]] [[Image:CKEditor_italic.png|Italic]] [[Image:CKEditor_underline.png|Underline]] [[Image:CKEditor_strikethrough.png|Strike Through]] |
− | + | | Apply '''bold''', ''italic'', <ins>underline</ins> or <strike>strike-through</strike> formatting to the text. See [[CKEditor_3.x/Users Guide/Styling/Bold, Italic, Underline, and Strike-through|Bold, Italic, Underline, and Strike-through]]. | |
|- | |- | ||
− | | align="center" | [[Image: | + | | align="center" | [[Image:CKEditor_subscript.png|Subscript]] [[Image:CKEditor_superscript.png|Superscript]] |
− | | | + | | Apply superscript or subscript formatting to the text. See [[CKEditor 3.x/Users Guide/Styling/Subscript and Superscript|Subscript and Superscript]]. |
|- | |- | ||
− | | align="center" | [[Image: | + | | align="center" | [[Image:CKEditor_styles.png|Formatting Styles]] |
− | + | | Apply pre-defined combinations of various formatting options to block and inline elements. See [[CKEditor_3.x/Users Guide/Styling/Styles|Formatting Styles]]. | |
|- | |- | ||
− | | align="center" | [[Image: | + | | align="center" | [[Image:CKEditor_paragraphformat.png|Paragraph Format]] |
− | | | + | | Apply pre-defined block-level combinations of various formatting options. See [[CKEditor_3.x/Users Guide/Styling/Format|Paragraph Format]]. |
|- | |- | ||
− | | align="center" | [[Image: | + | | align="center" | [[Image:CKEditor_font.png|Font Name]] |
− | | | + | | Change the typeface of the text. See [[CKEditor 3.x/Users Guide/Styling/Font|Font Name]]. |
|- | |- | ||
− | | align="center" | [[Image: | + | | align="center" | [[Image:CKEditor_size.png|Font Size]] |
− | | | + | | Change the font size of the text. See [[CKEditor 3.x/Users Guide/Styling/Size|Font Size]]. |
|- | |- | ||
− | | align="center" | [[Image: | + | | align="center" | [[Image:CKEditor_textcolor.png|Text Color]] |
− | + | | Change the color of the text. See [[CKEditor_3.x/Users Guide/Styling/Text Color|Text Color]]. | |
|- | |- | ||
− | | align="center" | [[Image: | + | | align="center" | [[Image:CKEditor_backgroundcolor.png|Background Color]] |
− | | | + | | Change the background color of the text. See [[CKEditor_3.x/Users Guide/Styling/Background Color|Background Color]]. |
+ | |} | ||
+ | |||
+ | == Text Layout == | ||
+ | {| cellspacing="0" cellpadding="3" border="1" | ||
+ | |- | ||
+ | | width="120px" nowrap="nowrap" align="center" | '''Toolbar Button''' | ||
+ | | '''Description''' | ||
+ | |- | ||
+ | | align="center" | [[Image:CKEditor_outdent.png|Decrease Indent]] [[Image:CKEditor_indent.png|Increase Indent]] | ||
+ | | Increase or decrease text indentation. See [[CKEditor 3.x/Users Guide/Layout/Indentation|Text Indentation]]. | ||
|- | |- | ||
− | | align="center" | [[Image: | + | | align="center" | [[Image:CKEditor_blockquote.png|Block Quote]] |
− | | | + | | Format a block of text as indented quotation. See [[CKEditor 3.x/Users Guide/Layout/Block Quote|Block Quote]]. |
|- | |- | ||
− | | align="center" | [[Image: | + | | align="center" | [[Image:CKEditor_div.png|Create Div Container]] |
− | | | + | | Create a new <code>div</code> element in document source. See [[CKEditor_3.x/Users_Guide/Layout/Div|Creating Div Container]]. |
|- | |- | ||
− | | align="center" | [[Image: | + | | align="center" | [[Image:CKEditor_alignleft.png|Align Left]] [[Image:CKEditor_center.png|Center]] [[Image:CKEditor_alignright.png|Align Right]] [[Image:CKEditor_justify.png|Justify]] |
− | | | + | | Set text alignment (left, centered, right or justified). See [[CKEditor 3.x/Users Guide/Layout/Alignment|Text Alignment]]. |
|- | |- | ||
− | | align="center" | [[Image: | + | | align="center" | [[Image:CKEditor_ltr.png|Text direction from left to right]] [[Image:CKEditor_rtl.png|Text direction from right to left]] |
− | + | | Set text direction as from left to right (default value for most Western languages) or from right to left (languages like Arabic, Persian, Hebrew). | |
|- | |- | ||
− | | align="center" | [[Image: | + | | align="center" | [[Image:CKEditor_hr.png|Insert Horizontal Line]] |
− | | | + | | Insert a divider line (horizontal rule) into the document. See [[CKEditor 3.x/Users Guide/Layout/Horizontal Line|Horizontal Line]]. |
+ | |} | ||
+ | |||
+ | == Rich Text == | ||
+ | {| cellspacing="0" cellpadding="3" border="1" | ||
|- | |- | ||
− | | align="center" | | + | | width="120px" nowrap="nowrap" align="center" | '''Toolbar Button''' |
− | | | + | | '''Description''' |
|- | |- | ||
− | | align="center" | [[Image: | + | | align="center" | [[Image:CKEditor_numberedlist.png|Insert/Remove Numbered List]] [[Image:CKEditor_bulletedlist.png|Insert/Remove Bulleted List]] |
− | | | + | | Create a numbered or bulleted list. See [[CKEditor 3.x/Users Guide/Rich Text/Lists|Creating Lists]]. |
|- | |- | ||
− | | align="center" | [[Image: | + | | align="center" | [[Image:CKEditor_link.png|Link]] [[Image:CKEditor_unlink.png|Unlink]] |
− | | | + | | Create or remove a hyperlink in the text. These features may also be used to manage file uploads and links to files on the web server. See [[CKEditor 3.x/Users Guide/Rich Text/Links|Links, E-Mails and Anchors]]. |
|- | |- | ||
− | | align="center" | [[Image: | + | | align="center" | [[Image:CKEditor_anchor.png|Anchor]] |
− | | | + | | Insert a link anchor to the text. See [[CKEditor 3.x/Users Guide/Rich Text/Links#Anchors|Anchors]]. |
|- | |- | ||
− | | align="center" | [[Image: | + | | align="center" | [[Image:CKEditor_image.png|Image]] |
− | | | + | | Insert an image into the document. See [[CKEditor 3.x/Users Guide/Rich Text/Images|Inserting Images]]. |
|- | |- | ||
− | | align="center" | [[Image: | + | | align="center" | [[Image:CKEditor_flash.png|Flash]] |
− | | | + | | Insert an Adobe Flash object into the document. See [[CKEditor 3.x/Users Guide/Rich Text/Flash|Inserting Flash]]. |
|- | |- | ||
− | | align="center" | [[Image: | + | | align="center" | [[Image:CKEditor_table.png|Table]] |
− | | | + | | Create a table with the defined number of columns and rows. See [[CKEditor_3.x/Users Guide/Rich Text/Tables|Creating Tables]]. |
|- | |- | ||
− | | align="center" | [[Image: | + | | align="center" | [[Image:CKEditor_smiley.png|Smiley]] |
− | | | + | | Insert an emoticon image (smiley or icon). See [[CKEditor_3.x/Users Guide/Rich Text/Special Characters and Smileys#Inserting Smileys|Inserting Smileys]]. |
|- | |- | ||
− | | align="center" | [[Image: | + | | align="center" | [[Image:CKEditor_specialchar.png|Insert Special Character]] |
− | | | + | | Insert a special character or symbol. See [[CKEditor_3.x/Users Guide/Rich Text/Special Characters and Smileys#Inserting Special Characters|Inserting Special Characters]]. |
+ | |- | ||
+ | | align="center" | [[Image:CKEditor_iframe.png|IFrame]] | ||
+ | | Insert an inline frame (<code>iframe</code>). See [[CKEditor 3.x/Users Guide/Rich Text/IFrame|Inserting IFrames]]. | ||
|} | |} | ||
− | == Form | + | == Form Elements == |
− | |||
{| cellspacing="0" cellpadding="3" border="1" | {| cellspacing="0" cellpadding="3" border="1" | ||
|- | |- | ||
− | | nowrap="nowrap" align="center" | '''Toolbar | + | | width="120px" nowrap="nowrap" align="center" | '''Toolbar Button''' |
− | | ''' | + | | '''Description''' |
|- | |- | ||
− | | align="center" | [[Image:CKEditor_form. | + | | align="center" | [[Image:CKEditor_form.png|Form]] |
− | | | + | | Insert a new form into the document. See [[CKEditor 3.x/Users Guide/Rich Text/Forms|Creating Forms]]. |
|- | |- | ||
− | | align="center" | [[Image:CKEditor_checkbox. | + | | align="center" | [[Image:CKEditor_checkbox.png|Checkbox]] |
− | | | + | | Insert a checkbox into the document form. See [[CKEditor 3.x/Users Guide/Rich Text/Forms#Checkbox|Checkbox]]. |
|- | |- | ||
− | | align="center" | [[Image:CKEditor_radiobutton. | + | | align="center" | [[Image:CKEditor_radiobutton.png|Radio Button]] |
− | | | + | | Insert a radio button into the document form. See [[CKEditor 3.x/Users Guide/Rich Text/Forms#Radio Button|Radio Button]]. |
|- | |- | ||
− | | align="center" | [[Image:CKEditor_textfield. | + | | align="center" | [[Image:CKEditor_textfield.png|Text Field]] |
− | | | + | | Insert a text field into the document form. See [[CKEditor 3.x/Users Guide/Rich Text/Forms#Text Field|Text Field]]. |
|- | |- | ||
− | | align="center" | [[Image:CKEditor_textarea. | + | | align="center" | [[Image:CKEditor_textarea.png|Textarea]] |
− | | | + | | Insert a multi-line text area into the document form. See [[CKEditor 3.x/Users Guide/Rich Text/Forms#Textarea|Textarea]]. |
|- | |- | ||
− | | align="center" | [[Image: | + | | align="center" | [[Image:CKEditor_selectionfield.png|Selection Field]] |
− | | | + | | Insert a selection field into the document form. See [[CKEditor 3.x/Users Guide/Rich Text/Forms#Selection Field|Selection Field]]. |
|- | |- | ||
− | | align="center" | [[Image:CKEditor_button. | + | | align="center" | [[Image:CKEditor_button.png|Button]] |
− | | | + | | Insert a button into the document form. See [[CKEditor 3.x/Users Guide/Rich Text/Forms#Button|Button]]. |
|- | |- | ||
− | | align="center" | [[Image: | + | | align="center" | [[Image:CKEditor_imagebutton.png|Image Button]] |
− | | | + | | Insert an image button into the document form. See [[CKEditor 3.x/Users Guide/Rich Text/Forms#Image Button|Image Button]]. |
|- | |- | ||
− | | align="center" | [[Image: | + | | align="center" | [[Image:CKEditor_hiddenfield.png|Hidden Field]] |
− | | | + | | Insert a hidden field into the document form. See [[CKEditor 3.x/Users Guide/Rich Text/Forms#Hidden Field|Hidden Field]]. |
|} | |} |
Latest revision as of 13:28, 10 March 2011
Below you will find an overview of all features available in the default CKEditor toolbar.
Working with a Document
Toolbar Button | Description |
View or edit the source code of the document (for advanced users). See Document Source. | |
Save the contents of CKEditor and submit its data to the server, when CKEditor is placed inside an HTML form. See Saving Content. | |
Clear the editing area and create a new page. See Creating a New Page. | |
Show a preview of the document in the shape that will be displayed to end users. See Document Preview. | |
Select a layout template. See Templates. | |
Cut the selected text fragment to the clipboard. See Cut. | |
Copy the selected text fragment to the clipboard. See Copy. | |
Paste content copied to the clipboard along with formatting. See Paste. | |
Paste content copied to the clipboard without formatting. See Paste as Plain Text. | |
Paste content copied from Microsoft Word or similar applications along with formatting. See Paste from Word. | |
Print document contents. See Printing. | |
Insert a page break. This only impacts the printed version. See Page Breaks. | |
Check spelling of the document text or turn on the Spell Check As You Type (SCAYT) feature. See Spell Checking. | |
Undo or redo the most recent action performed. See Undo and Redo. | |
Find a word or phrase in the document. See Find. | |
Find and replace a word or phrase in the document. See Replace. | |
Select all contents of the document. See Text Selection. | |
Remove the formatting of the selected text. See Remove Format. | |
Maximize the editor in the browser window. See Resizing and Maximizing CKEditor. | |
Highlight all block-level elements in the document. See Show Blocks. | |
Show information about CKEditor. See CKEditor Version. |
Text Styling
Toolbar Button | Description |
Apply bold, italic, underline or | |
Apply superscript or subscript formatting to the text. See Subscript and Superscript. | |
Apply pre-defined combinations of various formatting options to block and inline elements. See Formatting Styles. | |
Apply pre-defined block-level combinations of various formatting options. See Paragraph Format. | |
Change the typeface of the text. See Font Name. | |
Change the font size of the text. See Font Size. | |
Change the color of the text. See Text Color. | |
Change the background color of the text. See Background Color. |
Text Layout
Toolbar Button | Description |
Increase or decrease text indentation. See Text Indentation. | |
Format a block of text as indented quotation. See Block Quote. | |
Create a new div element in document source. See Creating Div Container.
| |
Set text alignment (left, centered, right or justified). See Text Alignment. | |
Set text direction as from left to right (default value for most Western languages) or from right to left (languages like Arabic, Persian, Hebrew). | |
Insert a divider line (horizontal rule) into the document. See Horizontal Line. |
Rich Text
Toolbar Button | Description |
Create a numbered or bulleted list. See Creating Lists. | |
Create or remove a hyperlink in the text. These features may also be used to manage file uploads and links to files on the web server. See Links, E-Mails and Anchors. | |
Insert a link anchor to the text. See Anchors. | |
Insert an image into the document. See Inserting Images. | |
Insert an Adobe Flash object into the document. See Inserting Flash. | |
Create a table with the defined number of columns and rows. See Creating Tables. | |
Insert an emoticon image (smiley or icon). See Inserting Smileys. | |
Insert a special character or symbol. See Inserting Special Characters. | |
Insert an inline frame (iframe ). See Inserting IFrames.
|
Form Elements
Toolbar Button | Description |
Insert a new form into the document. See Creating Forms. | |
Insert a checkbox into the document form. See Checkbox. | |
Insert a radio button into the document form. See Radio Button. | |
Insert a text field into the document form. See Text Field. | |
Insert a multi-line text area into the document form. See Textarea. | |
Insert a selection field into the document form. See Selection Field. | |
Insert a button into the document form. See Button. | |
Insert an image button into the document form. See Image Button. | |
Insert a hidden field into the document form. See Hidden Field. |