Home

Rich Text Editing

Displaying text on your post screen the way it will look on your site is called rich text editing, or "WYSIWYG". This stands for "What You See Is What You Get" and is pronounced wizzy-wig.

This rich text editing provides an interface similar to that in most word processors. The TypePad post editor supports rich text editing, and your browser needs to support the rich text editing features also. See Does my browser support rich text editing?

Using the Post Editor

When you open the new post page in TypePad, you will see two tabs above the post area, Compose Post and Edit HTML:

WYSIWYG

Compose Post

The Compose Post tab is where you compose or edit your post in rich text (WYSIWYG) mode. The text formatting will appear directly on your post screen while you are typing.

By default, rich text mode is enabled if your browser supports it. Also see Can I disable rich text editing?

Edit HTML

Switch to the Edit HTML tab to edit in plain text mode. When you are in plain text mode, not all of the WYSIWYG options are available because the HTML is entered directly into the post area instead. Click between the tabs to switch modes.

In HTML mode you can use the formatting buttons for Bold, Italic, Underline and Strikethrough, the Create Link & Create Email Link buttons, and the Upload Image & File buttons.

The following functions are available in rich text mode only: Font Size, Font Color, Begin Quote & End Quote, Bulleted & Numbered List, and Spell Check.

Toolbar

The buttons in the rich text editing toolbar add formatting to your text. This works by clicking a formatting button and then typing.

The words typed after the point of clicking the formatting button will use the chosen format until the button is clicked again to turn it off. You can also format text by highlighting existing words and selecting a button on the toolbar to apply that format.

Bigger/Smaller

The Bigger/Smaller setting is used to toggle the size of the post area. The default size is small. To make it bigger, click the "Bigger" link. When the post area is set to big, the link will say "Smaller" and you can click it to switch back to a small post area.

This post area size setting is available in both rich text editing and plain text modes. The setting is not remembered the next time you create a post.

Using the Buttons on the Toolbar

Each of the buttons on the toolbar has a different formatting function. The following section reviews each button on the toolbar, in order from left to right.

If you don't remember what the buttons do, you can hold your cursor over a button in the toolbar to see a tool tip with the name of the button.

Formatting Buttons

The formatting buttons can be used separately or in combination. For example, text can be formatted as bold only, or large, blue and bold.

Font Size Font Size
The Font Size drop-down menu allows you to set the size of the text in your post. Choose from Smaller (60% size), Small (80% size), Normal (100% font size), Large (120% size), or Larger (140% size).
The default setting is "Normal" when starting a new post. Normal is the font size that you have set for the Post Body in the Design > Style setup for the weblog. The editor also uses the font family that you have set for the weblog template in Design > Style.
Bold Bold
The Bold button makes text bold like this.
Italic Italic
The Italic button makes text italic like this.
Underline Underline
The Underline button underlines text like this.
Strikethrough Strikethrough
The Strikethrough button crosses out text like this.
Font Color Font Color
The Font Color button opens the color chooser popup. In the color chooser, click the color you would like for the text and this will automatically close the color chooser and format your text with the new color.

Link Buttons

The Link Buttons are used for creating code in your post to make a link.

Create Link Create Link
The Create Link button makes the code for a link to another page or site from your post. Here is an example of a link: This is a link to TypePad.
To make a link, click the Create Link button. A box will pop up that prompts you for the URL you would like to link to. Type or paste the URL in the box and press "OK". The URL should be a full URL with the http:// in the front (for example, enter: http://www.typepad.com)
Next, you will be prompted to enter the text to link. Type the word or words that you would like to use for the link (for example, enter: This is a link to TypePad) and press "OK". The link will be created automatically in your post area.
Note: when creating links in rich text mode, the Create Link button is pressed first before typing the word, instead of highlighting an existing word.
Previewing a link

In Firefox, you can right click on the linked text to open the standard context menu for links and select how you wish to open the link. You can also use Ctrl+Click, which will open the link in a new tab or a new window, depending on your browser preferences. This behavior is not supported in Internet Explorer.

If you wish to preview a link in Internet Explorer or another browser, click the "Preview" button in the button bar of the post page to go to post preview mode. In post preview mode, you can click on the link to test it. Click on "Re-edit Post" to resume editing the post after testing, or click "Save" to save your post.

Create Email Link Create Email Link
An email link is a link that opens the email client of the visitor when it is clicked. Here is an example of an email link: This is an email link.
The Create Email Link works the same way as the Create Link button, but with entering an email address instead of a URL.

Quote Buttons

The quote buttons move your text in or out from the left margin of your post.

Begin Quote Begin Quote
The Begin Quote button will move the text in from the left side of the post, so it is indented. This is commonly used to set off a quote or passage.
You can click the Begin Quote button while your cursor is in a line of text and that will indent that line, or highlight multiple lines to indent all at once. Or, click the Begin Quote button and type from there and all lines will be indented until you press the End Quote button to move it back.
End Quote End Quote
The End Quote button works the opposite of the Begin Quote button, by moving text back to the left. If you are already at the left margin, nothing will happen when you click the End Quote button.

This is an example of quoted text.

List Buttons

It is easy to create lists in your posts using the List Buttons. You can create bulleted or numbered lists.

Bulleted List Bulleted List
A bulleted list uses a bullet character at the beginning of each new list item. Here is an example of a bulleted list:
Numbered List Numbered List
A numbered list numbers each list item automatically. Here is an example of a numbered list:
  1. item one
  2. item two
  3. item three

