Rich Editing Basics
Rich editing, also called WYSIWYG for What You See Is What You Get, means your text is formatted as you type. The rich editor creates HTML code behind the scenes while you concentrate on writing. Font styles, links and images all appear approximately as they will on the internet.
WordPress includes a rich HTML editor that works well in all major web browsers used today. However editing HTML is not the same as typing text. Each web page has two major components: the structure, which is the actual HTML code and is produced by the editor as you type, and the display, that is applied to it by the currently selected WordPress theme and is defined in style.css. WordPress is producing valid XHTML 1.0 which means that inserting multiple line breaks (BR tags) after a paragraph would not produce white space on the web page. The BR tags will be removed as invalid by the internal HTML correcting functions.
While using the editor, most basic keyboard shortcuts work like in any other text editor. For example: Shift+Enter inserts line break, Ctrl+C = copy, Ctrl+X = cut, Ctrl+Z = undo, Ctrl+Y = redo, Ctrl+A = select all, etc. (on Mac use the Command key instead of Ctrl). See the Hotkeys tab for all available keyboard shortcuts.
If you do not like the way the rich editor works, you may turn it off from Your Profile submenu, under Users in the admin menu.
Advanced Rich Editing
Images and Attachments
There is a button in the editor toolbar for inserting images that are already hosted somewhere on the internet. If you have a URL for an image, click this button and enter the URL in the box which appears.
If you need to upload an image or another media file from your computer, you can use the Media Library buttons above the editor. The media library will attempt to create a thumbnail-sized copy from each uploaded image. To insert your image into the post, first click on the thumbnail to reveal a menu of options. When you have selected the options you like, click "Send to Editor" and your image or file will appear in the post you are editing. If you are inserting a movie, there are additional options in the "Media" dialog that can be opened from the second toolbar row.
HTML in the Rich Editor
Any HTML entered directly into the rich editor will show up as text when the post is viewed. What you see is what you get. When you want to include HTML elements that cannot be generated with the toolbar buttons, you must enter it by hand in the HTML editor. Examples are tables and <code>. To do this, click the HTML tab and edit the code, then switch back to Visual mode. If the code is valid and understood by the editor, you should see it rendered immediately.
Pasting in the Rich Editor
When pasting content from another web page the results can be inconsistent and depend on your browser and on the web page you are pasting from. The editor tries to correct any invalid HTML code that was pasted, but for best results try using the HTML tab or one of the paste buttons that are on the second row. Alternatively try pasting paragraph by paragraph. In most browsers to select one paragraph at a time, triple-click on it.
Pasting content from another application, like Word or Excel, is best done with the Paste from Word button on the second row, or in HTML mode.
Writing at Full Speed
Rather than reaching for your mouse to click on the toolbar, use these access keys. Windows and Linux use Ctrl + letter. Macintosh uses Command + letter.
| Letter | Action | Letter | Action |
|---|---|---|---|
| c | Copy | v | Paste |
| a | Select all | x | Cut |
| z | Undo | y | Redo |
| b | Bold | i | Italic |
| u | Underline | 1 | Heading 1 |
| 2 | Heading 2 | 3 | Heading 3 |
| 4 | Heading 4 | 5 | Heading 5 |
| 6 | Heading 6 | 9 | Address |
The following shortcuts use different access keys: Alt + Shift + letter.
| Letter | Action | Letter | Action |
|---|---|---|---|
| b | Bold | i | Italic |
| n | Check Spelling | l | Align Left |
| j | Justify Text | c | Align Center |
| d | Strikethrough | r | Align Right |
| u | • List | a | Insert link |
| o | 1. List | s | Remove link |
| q | Quote | m | Insert Image |
| g | Full Screen | t | Insert More Tag |
| p | Insert Page Break tag | h | Help |
| e | Switch to HTML mode | ||
| Editor width in Distraction-free writing mode: | |||
| Alt +Ctrl + | Wider | Alt -Ctrl - | Narrower |
| Alt 0Ctrl 0 | Default width | ||
About TinyMCE
Version: ()
TinyMCE is a platform independent web based Javascript HTML WYSIWYG editor released as Open Source under LGPL by Moxiecode Systems AB. It has the ability to convert HTML TEXTAREA fields or other HTML elements to editor instances.
Copyright © 2003-2011, Moxiecode Systems AB, All rights reserved.
For more information about this software visit the TinyMCE website.
