NOTE: This information pertains to the older DevEdit editor, which is being phased out. New help information for the new editor will be published here soon.
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, and M2cms.
The best combination for using any content editor on a site is Windows and Internet Explorer. Firefox does ok if you use version 3+ but with some minor annoyances.
Using a Mac will unearth a few dificulties and as such we don't support using a Mac to edit your pages or content.
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, and the price you paid for the system to edit your pages' content does not include time spent by Media Two to fix or repair any pages that get messed up in the future. Such repairs can be performed for at the rate of $35 per hour. We suggest you set a backup restore point before you make any major changes.
Click here to learn why pasting from Microsoft Word is a big no-no!
You must allow popups. Failure to do so may cause you to lose any content you have just entered if you enable popups without saving and your browser auto-refreshes the editing page.
There is a maximum file size of 1990 KB for any file you want to upload in the editor. This applies to images, flash files and video files. (contact us if you need to upload a l,arger one)
After selecting a file from your computer to upload in the upload file window, click the 'Go' button and then allow time for the file to upload. Time will vary depending on your internet connection. Your browser may time-out before the file completes uploading if you have a slow connection such as dial-up.
If you want to upload a .pdf file and link to it, follow these simple steps: (non m2news users*)
Type your link to it in your page you are editing, eg "Download sample.pdf here"
Select your text you want to link, and click the link Button
In the window that appears, browse for your PDF and upload it
When it uploads and appears in the list on the left, click it.
Click the 'Insert link' button.
*m2news users will need to have the pdf file hosted on their own website and link to it there, as m2news is not a hosting service.
Right click an image to either adjust it's properties or click the insert image button to upload a new one.
Under "Upload File" click browse to locate your image on your computer. Make sure it isn't too big to upload, with "too big" being larger than 1500 kb in file size. If you resize it's width to about 600 pixels, it should ensure it will be small enough. Once you have it chosen, click the go button to upload. When it has finished uploading it will pop up a message telling you so, and it will appear in the thumbnail list on the left. click the thumbnail to choose the image you want in your page.
Set an image alignment to either left or right to have text wrap around it. You may need to also set the horizontal spacing so the text doesn't touch the edges of the image.
NEVER resize it in the editor by dragging the corners in to make it smaller, or specifying a smaller height or width than what the image is. This will ruin the appearance of the image and it will still take a long time to download. People don't like waiting for images to download when they visit a site, so the quicker the better, and the smaller, the quicker.
You can only edit them during initial upload, once the image is inserted, you can't go back to it and edit it (the modify button only relates to modifying the image properties in the html, not the actual image) so you'll need to either edit it when you first upload it to make it the correct size for your page, or before you upload it. Beforehand would be better, so you are not uploading such a large file which might take too long and time-out.
Wait for all thumbnails of your images to load in the left hand list before picking an image. This is important. If it is taking a long time to load, then you might have a lot of images uploaded. If you anticipate having a lot, then it would be wise to organise them into folders as you upload them. You can create folders using the button above the thumbnails. There is also a delete button there to delete images that you no longer use. Just click the image and then click the delete button. To know what the buttons do, hold your mouse over them and a tool tip will appear.
If you resize an image, and it doesn't show as the new size when you select it from the thumbs, close the image inserting window, rename your image on your computer that you uploaded and go to insert an image again. This will reset the size it has cached for that image. If it still doesn't. Close your browser and do it again. This is because the image information is cached by your browser and over rides the new info.
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.
Anchors are used to make links in a page to another spot in the same page. Basically, you set an anchor at a point in the page, then you create a link to the anchor. Follow the steps below to create and link to an anchor:
Create anchor:
Go to the target place on the page where you want to link to, click at the exact spot you want to set the cursor there, and then click the anchor button - - on the toolbar.
In the window that appears give it a name without spaces. It can be a number if it makes it easier.
Click ok. This will produce a little anchor image in your page. You can drag this around to any vertical level on your page.
Link to the anchor:
Go to the place on your page where you want the link to that anchor to be
Type your link text (such as 'click here')
Select the link text by dragging your mouse over the link text until it is highlighted
Either right-click your highlighted text and choose "Create or modify link" or click the link button - - on the toolbar while it is still highlighted.
In the window that pops up, choose your anchor you created in steps 1 to 3 from the anchor drop down list and click 'Insert link' button
Click the insert multimedia button to upload a video file.
Under "Upload File" click browse to locate your video on your computer. Make sure it isn't too big to upload, with "too big" being larger than 2000 kb in file size. Once you have it chosen, click the go button to upload. When it has finished uploading it will pop up a message telling you so, and it will appear in the thumbnail list on the left. click the thumbnail to choose the video you want in your page.
It will appear on the right. Set the dimensions of the video file. if you tick show control and status bar (advisable) then you need to add 69 to the video's height. eg. if your video is 320 x 240, then you need to set the width to 320 but the height to 309
[ you can find out your video's dimensions by right-clicking it and choosing 'properties' from the menu, and then click 'summary' and then the advanced button.]
We advise to tick all 3 boxes listed, and then click the Insert Media button.
Youtube provides you with the code to insert into your page. Copy this code go to edit your page, and click the source tab at the bottom of the editing area. This will show you the page code, and this is where you paste in the code you copied from YouTube. If you want it to appear in a specific place on the page, go to edit view, go to where you want it and type something that you'll be able to easily spot in the source code, such as a line of equal signs: ============. Then simply go back to the source view, locate the equal signs, delete them and paste the YouTube code in where the equal signs were.
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.
Additional Features and Options
The HTML editor contains additional features and options that are not contained on the toolbar.
Switching Toolbar Modes
At the bottom right hand corner of the HTML editor, you will see an option to switch between multiple modes. These may vary depending on your administrators application settings, but by default they are "Simple" and "Complete" mode.
Clicking on this option will switch from one mode to the other. These modes indicate the number of toolbar icons that are displayed in the editor. In "Simple" mode, only the most frequently used icons will be displayed, minimising the amount of clutter in the toolbar and increasing your workspace. Switching to "Complete" mode will turn on all available options, giving you greater features to work with.
Once you have switched to a different mode, this setting is stored onto your computer. The next time the HTML editor is loaded, you will be automatically switched to the last used mode.
Using the Right Click Context Menu
Similar to other desktop based applications, the HTML editor features a right click "Context" menu.
This menu enables quick and easy access to commonly used functions. Other options also appear depending on your current editing situation. If you select an Image and right click on that Image, you will be able to select the "Modify Image" option. If you select or click inside a Table, the various Table options will appear in the "Context" menu. Finally, right clicking inside a Form will present the "Modify Form" option.
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, then the only option is for you to use Firefox, and the keyboard shortcuts for copy and paste.
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 right-click in a table cell, you'll get a full list of commands available to be applied to the table. Experiment is the best way to learn.
If you have 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.
Below is a comprehensive list of all editing buttons and options available.
Note: If an option below is not visible or accessible in your editor, then it may have been disabled by us.
Save: To save your work, click on the 'Save' icon.
Cut (Ctrl+X): To cut a portion of the document, highlight the desired portion and click the 'Cut' icon (keyboard shortcut - CTRL+X).
Copy (Ctrl+C): To copy a portion of the document, highlight the desired portion and click the 'Copy' icon (keyboard shortcut - CTRL+C).
Paste (Ctrl+V): To paste a portion that has already been cut (or copied), click where you want to place the desired portion on the page and click the 'Paste' icon (keyboard shortcut - CTRL+V).
To paste from Microsoft Word, click on the drop down icon next to the Paste Icon.
Paste as Text: To Paste as Text: Copy your desired text and click the drop down icon next to the paste icon. Select the 'Paste as Text' option. This will remove any text formatting before pasting the text only content.
Paste from Microsoft Word (Ctrl + D): To Paste from Microsoft Word: Copy your desired text from Microsoft Word and click the drop down icon next to the paste icon. Select the 'Paste from MS Word Option'. This will remove the tags that Microsoft Word automatically places around your text. It will also remove most text formatting as well.
Find and Replace: To find and replace words or phrases within the text:
Select the search and replace feature. Enter the word or phrase you wish to replace and type it in the 'Find what' field.
Select the new word or phrase you wish to replace the searched text with in the 'Replace with' field.
You can choose to 'find next' which allows you to manually replace instances of the searched text, or you can choose 'replace all' which allows you to replace all instances of the selected text.
Selecting the optional 'Match Case' tab allows you to search for a word or phrase with exactly the same upper or lower-case spelling of the word or phrase entered in 'Find What'. Not selecting this option means that a word entered in the 'Find what' field with upper case characters will return a search of upper and lower case matches of the same word.
Selecting the optional 'Match whole word only' tab allows the search to only display the words that are an exact match of the word or phrase entered in the 'Find What' field.
Undo (Ctrl+Z): To undo the last change, click the 'Undo' icon (keyboard shortcut - CTRL+Z). Each consecutive click will undo the previous change to the document.
Redo (Ctrl+Y): To redo the last change, click the 'Redo' icon (keyboard shortcut - CTRL+Y). Each consecutive click will repeat the last change to the document.
Check Spelling (F7): To check spelling, select the text you would like to spell check (if you do not select the text, then your whole document will be checked)
Click on the spell checker icon or right click on the mouse and scroll down to 'Check spelling'.
The spell checker will check your document and highlight any words that have been incorrectly spelt. By clicking on the highlighted word, a list of suggestions will appear. You can then choose to:
Change the incorrectly spelled word with the suggested words provided
Ignore the incorrectly spelled word (i.e. not make any changes to it)
Ignore All the words in the document with the same spelling (i.e. not make any changes to it)
Add the selected word to your personal Dictionary so it will not be treated as a misspelt word next time.
Remove Text Formatting: This command allows you to select a specific portion of text and remove any of the formatting which it contains. To remove any text formatting select the desired portion of text and Click the 'Remove Text Formatting' button.
Bold (Ctrl+B): To bold text, select the desired portion of text and click the 'Bold' icon (keyboard shortcut - CTRL+B). Each consecutive click will toggle this function on and off.
Underline (Ctrl+U): To underline text, select the desired portion of text and click the 'Underline' icon (keyboard shortcut - CTRL+U). Each consecutive click will toggle this function on and off.
Italic (Ctrl+I): To convert text to italic, select the desired portion of text and click the 'Italic' icon (keyboard shortcut - CTRL+I). Each consecutive click will toggle this function on and off.
Strikethrough: To format text as strike through Select the text you want formatted by highlighting it and select the 'Strike through' icon. Each consecutive click will toggle this feature on and off
Insert Number List: To start a numbered text list, click the 'Insert Numbered List' icon. If text has already been selected, the selection will be converted to a numbered list. Each consecutive click will toggle this function on and off.
Insert Bullet List: To start a bullet text list, click the 'Insert Bullet List' icon. If text has already been selected, the selection will be converted to a bullet list. Each consecutive click will toggle this function on and off.
Decrease Indent: To decrease indent of a paragraph, click the 'Decrease Indent' icon. Each consecutive click will move text further to the left.
Increase Indent: To increase indent of a paragraph, click the 'Increase Indent' icon. Each consecutive click will move text further to the right.
Superscript: To convert text to superscript (vertically aligned higher): Select the desired portion of text and click the 'Superscript' icon. Each consecutive click will toggle this function on and off.
Subscript: To convert text to subscript (vertically aligned lower): Select the desired portion of text and click the 'Subscript' icon. Each consecutive click will toggle this function on and off.
Align Left: To align to the left, make a selection in the document and click the 'Align Left' icon.
Align Center: To align to the center, make a selection in the document and click the 'Align Center' icon.
Align Right: To align to the right, make a selection in the document and click the 'Align Right' icon.
Justify: To justify a paragraph or text, make a selection in the document and click the 'Justify' icon.
Create or Modify Link: To create a hyperlink, select the text or image to create the link on, then click the 'Create or Modify Link' icon. if applicable, the popup window will contain existing link information. You can type the full URL of the page you want to link to in the URL text box. You can also enter the target window information (optional) and an anchor name (if linking to an anchor - optional).
For quick access to links, you can choose to insert a pre-defined link from the 'Pre-defined links' dropdown list.
When finished, click the 'Insert Link' button to insert the hyperLink you just created, or click 'Remove Link' to remove an existing link. Clicking 'Cancel' will close the window and take you back to the editor.
Create Email Link: To create an email link, select text or an image on the web page you are editing where you would like the link to appear. Click the 'Create Email Link' icon. In the dialogue box, type the email address for the link and the subject of the email.
When finished, click the 'OK' button to insert the email link, or 'Cancel' to close the box.
Insert / Modify Anchor: To insert an anchor, select a desired spot on the web page you are editing and click the 'Insert / Modify Anchor' icon. In the dialogue box, type the name for the anchor.
When finished, click the 'OK' button to insert the anchor, or 'Cancel' to close the box.
To modify an anchor select the anchor (displayed as an anchor icon when guidelines are switched on) and click the 'Insert / Modify Anchor' icon. Make your changes and hit the 'OK' button or click 'Cancel' to close the window.
Font: To change the font of text, select the desired portion of text and click the 'Font' drop-down menu.
Select the desired font (choose from Default - Times New Roman, Arial, Verdana, Tahoma, Courier New or Georgia).
Font Size: To change the size of text, select the desired portion of text and click the 'Size' drop-down menu.
Select the desired size (text size 1-7).
Format: To change the format of text, select the desired portion of text and click the 'Format' drop-down menu.
Select the desired format (choose from Normal, Superscript, Subscript and H1-H6).
Style: To change the style of text, images, form objects, tables, table cells etc select the desired element and click the 'Style' drop-down menu, which will display all styles defined in the style-sheet.
Select the desired style from the menu.
Note: this function will not work if there is no style-sheet applied to the page.
Font Color: To change the colour of text, select the desired portion of text and click the 'Colour' drop-down menu.
Select the desired colour from the large selection in the drop-down menu. To define your own custom color, click on the 'More Colors...' button at the bottom of the color picker.
This will launch the advanced color picker, where you can select a color from the color map, or specify your own color using RGB or hex values. You can also change the contrast of the color by clicking on the contrast gradient.
Highlight Color: To change the highlighted colour of text, select the desired portion of text and click the 'Highlight' drop-down menu.
Select the desired colour from the large selection in the drop-down menu. To define your own custom color, click on the 'More Colors...' button at the bottom of the color picker.
This will launch the advanced color picker, where you can select a color from the color map, or specify your own color using RGB or hex values. You can also change the contrast of the color by clicking on the contrast gradient.
Table Functions: To insert or modify a table or cell, select the 'Table Functions' icon to display a list of available Table Functions.
If a Table Function is NOT available, you will need to select, or place your cursor inside the table you wish to modify.
Insert Table: To insert a table, select the desired location, then click the 'Insert Table' icon.
A new window will pop-up with the following fields: Rows - number of rows in table; Columns - number of columns in table; Width - width of table; BgColour - background colour of table; Cell Padding - padding around cells; Cell Spacing - spacing between cells and Border - border around cells.
Fill in table details then click the 'OK' button to insert table, or click 'Cancel' to go back to the editor.
Modify Table Properties: To modify table properties, select a table or click anywhere inside the table to modify, then click the 'Modify Table Properties' icon.
A pop-up window will appear with the table's properties. Click the 'OK' button to save your changes, or click 'Cancel' to go back to the editor.
Note: this function will not work if a table has not been selected.
Modify Cell Properties: To modify cell properties, click inside the cell to modify, then click the 'Modify Cell Properties' icon.
A pop-up window will appear with the cells' properties.
Click the 'OK' button to save your changes, or click 'Cancel' to go back to the editor.
Note: this function will not work if a cell has not been selected and does not work across multiple cells.
Insert Column to the Right: To insert a column to the right of your cursor, click inside cell after which to insert a column, then click the 'Insert Column to the Right' icon.
Each consecutive click will insert another column after the selected cell.
Note: this function will not work if a cell has not been selected.
Insert Column to the Left: To insert column to the left of your cursor, click inside cell before which to insert a column, then click the 'Insert Column to the Left' icon.
Each consecutive click will insert another column before the selected cell.
Note: this function will not work if a cell has not been selected.
Insert Row Above: To insert row above, click inside cell above which to insert a row, then click the 'Insert Row Above' icon.
Each consecutive click will insert another row above the selected cell.
Note: this function will not work if a cell has not been selected.
Insert Row Below: To insert row below, click inside cell below which to insert a row, then click the 'Insert Row Below' icon.
Each consecutive click will insert another row below the selected cell.
Note: this function will not work if a cell has not been selected.
Delete Row: To delete a row, click inside cell which is in the row to be deleted, then click the 'Delete Row' icon.
Note: this function will not work if a cell has not been selected.
Delete Column: To delete a column, click inside cell which is in the column to be deleted, then click the 'Delete Column' icon.
Note: this function will not work if a cell has not been selected.
Increase Column Span: To insert column span, click inside cell who's span is to be increased, then click the 'Increase Column Span' icon.
Each consecutive click will further increase the column span of the selected cell.
Note: this function will not work if a cell has not been selected.
Decrease Column Span: To decrease column span, click inside cell who's span is to be decreased, then click the 'Decrease Column Span' icon.
Each consecutive click will further decrease the column span of the selected cell. Note: this function will not work if a cell has not been selected.
Insert / Modify Flash: If a flash movie is NOT selected, clicking this icon will open the Flash Manager.
If a flash movie IS selected, then clicking this icon will open the 'Modify Flash Properties' popup window.
To modify the properties of the selected flash movie, set the required attributes and click the 'Modify' button.
Insert / Modify Image: If an image is NOT selected, clicking this icon will open the Image Manager.
If an image IS selected, then clicking this icon will open the 'Modify Image Properties' popup window.
To modify the image properties of the selected image, set the required attributes and click the 'Modify' button.
Insert / Modify Media file: If a media file is NOT selected, clicking this icon will open the Media Manager.
If a media file IS selected, then clicking this icon will open the 'Modify Image Properties' popup window.
To modify the image properties of the selected image, set the required attributes and click the 'Modify' button.
Insert Textbox: To add a text box anywhere within the page, select the location where you want the text box to reside in the active window and click on the 'insert text box icon' that will place a text box where you have specified.
To resize the text box, click on the text box frame (turn 'show/hide guidelines' on if you cannot see the textbox outline). Then click on side/corner of the frame you wish to resize from and drag to a size you require. The text you type will be contained within the text box and will stretch to the size of the text box.
Insert Horizontal Line: To insert a horizontal line, select the location to insert the line and click the 'Insert Horizontal Line' icon.
Insert Special Characters: To insert a special character, click the 'Insert Special Character' icon.
A pop-up window will appear with a list of special characters.
Click the icon of the character to insert into your webpage.
Clean Up HTML Code: To clean HTML code, click the 'Clean HTML Code' icon.
This will remove any empty span and paragraph tags, all xml tags, all tags that have a colon in the tag name (i.e. ) and remove style and class attributes.
This is useful when copying and pasting from Microsoft Word documents to remove unnecessary HTML code.
Insert Custom HTML: There may be a list of available items to insert that you can preview and choose from. This list will usually contain customized items in HTML such as logos and formatted text specific to your site. To preview an item, click on the item in the list, and the item will appear the preview field below. To select the item, click on it and choose 'OK'.
Show / Hide Guidelines: To show or hide guidelines, click the 'Show/Hide Guidelines' icon.
This will toggle between displaying table and form guidelines and not showing any guidelines at all.
Tables and cells will have a broken grey line around them, forms will have a broken red line around them, while hidden fields will be a pink square when showing guidelines.
Note that the status bar (at the bottom of the window) will reflect the guidelines mode currently in use.
Source Mode: To switch to source code editing mode, click the 'Source' button at the bottom of the editor. This will switch to HTML code editing mode. To switch back to WYSIWYG Editing, click the 'Edit' button at the bottom of the editor. This is recommended for advanced users only.
link Button 
- on the toolbar.
