Page editor  >  Editor tips & instructions

Please note: this page uses illustrations and video which may depict older versions of the editor, so buttons and other visual elements may look a little different, however the same steps apply.

This page is dedicated to providing help and how-tos for the rich text editor that we implement into the sites we create, and is in use in m2news, m2cms, Freesites, custom website admin areas, etc.

NOTE: It is important to realise that this and any 'CMS' is not a 'web authoring' tool, but a page editing tool. This means that it isn't designed to handle the construction of detailed and elaborate page layouts, but rather just to edit existing text and images. If you try to do much more than that, you may run into trouble. We can repair your pages at the rate of $90 per hour. We suggest you make a backup of your content before you make any major changes.

If your text is starting to get messed up, try this:
If you have changed fonts and colours several times on some text, it’s a good idea to remove all the formatting to reset the code, and then set fonts and styles just once after you have decided what looks best. You can do this via the eraser/Remove formatting button on the toolbar:
Simply click in the text you want to clean up, then keep clicking the eraser button in the toolbar to remove one set of formatting at a time until there is no formatting left, then select the text and apply whatever style you like.


Editor tips for commonly performed tasks:


Uploading and linking to Files (Such as a PDF)


If you want to upload a .pdf file and link to it, follow these simple steps:

  1. Type the text you want to link to the file you will upload. Eg. "Click here to view the PDF"
  2. Select the text you want to link, such as just the 'click here' bit or all of it. (This is done by clicking to the left of the text, and while holding down your mouse button, slowly drag the mouse to the right, and you'll see the text become highlighted.)
  3. While the text is highlighted, click the link icon (the one that looks like a chain link) from the toolbar
  4. Click the 'My Files' Tab in the window that appears
  5. Click the 'UPLOAD' link.
  6. Click 'Select files' Button that appears
  7. Locate the PDF file you want to upload from your computer. Once you have browsed for and clicked it, click the 'open' button. This will close the browse window, and start uploading your PDF.

    -Wait for it to upload-

  8. The window will refresh showing the list of uploaded files. Locate the one you just uplaoded and click it.
  9. Click the 'Insert' Button
  10. Your highlighted text is now linked to that file.
^top

Inserting and managing images

  1. Click the insert image button to upload a new one.
    Click where you want the image to be in your page
  2. Click the image button on the toolbar (a popup window will appear)

    -- If you want the image to be in a specific folder you have on your site, then click that folder now, or create a nrew folder for it --

  3. Click the 'UPLOAD' link.
  4. Click 'Select files' Button that appears
  5. Locate the image file you want to upload from your computer. Once you have browsed for and clicked it, click the 'open' button. This will close the browse window, and start uploading your image.

    -Wait for it to upload-

  6. The window will refresh showing the list of uploaded files. locate the one you just uplaoded and click it. 
    - At this point you might want to set a maximum width of about 600 to it in the options on the right. 
    - If you want the image to be to the left of right of some text on your page, then you can set the alignment as such as well.
  7. Click Insert.

PC users: click here
Mac Users: click here

TIPS:

  • You must make sure that images do not have any non-letter or non-number characters in the file name. No commas etc. If they do, they will not show up in your site. This is a limitation of web servers.
  • If you are having trouble uploading an image, it might be because you have blocked popups. Please allow popups from this site to enable that feature. It could also be because your image is too big to upload. Please limit images to 200kb in file size. (Resize the image so that it becomes about this file size)
  • Once your image is uploaded, just click it in the image manager and it will be inserted. You can specify horizontal and vertical spacing if there is to be text around it to give it some spacing. Then click the modify button to close the image manager window. To change it or any of it's settings, click the image then click the image button.
  • You can drag images around on the page, but if they are linked, you will need to have the link selected as well before dragging, so that the link stays with the image. You will need to first click the image you want to drag, then click the A symbol at the bottom of the editor. This will make sure the link is also selected, then you can drag the image.
^top

Adding links to images (linking an image to a website address)

  1. Click the image
  2. Click the image button on the toolbar
  3. Enter your link address in the "Link to URL" field:


  4. Click 'OK'
^top

Linking to websites

  1. First, copy the website address you want to link to, unless you want to type it in manually when you go to create your link.
  2. In the editor, select the word that you want to link to a website address.
  3. Click the link button on the editor toolbar. It's the one that looks like a chain
  4. In the Hyperlink window that appears, paste your website address into the URL field
  5. Click 'Insert'

To link an image, just click the image, then click the image button on the toolbar, then paste the websites address into the 'URL' field.


Linking to your own pages (website editors only)

There is a toolbar button to allow you to easily create links to your other pages in your site . It's right next to the regular link.
Note, if you are using m2news, this button will not be available, and you will need to use the regular link button to create links to an external website such as your own.

  1. Just select the word you want to link,
  2. then click the button:
  3. click the page you want to link to in the popup window and close the popup window
^top

Working with Anchors/Bookmarks

Bookmarks (also known as anchors) are used to make links in a page to another spot in the same webpage. Basically, you set a bookmark at a point in the page, then you create a link to the bookmark. Follow the steps below to create and link to a bookmark:

Create a bookmark:

  1. Click your mouse cursor where you want the link to take you to (eg. the beginning of an article heading).
  2. Click the insert bookmark button on the toolbar.

  3. In the window that appears, enter a name for the bookmark without spaces. Make sure it isnt the same as any already in the bookmark list there. It can be a number if it makes it easier.
  4. Click insert and then ok. This will enter a # where you've inserted the bookmark — you can carefully delete this character while leaving the bookmark intact.

Link to the anchor:

  1. Go to the place on your page where you want the link to that bookmark to be (so that when people click your bookmark link, the page will scroll to the bookmark point)
  2. Type your link text (such as 'click here')
  3. Select the link text by dragging your mouse over the link text until it is highlighted
  4. Click the insert link button on the toolbar while the text is still highlighted.
  5. In the window that pops up, click the bookmark option and choose your bookmark you created in steps 1 to 3 from the bookmark drop down list and click the 'Insert' button
  6. Your text will now be linked to the anchor.
^top

What is the HTML tag bar?

The HTML tag bar is located at the bottom of the editor, just above the "Edit, Source and Preview" tabs. It's purpose is to show you the HTML tag that is currently being edited, and allow you to select specific tags easily and remove or modify them. Because HTML allows you to have multiple tags overlapping, it becomes increasingly difficult to select specific tags using only the editor and your cursor. The HTML tag bar is extremely useful in these scenarios where there are overlapping HTML tags and allows you to select the specific HTML tag you would like to modify or remove.

How do I use HTML tag bar?

Using the HTML tag bar is simple. When your cursor is placed in the editor inside a specific HTML tag, you will see that tag appear in the HTML tag bar. By clicking on this HTML tag in the HTML tag bar, the editor will automatically select that entire HTML tag. You can then modify that tag for example by selecting a new Style to be applied. Alternatively, you can remove the tag by clicking on the "Remove tag" option on the right side of that bar, or edit the HTML code of that tag only, by selecting the "Edit tag" option.

Sometimes you will notice that a tag will also be followed by the name of a Class found in the style sheet. (eg. «span.myClass>) This means that current HTML tag being selected has a style applied to it. This makes it easier for you to see what Style has been applied and to modify it in seconds.

^top

copy / paste

In Internet Explorer, you can use the normal keyboard shortcuts for pasting in text, or you can right-click where you want to paste, and choose the paste option, or you can use the button on the tool bar. Be very careful when pasting from Microsoft Word, as you will paste a lot of hidden formatting code that is not meant to be used in web pages, and it could play havoc with your page. It is always best to paste as plain text, and then apply any formatting later.

If you use Firefox, you may encounter a message that tells you you need to edit settings in Firefox to allow copying and pasting. However, the keyboard short-cuts will work just fine - CTRL C for copy, and CTRL V for paste.

If you use an Apple Mac, we suggest you to use the Chrome browser, and the keyboard shortcuts for copy and paste.

^top

Tables

Tables in web pages can get tricky, and it starts to get into the realm of too advanced for the average person to manage. However, if you have the patience to experiment, then there is no reason why you can't master it.

If you have an HTML editor such as Dreamweaver, and find it easier to create your tables there, then you can do so - then view the source code, select and copy it all, then go to your page editor, click the source tab at the bottom, and paste the code in where you want it to be.

To insert rows of columns into a table you have created, please follow these steps:

1. click in the table you want to add a row or column to
2. click the 'Edit Table/Cell' Button on the toolbar
3. click "Table size"
4. a window will appear with options for adding rows and columns

The 'decrease' rows and columns options will apply to whichever column or row your cursor is currently in when you clicked in the table. Doing this will remove the content from the row/column also.

^top
© 2001 - 2017 Media Two Pty Ltd.