TinyMCE End User Guide

Clicking on any of the buttons above will take you to the help for that particular button.

Preface

TinyMCE is a platform independent web based Javascript HTML WYSIWYG (What You See Is What You Get) editor control released as Open Source under LGPL by Moxiecode Systems AB.

This document is intended to give end-users of websites using TinyMCE, guidance with using the editor.

Contents

• Introduction
• The TinyMCE Toolbar
• Save, Cancel and New
• Basic Styling
• Text Alignment
• Fonts and Styles
• Cut and Paste
• Searching and Replacing Text
• Bullet Point Lists
• Numbered Lists
• Un-doing and Re-doing Changes
• Linking to Other Pages
• Anchors
• Images
• Editing HTML Directly
• Cleaning-up your HTML Code
• Inserting the Current Date and Time
• Colors
• Working with Tables

Introduction

If you've used a word processor such as Microsoft Word™ or Open Office™, then most of the functionality provided by TinyMCE will seem familiar.

However, whereas a word processor is primarily designed for producing documents to be printed on paper, editors such as TinyMCE are designed for showing documents on the web via a web browser.

When creating your page content using TinyMCE, there are a few things you should always keep in mind:

• There are various web browsers currently in use, all have their own quirks and ways of displaying your content.
  Firefox, Internet Explorer, Safari, Google Chrome and Opera are the most popular, but there are others.
• The screen size people will be viewing your content on may vary considerably, from as small as 800x600 pixels to 1900x1200 pixels and greater. However, it is fair to assume that your average user will have a screen size of 1024x768 or greater.
• The range of fonts available on a user's computer may be different from yours, so don't rely on a user having a particular font on their computer.

In short, you cannot always guarantee that your content will look exactly the same on someone else's computer.

The look and feel of your website is usually dictated by a Style Sheet (known as CSS, or Cascading Style Sheet). These style sheets tell a user's web browser how to display the standard formats such as Headings, Paragraphs and Tables.

A considerable amount of effort will have been taken to ensure these style sheets make your web site look the same on all the major browsers. Wherever possible, you should keep to these standard styles in order that your pages will be displayed consistently across the various browsers, and will retain the same style as the rest of your website.

The TinyMCE Toolbar

The TinyMCE is split into two areas: the toolbar, and the editing area:

The editing area is where you type in your content.

The toolbar sits at the top, providing you with all the options and functionality needed to style your page:

Clicking on any of the buttons above will take you to the help for that particular button.

Note: The range of buttons available on the toolbar can differ between web-sites.
This document attempts to address the most commonly used, however there may be others not covered by this guide.

Save, Cancel and New

The following buttons can be used for saving, cancelling and creating new page content:

	Save's any changes you've made to your document.
	Cancel's any changes you've made to your document, reverting it to how it was the last time you saved it.
	Clears any content so you can start creating your page from scratch.
	Similar to Cancel, this button will revert your content back to how it was the last time you saved it, but unlike Cancel allows you to continue editing it.

Basic Styling

The following buttons change the basic styling of your text:

	Toggles between "Bold" and "Normal" text.
	Toggles between "Italics" and "Normal" text.
	Toggles between "Underline" and "Normal" text. Note: Be careful that your underlined text doesn't make the user think this is a hyperlink to another page.
	Toggles between "Strikeout" and "Normal" text.

As these buttons are toggles, click them once to turn the style on and click it again to switch it off. Any combination of these styles can be used together.

There are two other common styles that can also be applied:

	Toggles between "subscript" and "Normal" text.
	Toggles between "superscript" and "Normal" text.

Finally, there are two other styles that may be used to indicate changes in your text:

	Puts a red strike-through line through your text, indicating that this text has been deleted and should now be ignored.
	Underlines your text in green, indicating that this text is newly added.

The selected style will either be applied to the current paragraph; or if you've selected an area of text with the mouse, then the style will be applied to the selected area.

Text Alignment

The following buttons affect the alignment or justification of your text:

	Align Left	Your text will be left aligned as in this example.
	Align Center	Your text will be centered as in this example.
	Align Right	Your text will be right aligned as in this example.
	Align Justify	Your text will be justified by adding extra spaces, so that the left and right columns line up.

Fonts and Styles

The drop-down lists shown below allow you to change the font and styles within your page.

Wherever possible, try to avoid using custom fonts and use the "Format" drop-down in preference to the other options.

