Visual Editor

Overview

When editing a page or post, the content editor has 2 modes (see the red/orange arrows below). Visual mode, also called the WYSIWYG (what you see is what you get) editor, allows you to write content for the web without knowing HTML. If you do know HTML, you can use text mode.

wysiwyg-overview

The WSYWIG editor works similarly to Microsoft Word- simply start typing in the box, and if you want to style something, select the content with your mouse, and click one of the icons in the editor toolbar.

To see what a toolbar icon does, hover over it for a description. If an icon is not clickable, try selecting some text first. Clicking on the kitchen sink (outlined in green) will reveal a second row of tool icons.

The visual editor has a built in spellchecker. All unrecognized words will be underlined with a red squiggle.

Keyboard shortcuts

On Mac use the Command key instead of Ctrl

  • Ctrl+C = copy
  • Ctrl+X = cut
  • Ctrl+V = paste
  • Ctrl+Z = undo
  • Ctrl+A = select all

Row 1 tools

Bold & italics

tinymce-biSelect one or more words, then click on the “B” or “I” symbol to make the text bold or italic.

Lists

unordered list

  • one
  • two
  • three

ordered list

  1. one
  2. two
  3. three

tinymce-listSelect multiple lines of text then click on one of the list icons. If you hit the return key while inside a list, a new list item (bullet or number) will appear. To get out of list mode, click the list button again. Sample list styles can be seen in the light blue box, right.

Blockquote

tinymce-blockquoteFormats a section of text as a blockquote, like the one below:

Here is a sample blockquote. It really stands out!

Horizontal rule

tinymce-hrInserts a section break, like the one below:


Align left / right

tinymce-alignSelect a block of text, then click on the align right or left icon. Text is already left aligned by default, so you would only need to use this if you are working inside of a section that isn’t left aligned.

Links

tinymce-linkAllows you to add/remove a link from selected text. See adding a link

Undo / redo

tinymce-redoThe counterclockwise arrow will undo the last action you made in the editor. The keyboard shortcut for undo is CTRL-Z. Redo (the clockwise arrow) will cancel out the last undo you made.

Kitchen sink

tinymce-sinkToggles the visibility of the second row of tools.

Fullscreen mode

tinymce-fullscreenHides everything but the content you’re working on, and gives you a minimal version of the toolbar.  Click the “Exit fullscreen mode” link in the upper left to get back to the default editor.

Row 2 tools

If you don’t see these, click on the kitchen sink icon- the last icon in the first row, which looks like a watercolor palette.

Formats

tinymce-formats Allows you to apply more complex styles to your content. Using Meerkat formats

Text color

tinymce-textcolorSelect one or more words, then click the arrow to the right of the text color icon, then select a color from the palette.

Paste as text

tinymce-pastetextBy default, when you paste text into WordPress, formatting like bold, italics, lists, etc. will be copied from your original source. If you want to strip out all formatting, click the paste as text button (recommended for Microsoft products). Click the button again to leave plain text mode.

Remove formatting

tinymce-unformatSelect text, then click this to get rid of any previously applied styles.

Insert custom character

tinymce-charAllows you to add non-standard characters like these: ♠ © £ ≈ ¾ æ

Indent / outdent

tinymce-indentSelect some content, then click on indent. This will create a section that has 30px of space on the left. To unset an indent, select the indented content, and select outdent.

Keyboard shortcuts

tinymce-shortcutsClick for a popup reminder of the keyboard shortcuts you can use in the visual editor.

Shortcodes

tinymce-shortcodesThis item will only display if you have the shortcode builder plugin activated. How to use the shortcode builder

Last modified on April 21, 2015