Search

Categories

• Getting Started with Radar Hill
• CMS (Website Administration)
• E-mail
• Real Estate Services
• Social Networking
• Websites

Tiny MCE User Guide

TinyMCE is the WYSIWYG (What You See Is What You Get) editor that Pyramid CMS uses to add and edit content.

Navigation

• Introduction
• The TinyMCE Toolbar
• Save & New
• Basic Styling
• Text Alignment
• Headings & Styles
• Cut & Paste
• Search & Replace Text
• Bullet Point Lists
• Numbered Listings
• Un-doing and re-doing changes
• Linking to other pages
• Anchors
• Images
• Cleaning-up your code
• Editing HTML directly
• Inserting Current Date & Time
• Colours
• Content Blocks
• Gallery Blocks
• Email Forms

Introduction

The TinyMCE editor is similar to word processors such as Microsoft Word™ or Open Office™. However, a word processor is primarily designed for producing documents to be printed on paper, and editors such as TinyMCE are designed for showing documents on the web via a web browser.

The TinyMCE Toolbar

The TinyMCE toolbar 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.

Save & New

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

	Save's any changes you've made to your document.
	Clears any content so you can start creating your page from scratch.

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.
	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.

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.

Headings and Styles

The drop-down lists shown below allow you to change the 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 website. Wherever possible, try to stick to these styles rather than using custom fonts.

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.

   

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 options on this dialog are as follows:

Find What:	Type in the text you want to search for.
Direction:	Specifies the direction you wish to search in, relative to the current cursor position. "Up" will search from your current position back up to the beginning of the page. "Down" will search from your current position to the end of the page.
Match Case:	If left unchecked, words or phrases that match your "Find What" phrase will be found regardless of whether letters are captilized or lower-case. When checked, only words or phrases that match the exact case of your "Find What" phrase will be found.

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 options on this dialog are as follows:

Find What:	Type in the text you want to search for.
Replace With:	Type in the text you replace this text with.
Direction:	Specifies the direction you wish to search in, relative to the current cursor position. "Up" will search from your current position back up to the beginning of the page. "Down" will search from your current position to the end of the page.
Match Case:	If left unchecked, words or phrases that match your "Find What" phrase will be found regardless of whether letters are captilized or lower-case. When checked, only words or phrases that match the exact case of your "Find What" phrase will be found.

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:

1. Click the Find Next button to find your first occurrence.
2. If you want to replace the text, click the Replace button, otherwise click the Find Next button to find the next occurrence.

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. Click the Unordered List button.

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. Click the Ordered List button.

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.

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.

The basic options for this dialog are as follows:

Link URL:	Type in the address of the web page you wish to link to, e.g.: http://www.google.com
Link List:	As an alternative to the above, you can select a page from this drop-down list. When selecting a page from this list, the Link URL will be automatically filled in for you.
Target:	This specifies where your linked web page should be opened. If you wish the page to replace the one the user is currenly on, select Open in this window / frame; If you wish the page to be opened in a new window or browser, so the current page is still available, select Open in new window (_blank)
Anchor:	Hyperlinks can also be used to link to a specific section of a page. In this scenario, clicking on a hyperlink will "jump" to the required section of your page. These sections are known as Anchors. To select the required section, pick the name of your Anchor from the list. Note: To link to an Anchor on the current page, ensure that the "Link URL" is blank, and the "Target" is set to "Open in this window / frame".

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

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 and then click the Unlink button.

Anchors

Anchors are like a bookmark 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.

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

Images

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

The following options are available on this dialog:

Image URL:	This specifies the location (on the internet) of the image to be shown. In most cases, you will have uploaded your image using your site's image upload manager. In this case, you should select your image using the Image List below. However, if you wish to insert an image located somewhere else on the internet, type in it's URL here.
Image List:	If you've uploaded any images to your web site, they will appear in this list. When selecting an image from this list, the Link URL will be automatically filled in for you.
Image Description & Title:	You should enter a description and title of your image here, so that users who have images turned off, or are using disibility aids such as screen readers will know what image is being shown.
Preview:	A preview of your image will be shown here. This is to ensure you have picked the correct image.

Clicking on the Appearance Tab will give you more options:

The following options are available on this dialog:

Alignment:	This allows you to specify how the image will be aligned in relation to the text on your page.
Dimensions:	This option allows you to specify the display size of your image in pixels. When checked, the "constrain proportions" checkbox will automatically calculate the height (if you enter a width), or width (if you enter a height) of your image. This is to ensure the proportions of your image remain intact. Unchecking this option, will allow you to stretch the image horizontally or vertically. Note: Using this option to make large images look smaller is a bad idea. Regardless of the size an image is shown at, when viewing your page the whole image will need to be downloaded at its original size. You should consider shrinking the image to the required size, and uploading it again. This will speed up the loading of your page.
Veritical Space/ Horizontal Space:	These options allow you to specify, in pixels, the amount of blank border space around your image.
Border:	Should you require a border (i.e. a box) around your image, specify its thickness in pixels here.
Style	Should you wish your image to conform to a particular CSS Style class, you should type in the name of that class here.

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.

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

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.

Editing HTML Directly

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!

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.

Previewing your Page

To see what your page will actually look like, click the Preview button.

Colours

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

	Selects the foreground colour.
	Selects the background colour.

To choose the colour, 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 colours. To choose more colours, click on More colours.

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

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

The Palette tab allows you to pick from colours that are currently in use:

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

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

Adding Content Blocks

Content blocks are content that are added and edited in the "Content Block" section of your admin. You can add these content blocks to your pages. All available content blocks will be display in this drop-down menu . If there are no available content blocks, this feature will not display.

Click your cursor where you would like to add a content block and then select the content block drop-down . Code will be added to your content window . Do not edit this code. If you would like to remove the content block, simply remove the code that was added.

Adding Gallery Blocks

Gallery blocks are photo galleries that are added and edited in the "Gallery Block" section of your admin. You can add these photo galleries to your pages. All available gallery blocks will be displayed in this drop-down menu . If there are no available gallery blocks, this feature will not display.

Click your cursor where you would like to add a gallery block and then select the gallery block drop-down . Code will be added to your content window . Do not edit this code. If you would like to remove the gallery block, simply remove the code that was added.

Adding Email Forms

 You may add existing email forms to your page. Click your cursor where you would like to add the email form and then select the email form drop-down . Code will be added to your content window . Do not edit this code. If you would like to remove the email form, simply remove the code that was added.