How do I use the WYSIWYG editor
Posted by on 23 January 2013 03:48 PM

The WYSIWYG (What You See Is What You Get) Editor allows you to create and edit webpages using a word processor like interface (e.g. Microsoft Word).

General features of the WYSIWYG editor

Rolling your mouse over each icon on the WYSIWYG icon menu (shown above) will give you a description of what the feature does. Most of the icons are very similar to icons/features found in word processing software.

Paste as plain text - This will paste in text without any additional formatting (e.g. font-sizes). This can be useful if you are copying and pasting information from another webpage, or a stylized Word document.
Erase formatting - This is a similar featuere which will remove all formatting from text you have already pasted in, so that you can use the WYSIWYG interface to add formatting.
Insert special character - This can be used to insert Euro or other symbols into your text. Some browsers can display symbols incorrectly when they are pasted into the a WYSIWYG editor. This feature allows you to insert a symbol into your page in a way that will display correctly across all browsers.
Edit in full screen mode - This can be useful when editing long pages.
Separate the teaser and body of this content - If your site has a news page with a list of news articles, showing a short summary of each article on the news page acts as a teaser. This feature allows you control how much of your article appears in the summary.

Using the Format menu

Using the Format menu in the WYSIWYG editor allows you to format text on your page into headings, subheadings and paragraphs. Ordinary text should be set to Paragraph, a page heading should be set to Heading 2 whilst subheaders within your page should be set to Heading 3 and Heading 4 respectively. Below is an example of how headers might display on your site:

Note: Users who had previously created pages on the DCU website in Drupal would have been required to manually add the Faculty, School or Department title at the top of each page they created. This is no longer necessary as this title is automatically added to each page as part of the new DCU site design.

Pasting from Microsoft Word

The WYSIWYG editor allows you paste text directly from a Microsoft Word document. To do this, click on the Paste from Word button (shown above) once you've selected and copied the text from your Word document. A box will pop up (shown below).

Paste your text into the box and click the Insert button. The text from your Word document will then be pasted into the page you're creating, keeping all heading and paragraph formatting intact (including bold, italics, underline and links). The DCU website uses a standardised typeface system, so fonts you select in your Word document will not carry across into the WYSIWYG editor. Please do not paste images into the editor, please use the image uploader button as described below.

Creating links to a URL or a document

There are types of links you can add to a page using the WYSIWYG editor:

  • A link to another part of the page.
  • A link to another page on the DCU site / external site.
  • A link to an email address.
  • A link to a publicly accessible document or file in your Media Library (uploading a document).
  • A link to a private file in your Media Library. (Users will need to login to access/download this file)

To add a link:

  1. Highlight the text you want to link and click the Link button. (shown below)
  2. Fill in the URL of the page you wish to link to in the Link URL field (shown below)

    Alternatively, if you wish to link to document in your Media Library, click on either the Public files or Private files button as shown above. For more instruction on using the Media Library, see the section on Uploading and adding an image to your page below.

For a guide to linking to another part of the page, see the section on creating anchor links below.

To add a link to an email address:

  1. Type the email address or text you wish to link to an email address.
  2. Click the link button from the WYSIWYG toolbar as per above.
  3. In the link field, type mailto: immediately followed by the email address, e.g.

Uploading and adding an image to your page

Note: You should never copy paste an image directly into the WYSIWYG editor as this can cause issues with Drupal and the DCU website to crash.

  1. Click on the Insert image button in the WYSIWYG editor (shown above).
  2. On the screen that pops up, you either have the option of typing in a URL of an existing image (below left) or clicking the Media library button to select an image from your folder on the DCU web server or upload a new image (below right).

    If you have clicked the Media library button, you will see a screen like the ones below.
  3. Each Faculty, School and Department has a folder structure already set up in their Media Library by ISS (shown below). You should upload and store any images in the Images folder. To upload an image, select the Images folder, and click Upload. A box will pop up allowing you to upload the file.
  4. Click Choose file and pick the image file from your computer. The image you choose should be a maximum of 700 pixels wide (review How do I resize and prepare images for use on the DCU website? for more guidelines on images.)

    When you have selected it, click Upload.
  5. Click on the Images folder and select the uploaded image you want to insert into your page
  6. Fill in the Image Description and Title fields.

    The Title field should be the a short name for the image, e.g. Brian MacCraith meets Richard Bruton whereas the Image Description field should be more descriptive, e.g. Minister for Jobs, Enterprise and Innovation, Mr Richard Bruton TD pictured talking with President of DCU, Professor Brian MacCraith at the opening of the DCU Innovation Campus. The contents of these fields are used by search engines and drive traffic to the DCU website, so it is important that they are filled in correctly. These fields are also used by accessibility screen readers to express the meaning of an image to users that have vision impairments.

    Filling in of the Image Description and Title fields is mandatory because they allow for compliance with the WCAG 2.0 Accessibility guidelines.

  7. Click on the Appearance tab to see more options:

    • The Alignment drop-down allows you to align the image, relevant to the text. The text preview box will allow demonstrate the effect of the different alignment options.
    • The Dimensions field allows you to set the dimensions you wish the image to appear on the page. The actual dimensions of the image will be displayed in this field by default, width x height. If Constrain proportions is selected, you can change either the width or the height and the value of the other field will change in proportion. This can be handy for using the same image in multiple places at different sizes, though if there is a large difference in the size, it's recommended that you resize the image and upload a second, resized copy.
    • The Vertical space and Horizontal space should be left blank.
    • The Border field should be left blank, or set to 1 if you want a border around the image
    • The Class menu allows you to select predefined image styles, set up by ISS, e.g. to add margins, padding or special borders to images.
    • The Style field allows you to enter CSS code to change the display of your image. It is recommended that you enter nothing into this field and use the pre-defined styles in the Class menu instead.
  8. When you have finished setting options, click Insert to insert the image on to your page.

Creating Anchor links

Anchor links allow you to link to one part of a page from another and can be particularly useful on pages with a lot of text.

  1. Highlight the section of text you wish to link to
  2. Click the Insert/edit anchor button (shown above). A box will pop up (shown below)

  1. Type a name for your anchor in the Anchor name field. The anchor name should have no spaces, use hyphens (dashes) instead of spaces and should be short and relevant.
  2. Click Insert. An anchor icon will appear next to the section you've set the anchor for. (shown below)
  1. Follow the instructions for adding a link as per the Creating links section above. Once you have clicked the Link button, instead of typing a Link URL, select the anchor you want to link to from the Anchors dropdown. (shown below)
  1. Click Insert
(3 vote(s))
Not helpful

Comments (0)