Using the WYSIWYG Editor
Note: We have presumed that you have FCKeditor installed as your WYSIWYG editor.
How to use the WYSIWYG editor
The editor is similar to using Word. However there are a few crucial things to remember when working with an HTML editor online.
- Save you work often! You WILL remember to do this after you have lost a substantial amount of formatted text, because the admin area has timed-out or your internet connection drops.
- Don’t copy and paste from MS Word. First copy any text to Notepad or another plain-text editor, then copy the text into the editor.
There are a number of buttons on the editor's toolbar. Depending on your site configuration, you may see more or fewer buttons on your editor's toolbar.
Roll your mouse over the icons to see tooltips. We provide some tips below.
- Source - view and edit the html source code.
- Preview - of limited use in MODx.
- Templates - your web developer will advise you if these are to be used. In most cases, it will be more effective to use separate page Templates and Template Variables in MODx.
- Cut, Copy, Paste - you can also use standard keyboard shortcuts.
- Paste from MS Word - If you must copy from MS Word, use this.
- Find, Replace - self-explanatory.
- Remove Format - can be a little inconsistent. For example, if you have applied a format over a heading style, then the Remove Format button does not work. You have to toggle the style to normal and then toggle back again. Sometimes you may have to turn on Source to remove excess format tags.
- Bold, Italic, Underline - all self-explanatory. Try to avoid underlining your content, as your visitors will presume that the underlined text is a link.
- Lists: number and unordered - are powerful and useful tools for formatting content. These should be styled by your web developer using CSS .
- Indent and Outdent - are useful for positioning text such as quotes, or positioning images off the margins. Make sure that you Preview the changes, as in some designs Indenting text may have unforseen consequences on other aspect of the design.
- Text justification - these should be used sparingly. In most cases your web designer will have made conscious choices about the text justification that are reflected in the CSS styles available in the Format and Styles dropdown.
- Links - used to insert internal and external links (see FAQ below).
- Images - used to upload and insert images (see FAQ below).
- Tables - used to insert and modify tables (see FAQs below).
- Horizontal Rule - insert a horizontal rule. These can be styled by your web designer using CSS.
- Special characters - insert special characaters like © and ™.
- If your web designer has effectively used CSS you should be able to avoid this row altogether. If possible you should limit yourself to using the Format and Styles dropdowns for formatting text. Why? Because the Format and Styles dropdowns use CSS to style the text, so if you need to change your site design later, it is easy to update. If you apply line-by-line formatting then these can only be updated by manually changing the styles in each page.
- Font - avoid changing the fonts as you will lose consistent design in your site.
- Font size - avoid applying sizes to your fonts. Instead use the pre-defined Format and Style menus. Why? The editor applies fonts using html font tags, which may not correspond with the font system used by your web designer in CSS.
- Text colour, background colour - avoid using these. If you do, make sure you know the exact reference for your site's style guide. Type the colour reference instead of relying on the colour picker. Slight changes in colour on a site can ruin the design.
FAQ
Can I copy directly from Word?
NO. This is the most common mistake with editing. Always copy text from Word
into Notepad before copying into the html editor. Very important! After
you have pasted from Notepad, you can remove any linebreaks by using Delete
on the previous line. If you do paste from Word, use the 
button.
How do I use heading styles in the WYSIWYG editor?
You should use the Format dropdown to style your text.
- Select the text you want to style.
- Select the style you want to apply from the style dropdown.
- To reset to standard text, select Normal. If a style is not changing, try toggling it to another style and back again.
How do I format text in the html editor?
We recommend that you primarily use the heading styles set by your web developer (see previous FAQ).
However there is another dropdown your web developer may configure for you to use. Whereas Format is applied to a whole block of text (like paragraph formats in Word) a style can be applied to a single word, image or any content item. To apply a style:
- Select the text you want to style.
- Select the style you want to apply from the style dropdown.
How do I insert images?
- Click on
- Click the Browse Server Button, then select the image you want to insert, type the ALT tag and click OK.
- If you need to upload at the same time, then click Upload first and select the image to upload (ensure it is .gif, .jpg. or .png and optimised for the web) (see tips below)
- OK.
Can I insert any image [TIPS]?
You can only use PNG, GIF or JPG images in a web page.
- You can use most photo-editing software to convert TIF or BMP images to JPG or GIF. You can even use the very basic Paint program in Windows to save as JPG or GIF format.
- Check that the JPG or GIF images are not too large. You can see the size in the image editor. You should look for the width dimensions in pixels (px).
- If you have multiple images on a page eg. product images, they should be the same width for design consistency. This should not be more than 300px, and in most cases would be between 100-200px. Ask your web developer for the standard image size for your website.
- Most image optimizers do not work with PDF files. For best results, without a PDF-exporter application (ie Adobe Acrobat NOT Reader), you can take a JPG screen shot of the image in the PDF document. You can use the free screen capture software at wisdom-soft.com, or try SnapNDrag from yellowmug.com for OS X.
How do I insert a link?
To insert a link in a document:
- Select the text or image that you want to link from.
- Click on
- The following dialog appears
- To link externally just type the URL for the site into the URL box.
- To link to an internal page, you first need to copy the URL of the page. Navigate the page from the front end of the website and copy the URL from your browser's location field to the dialog box. [If you use Firefox or any browser with tabbed browsing enabled you can have the front-end of the site open in a separate tab].
- MODx also has a special tag to use for referring to internal documents. It takes the form [~xx~], where xx is the ID of the document you wish to link to. This can also be combined with other MODx tags. For example, to create a link to your home page: <a href="Home.html>Home</a>
- After you click OK, the link will appear in the content editor as blue underline text. However on the front-end of the website the links will styled in CSS by your web developer.
- If you want the link to appear in a new window you can set the target as "_blank"
- You can also create a javacript popup:
How do I insert links to PDF documents?
Before you can insert a PDF document, it must first have been uploaded to the assets/docs folder, and you will need to know the path to where it was uploaded. Uploading and other file management procedures is beyond the scope of this document; check the Administrator's Guide for more information.
- Select the text that you want to link from. We recommend that you always put the .pdf extension on the end so that user will know that the link leads to a PDF document, not another page. (eg. Policies.pdf)
- Click on the
icon, then type a link to the PDF file' location on your web server, eg. /assets/docs/pdf/policies.pdf.
- Save.