Although you can choose other fonts, you cannot guarantee that the person viewing your page will have a particular font installed on their computer.

	This allows you to pick from a list of styles available in the CSS (Cascading Style Sheet) associated with your page.
	Allows you to pick from the standard formats available on all browsers, such as headings and paragraph text. The CSS associated with your page will have defined how these should look in order to keep the styling consistent throughout your web site. Wherever possible, try to stick to these styles rather than using custom fonts.
	This defines the "family" of the font to be used for this paragraph, e.g. "Arial" or "Times New Roman". Note that the fonts available in this list are the list of fonts available on your computer, which may be different from the fonts available on someone else's computer. Bear this in mind when choosing a custom font.
	Allows you to specify the size of the text in the current paragraph.

Cut and Paste

The cut, copy and paste buttons allow you to move or duplicate blocks of text and images around your page.

"Cutting" a section of your page removes it from your page, and stores is temporarily in a place called the "Clipboard".

Once in the clipboard, you can "Paste" your section back into the document in its new position.

The "Copy" button works in a similar way to "Cut", except that it does not remove the original section. Instead, it puts a duplicate of the copied section in the clipboard for pasting elsewhere.

The following buttons allow for this functionality:

	Removes the currently selected section of your page, and places it within the "Clipboard". You can press CTRL+X on your keyboard as alternative to using this button.
	Makes a duplicate of the currently selected section of your page, and places it within the "Clipboard". You can press CTRL+C on your keyboard as alternative to using this button.
	Inserts the current contents of the clipboard at the current cursor position. You can press CTRL+V on your keyboard as alternative to using this button.

Paste in Text Mode

Note that the "clipboard" is shared between all the programs that run on your computer.

This means you can "Cut" or "Copy" text from other programs, and paste it back into the TinyMCE editor.

When you cut or copy text from another program, sometimes special content is copied along with the text.

The "Paste in Text Mode" button is a toggle button that if de-pressed, will ensure only text is pasted into your document.

Paste from Word™

To transfer content from a Microsoft Word™ document:

1. Open your word document in Microsoft Word™

2. Select the area of the document you wish to transfer, and press CTRL+C to copy it to the clipboard.

3. Click the Paste from Word button.

   The following dialog will be shown:

   

4. Press CTRL+V to paste your word content into the dialog box.

5. Click the Insert button.

Searching and Replacing Text

The "Find" and "Find/Replace" buttons allow you to search for words or phrases within your text.

In the case of "Find/Replace", you can replace that word or phrase with other text.

Searching For Text

To search for text, click the Find button.

The following dialog will be displayed:

The options on this dialog are as follows:

To start your search, click the Find Next button.

Each matching phrase will be highlighted in the editor area, one at a time. To see the next match, click the "Find Next" button again.

To close the Find Dialog, click the Cancel button.

Searching and Replacing Text

To replace some text with other text, click on the Find/Replace button.

The following dialog will be displayed:

The options on this dialog are as follows:

You have two options here with how to use Find/Replace:

To replace all occurrences of your "Find What" text, click the Replace All button.

To replace each occurrence one at a time:

To close the Find/Replace Dialog, click the Cancel button.

Bullet Point Lists

Bullet point lists are lists of items shown as follows:

• Item One
• Item Two
• Item Three

To create a bullet point list:

1. Select the lines of text you wish to put in your list by highlighting them with the mouse.

2. Either:
   Click the Unordered List button to use the default bullet style.
   or...
   Click the drop-down arrow on the Unordered List button and select the style of bullet you require.

New list items can be added by pressing new-line (return key) after each item.

Numbered Lists

Numbered lists are lists of items shown in an order, as follows:

1. Item One
2. Item Two
3. Item Three

To create a numbered list:

1. Select the lines of text you wish to put in your list by highlighting them with the mouse.

2. Either:
   Click the Ordered List button to use the default numbering style.
   or...
   Click the drop-down arrow on the Ordered List button and select the style of numbering you require.

New list items can be added by pressing new-line (return key) after each item.

Un-doing and Re-doing Changes

Whilst you are editing your page, TinyMCE keeps a record of all the changes you have made to your page since you last saved it.

If you want to "undo" a change to your document, you can click the Undo button. Alteratively, pressing CTRL+Z will have the same effect.

To "redo" a change you've undone, either click the Redo button, or press CTRL+SHIFT+Z on your keyboard.

Linking to Other Pages

If you wish to link to another page, either within your web site or to an external web site, you can create a "hyperlink" to this page.

Hyperlinks can also be used in conjunction with anchors to "jump" to a particular section of a page.

Hyperlinks are usually represented in blue text and underlined, e.g. hyperlink.

Creating Hyperlinks

To create a hyperlink, first select the text you wish to use for your hyperlink, by selecting it with the mouse e.g.:

Click here to link to my page...

Next, click on the Insert/Edit Link button. You will be presented with the following dialog:

The basic options for this dialog are as follows:

To create your link, click the Insert button, or Cancel to cancel your link creation.

