The SurreyCommunity.info system includes a fully featured editor that allows you to edit and format text, pictures, links and tables.
At the top of the editor are three rows of buttons. You use these to control the formatting of your page. If you use a word processor, then many of these buttons will be familiar.
The buttons are listed below with a brief explanation of what they do (also, if in the editor you let your mouse hover over a button, it will display a label telling you what that button is for).
The editor buttons are described below from left to right for the top row, middle row and bottom row.
Top row of buttons
Use this to quickly format your text. The drop down menu gives you a choice of styles including paragraph (normal text) and headings
Font Family: Use this to choose the font to use for your text. The drop down menu gives you a choice of the fonts that are commonly used on the web.
Font size: Use this to choose the size of your font. There are 7 sizes to choose from.
Bold: Clicking this will make any selected text bold.
Italic: Clicking this will make any selected text italic.
Underline: Clicking this will underline any selected text. Be cautious using this - on the web underlining is often used to indicate that a word is a link. If you underline words that aren't links you may confuse visitors to your site.
Subscript/superscript: You can format words so that appear slightly higher (superscript) or lower (subscript) than usual. You might use this for dates (3rd June), scientific or mathematical formula (E=MC2 or H20) or for indicating footnotes or references (1).
Font colour: Use this to change the colour of selected text. Be careful not to choose colours that will make your text hard to read. Click the small triangle on the right to choose from a palette of colours. Click the button itself to use the last chosen colour.
Background colour: Highlight sections of your text with a background colour - be careful to choose a colour that doesn't make you text difficult to read! Click on the triangle next to the button to see a selection of colours or click on the button itself for the colour that you last used.
Insert custom character: Use this to insert a range of symbols, foreign letters or accents (for example: ©, β, the last letter of café).
Insert emotion: Click on the button to select a smiley face (sometimes also called an emoticon) to add to your page. This may seem an odd button for editing pages but if your site includes a discussion board, this can be quite useful. The faces allow you to add context to messages that you post. For example a laughing face can indicate that your message is a joke or tongue-in-cheek - something that might not be immediately obvious from words alone.
Horizontal rule: This button adds a horizontal rule to your page. You could use this to divide your page into sections.
When writing web pages you can't use normal spaces to create large gaps between things. If you type ten spaces between two words when you view them on your web page, the gap will be just the same as a single space (and this isn't an error - it is how the web is supposed to work).
You can get around this by using non-breaking spaces instead - if you insert ten non-breaking spaces, when you look at them on the web page, the gap will be ten spaces wide.
Back to top
Middle row of buttons
Undo/Redo: If you make a mistake, click the undo button to undo your last action. If you change your mind, the redo button will redo the action.
Insert table: Use this to insert a table into your page.
Table row properties: Use this set the properties for individual rows in your table. This button can only be clicked when you are working on a table.
Table cell properties: Use this set the properties for individual cells in your table. This button can only be clicked when you are working on a table.
Insert row above/below: Use this to insert extra rows into a table. Click a row next to where you want to insert the new one and then click the appropriate button. This button can only be clicked when you are working on a table.
Delete row: Use this to delete rows in a table. Click in the row you want to remove and the click the button. This button can only be clicked when you are working on a table.
Insert column before/after: Use this to insert extra columns into a table. Click a column next to where you want to insert the new one and then click the appropriate button. This button can only be clicked when you are working on a table.
Delete column: Use this to delete columns in a table. Click in the column you want to remove and the click the button. This button can only be clicked when you are working on a table.
Split merged cells: Use this button to split cells that you have previously merged together. This button can only be clicked when you are working on a cell that has previously been merged.
Merge cells: Use this to merge two or more cells into one. Select the cells by dragging your mouse over them and then click this button. This button can only be clicked when you are working on a table.
Align left: This will format any selected paragraph(s) so that they are lined up on the left side of the text area. This is the standard way of aligning text (if you don't choose any other way, this is the one that will be used).
Align centre: This will format any selected paragraph(s) so that they are centred in the text area.
Align right: This will format any selected paragraph(s) so that they are lined up on the right side of the text area.
Align full: This will format any selected paragraph(s) so that each line will be stretched so that the left and right ends meet the edges of the text area.
Bullet list: Use this to create a list with bullet points at the beginning of each item. Select the text you want to make into a bulleted list and then click this button. You can also use the button to remove a bulleted list - select the list and click the button to turn it into normal text.
Number list: Use this to create a list with numbers at the beginning of each item. Select the text you want to make into a numbered list and then click this button. You can also use the button to remove a numbered list - select the list and click the button to turn it into normal text
Outdent: Selecting a block of text and then clicking this button will outdent it (move it to the left).
Indent: Selecting a block of text and then clicking this button will indent it (move it to the right).
Back to top
Bottom row of buttons
Click this button to check your spelling
. Misspelt words will be underlined in the editor. You can right-click an misspelt word to select from a range of suggested corrections.
Find/Replace: Search for words or phrases on your page and (optionally) replace them with another word or phrase.
Cut/copy/paste: Use these buttons to cut, copy or paste parts of your page. Use the Paste as plain text or Paste from Word buttons instead if you are pasting material from elsewhere (such as another web page or a Word document).
Paste as plain text:
If you have copied text from somewhere (another web page or document) you can paste it into your web page as plain text. This pastes the text without any formatting (useful if you don't like the formatting or want to apply your own).See our copying and pasting text
page for more details.
Paste from Word:
Use this to paste any text from Word. This helps to prevent problems in some browsers - see our copying and pasting text
page for more details.
Toggle guidelines/invisible elements: Use this button to turn the guidelines for tables on or off (the guidelines can only be seen in the editor - they don't ever appear on your webpage).
Remove formatting: Select some text on your page then click this button and the formatting will be removed leaving just plain text.
Clean up messy code: If you have copied and pasted text from another web page or a Word document, selecting the text and then clicking this button will try to tidy up the code used to display it so that it doesn't cause any problems for visitors to your page. This may cause some changes to your formatting.
If you know how to write HTML, you can edit the HTML for your page
using this button. Clicking it will produce a new panel displaying the html for your page. Once you have edited it click the update
button to return to the normal editing view.
Upload image or file:
Use this to add items to your assets library
or to select items from the library to insert on your page.
Insert embed code: Use this to add code to embed content from sites such as YouTube, Picasa or Vimeo on your pages.
Use this button to add a picture to your page
. If you click on an existing picture on your page and then click this button, you can edit the picture's properties.
Insert/edit media: Use this button to add media such as video, audio or flash to your page.
Select some text on your page and then click this button to turn it into a link. Find out more about adding links to your page
. If you click on an existing link and then click this button, you can edit the link (for example, you could change where the link leads to).
Unlink: Click on a link and then click this button to remove the link from your page.
Print: Use this to print your page from the editor.
Help: Provides a link to the TinyMCE website with more information about the editor
Full screen: Clicking this will expand the editor to use your whole browser window - this gives you extra room to work. Clicking on the button again returns the editor to the normal size. You can also expand the editor by clicking and dragging on the lower right hand corner.
Back to top