The SurreyCommunity.info system includes an editor that allows you to create and edit the content of your webpages.

The editor works in a similar way to word processing programs and has many of the same features. You can use it to:

  • add, edit or delete text
  • change the formatting (for example, make text bold or a different colour)
  • add pictures, table and links

 

Where is the editor?

You'll find the editor by creating a new page or opening an existing page for editing and then clicking on the edit tab.

The edit tab

 

How do I use the editor?

The editor looks like this:

The editor

It is divided into three areas:

 

The content area

You can type your text straight into the content area (the large white area in the centre of the editor). You can correct any mistakes you make whilst typing by either by clicking the undo button or by using the backspace or delete keys on your keyboard.

The editor is WYSIWYG (what you see is what you get) - this means that it will try to display your content as it will appear on the webpage (although occasionally you may spot minor differences). 

 

The buttons

The three rows of buttons above the content area provide the controls for formatting your text and inserting pictures, links and tables. You may recognise some of these buttons from other computer programs. You can find out what a specific button does by hovering your mouse over it or see our compete list of editor buttons.

Don't be overwhelmed by the number of buttons, you probably won't need to use them all! To start with, the buttons you'll probably find the most useful are:

text format drop-down menu Text formatUse this to choose quickly format your text. Select the text by dragging your mouse over it and then choose a style from the menu. The choice of styles includes paragraph (normal text) and headings
  
Font colour button 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.
  
Bullet list button 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.
  
Numbered list button 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.
  
Insert/edit link button Insert/edit link: 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 in the editor and then click this button, you can edit the link (for example, you could change where the link leads to).
  
Insert/edit image button Insert/edit picture: 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.
  
Undo/redo 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.
  

 

The path bar

The path bar at the bottom of the editor shows the HTML being used for the part of the page you are currently editing. Advanced users may find this useful if they want to edit the HTML of the page (if you don't want to do this, you can ignore it).

You can change the size of the editor by dragging the diagonal lines at the bottom right of the path bar.

Resize the editor by dragging the corner

Alternatively you can click the Toggle Fullscreen Mode Toggle full screen button button. This will expand the editor to take up the whole of your browser window. Click the button again to return the editor to normal size.