Your link should now appear in your page, e.g.:

Click here to link to my page...

There are many other more advanced options on this dialog. These options are for those who have an advanced knowledge of HTML, and their meaning should be obvious to those with that knowledge.

Removing Links

To remove a link, simply highlight your linked text with the mouse, e.g.:

Click here to link to my page...

...then click the Unlink button.

Anchors

Anchors are like a book-mark to a particular section of your page.

Anchors are used in conjunction with hyperlinks to "jump" to a section of your page, to help with navigating around.

A good example of this would be a table of contents, where each chapter reference in the content page is a hyperlink, and the actual chapter has an anchor associated with it.

To create an anchor, place the cursor at the desired part of your page by clicking next to it with the mouse.

Next, click the Anchor button. The following dialog will be shown:

Type in the name of your anchor in this dialog, and click Insert.

Your anchor will be indicated on the page editor as follows:

See the hyperlinks section for details on linking to your anchor.

Images

To insert an image on to your page, click the Insert/Edit Image button.

You will be presented with the following dialog:

The following options are available on this dialog:

Clicking on the Appearance Tab will give you more options:

The following options are available on this dialog:

To insert your image, click the Insert button.

Note: There are more advanced options on the Advanced tab of this dialog. These options are for those who have an advanced knowledge of HTML, and their meaning should be obvious to those with that knowledge.

Once your image has been inserted, you can resize it in-place within the editor area.

Clicking on the image, will make the resize handles appear:

To resize the image, click one of these handles with the left mouse button and move the mouse whilst holding the button down. Release the mouse button when you're happy with the image size.

To delete the image, click on the image and press the "Delete" button on your keyboard.

Editing HTML Directly

The page you are editing is stored in a code known as HTML.

HTML is the language of the web - it tells your browser exactly how to display your page.

If you need to edit the HTML code directly, you can do so by clicking the Edit HTML button.

You will be presented with the following dialog, containing the HTML code of your page:

Once you have made your changes to the HTML, click the Update button.

Note: This option is for Advanced users who are knowledgeable in HTML.
If what you see on this dialog scares you.... click the Cancel button!

Cleaning-up your HTML Code

The page you are editing is stored in a code known as HTML.

HTML is the language of the web - it tells your browser exactly how to display your page.

Clicking on the Cleanup messy code will remove any unneccessary spaces or new-lines in the HTML code of your page.

This is only really needed after editing your HTML directly using the Edit HTML button.

Help

Click the Help button to show this help document.

Inserting the Current Date and Time

The following buttons will insert the current date and time into your page:

	Inserts the current date.
	Inserts the current time.

Colors

The buttons below allow you to specify the foreground and background of your text:

	Selects the foreground color.
	Selects the background color.

To choose the color, you must click the drop-down arrow to the right of the button:

The drop-down shown above allows you to choose from one of 40 colors. To choose more colors, click on More Colors.

The following dialog will appear, allowing you to choose from over 16 million different colors:

To choose your color, simply click with the mouse and move the mouse around until you find your desired color.

The Pallette tab allows you to pick from colors that are currently in use:

The Named tab allows you to pick from a preset list of "Named" colors that supported by most browsers:

Once you have selected your color, click the Apply button.

Working with Tables

The following buttons provide the functionality to create and manage tables:

	Creates a new table and inserts it into your page.
	Inserts a new row before the current one.
	Inserts a new row after the current one.
	Deletes the current row.
	Inserts a new column before the current one.
	Inserts a new column after the current one.
	Deletes the current column.
	Shows a dialog allowing you to edit the current row properties.
	Shows a dialog allowing you to edit the current cell properties.
	Merges the selected cells into one.
	Splits previously merged cells back into separate cells.

Inserting a Table

To insert a table, click the Insert Table button.

The following dialog will appear:

The following options are availabel on this dialog:

There are more options on the Advanced tab of this dialog. These options are for those who have an advanced knowledge of HTML, and their meaning should be obvious to those with that knowledge.

Once you have selected your options, click the Insert button to create your table.

Table Row Properties

To edit the current row's properties, click the Edit Row Properties button.

The following dialog will appear:

The following options are available on this dialog:

There are more options on the Advanced tab of this dialog. These options are for those who have an advanced knowledge of HTML, and their meaning should be obvious to those with that knowledge.

To apply your new table row options, click the Update button.

Table Cell Properties

To edit the current table cell properties, click the Edit Cell Properties button.

The following dialog will appear:

The following options are available on this dialog:

There are more options on the Advanced tab of this dialog. These options are for those who have an advanced knowledge of HTML, and their meaning should be obvious to those with that knowledge.

To apply your new cell options, click the Update button.