Lists are created as you type, or by highlighting existing text. To create as you type, click the Bulleted (or Numbered) List button and this will start the list. Type the first item and press Enter on your keyboard. Type the remaining items, pressing Enter after each one. When you are finished with the list, press Enter twice or click the list button again to turn off list formatting.

Create lists from existing text by highlighting the text and clicking the Bulleted (or Numbered) List button to apply list formatting to the highlighted area.

Embedded Lists

An embedded list is a list that is inside another list, for sub-items. Here is an example of an embedded list, which can be created using a bulleted or numbered list:

To create an embedded list, start with a regular list. Place your cursor at the end of the list item for which you wish to create a sub-list and press the Enter key to create a new line.

Then click the Begin Quote button and this will indent your item as a sub-list. To move the sub-list item back to the main level list, use the End Quote button. (The tab key and shift-tab do the same as the Begin Quote and End Quote buttons for creating a sub-list.)

Inserting Images and Files

Insert Image Insert Image
See Inserting an Image in a Post.
Using the WYSIWYG, you can also click an image in the editor after you've uploaded the image to your post and handles will appear as a box around the image. Using the handles, you can resize the image to the size would like to display it in your post.
Insert File Insert File
See Inserting a File in a Post.

Check Spelling Check Spelling

The Check Spelling option will check through your post to see if each word is spelled correctly. The Spell check button is available on your rich text editing toolbar if the dictionary is available for the language set in your weblog configuration. Also see Why doesn't the Check Spelling button display in my toolbar?

To start checking the words in your post, click the Check Spelling button on the toolbar. This will open a new window with your post on the right-hand side, and spelling tools on the left. If no words are misspelled then the status bar will say "No spelling errors were found". Click the "Close Window" button to exit the spell checker.

If you have words that are misspelled in the post, they will be shown marked with a red dotted underline. The check starts at the top of the post and goes through each of the misspelled words by highlighting one at a time for your review. The first misspelled word will be highlighted in blue. Other occurrences of the same word are highlighted in a lighter blue.

With the misspelled word highlighted in blue, you have the opportunity to use the spelling tools for Replace and Ignore. You can also click on any misspelled word to use the spelling tools on it:

Replace
First, to set a replacement, click a word that is suggested in the Suggestions box or type directly in the word text box. When you are satisfied with your replacement, click the "Replace" button and the old text will be replaced with the new.
Replace all
"Replace all" works the same as "Replace" but will change all occurrences of that word in your post instead of just the one that is highlighted.
Ignore
Clicking the "Ignore" button will skip the current word. Use this if you would like to use what you originally posted instead of a new or suggested spelling. This will skip that word and go onto the next misspelled word.
Ignore All
"Ignore all" works the same as "Ignore" but will ignore all occurrences of that word in your post instead of just the one that is highlighted.
Revert to Original
"Revert to Original" takes a word that you've already replaced and changes it back to the way you typed it originally. Click on an underlined word to highlight it and click the Revert button to change the word back to the way you had it typed originally.

When you are finished checking spelling in the post, click the "Save Changes" button and this will close the spell checker and apply the changes to your post.

You could also select to "Discard Changes" during the spell checking and this will forget what you have done. If you have made changes already, you will be prompted to confirm that you wish to discard the changes.


Questions and Answers

Does my browser support rich text editing?

You can use the WYSIWYG editing features in the following browsers:

If your browser does not support rich text editing, the plain text mode will be displayed instead. Browsers that do not support rich text editing are Opera, and the following Macintosh browsers: Internet Explorer, Camino, and Safari.

If you wish to use rich text editing on a Macintosh, Firefox is a good option (Firefox will also work with Windows).

Can I disable rich text editing?

You can turn off rich text editing by clicking the Customize the display of this post link under the post areas of the Edit Post page. This will open the Post Screen Configuration where you can select to use plain text mode.

How do I indent quoted text?

Use the Begin Quote button to move a block of text in from the left side. See above for tips on the Quote buttons.

Where is the option to convert line breaks in the post?

The Text Formatting option to convert line breaks is turned off when in WYSIWYG mode. It is not necessary because you can make line breaks directly in the post editor.

Note: Browsers treat the Enter key differently. In Internet Explorer, Enter will create a new paragraph. To add a single line break, use Shift+Enter. In many other browsers, the Enter key will create a new line, and pressing Enter twice will create a new paragraph.

Can I paste formatted text from another editor?

At the current time, copying and pasting formatted text from a word processor like MS Word is not supported. If you expect to be copying and pasting formatted text from another editor, you should disable rich text editing and use plain text mode.

Why doesn't the Check Spelling button display in my toolbar?

Spell Check will appear if you are using a language setting on the weblog that has an available spelling dictionary. For your language setting, see the "Language for date display" in Setting Your Weblog Post Options (Configure > Display for the weblog). We currently support spell checking in English, French, German, Dutch, Norwegian, Portuguese and Spanish.

Why is a word marked as spelled wrong but it is spelled correctly?

The dictionary is shared with all users and some custom words may not be part of the dictionary at this time. You can use the "Ignore" button in the spelling tools to skip that word if it is indeed typed the way you would like.

How do I paste a code snippet or HTML into my post?

If you would like to paste code onto a post for display on your weblog, use the Edit HTML tab to insert the code. Switch back to the Compose Post tab to see how it will be displayed on your site. Note: If you enter code into the post using rich text mode, it will display on your site as the text of the code when you post it.

What if I do some formatting and I don't like it?

Use the formatting buttons to correct it, or pressing Ctrl-Z on your keyboard will undo your last action.

What if I have a problem or question?

If you have any questions while using the rich text editor, you can Open a New Help Ticket and we'll help you out.


Copyright © 2003-2005 Six Apart

[top]