WYSIWYG Editor Updates

We made a few changes to the WYSIWYG editor by removing some tools.


Over the summer we’ve been updating the website designs. Some of the changes include aligning content to a grid, increasing the webpage area, and redefining heading styles. We’re hoping to release those changes this fall.

The new designs allowed us to reassess the tools in the WYSIWYG editor. We removed tools like inline headings, and right align because they didn’t follow our new design rules. By updating the WYSIWYG editor now, it allows us to get a head start on the design updates.

The break down:

  • Right align: The new designs don’t support right align.
  • Underline: We removed the ability to style text as underline because it creates confusion with Links. Since links are recognisable as underlined text, we decided to reserve that style specifically for links.
  • Blockquote: Blockquote is meant specifically for highlighting quotes, but since we found that in most cases blockquotes were used for other purposes, we decided to remove it as a tool.
  • Inline headings: The new designs won’t be supporting inline headings because they create confusion with regular headings, and don’t follow accessibility rules.
  • Large button: We’ve redesigned the buttons and we will only be having one button style moving forward.
  • Linkit: The Linkit tool is designed to help users create internal hyperlinks easily, however, we find that it isn’t as intuitive as we’d like so we’re working on improving its functionality.
  • Div container: We found this tool to be fairly useless as none of us can even think of how it might be used. If you disagree, please let me know as I’m very interested in knowing how this tool could be useful.

What if a webpage uses a lot of deprecated styles?

Once the new designs are launched, the deprecated styles will turn into left aligned plain text. Inline headings will be one of the most obvious changes, as well as Large (two-line) buttons. I’d recommend converting all inline headings into regular headings or bold text depending on their proper function (see the headings doc for guidelines on this). As for large buttons, they will be converted to regular hyperlinks.


How to resize images without distorting them

You might think that no one will notice when you accidentally stretch my face to look like a pancake, but that’s not true and here’s how to prevent pancake face from happening to your images.

Method 1: Use the corners

When you select an image, there are hot points on all corners and edges of an image. An image can be resized by clicking and dragging those hot points. Make sure that you are only using the corners since using the edges will distort the image.

Dragging the hot points on the corners keeps the image in proportion.

Question: What if I accidentally distort an image? How do I bring it back to its normal proportions?

Answer: In the Image Properties, click the blue padlock so that it’s locked. This will restore its original proportions. (See Method 2 for details)

Please note: Hot points are not available in Chrome, so if Method 1 is for you, use Firefox instead.


Method 2: Adjust the Image properties

a) Select the image, b) Select the Image tool in the WYSIWYG toolbar, c) Make sure that the blue padlock is locked (next to the height and width properties). If the padlock is unlocked, click on it to lock it.

Make sure the padlock is always locked to keep the proportions in tact. If you accidentally distort an image, relock the padlock to restore it to its original proportions.

d) Adjust either the height or width. If you adjust the height, the width will automatically change in order to retain proportions and vice versa.


Create a hyperlink using Linkit

Linkit is used to create hyperlinks to internal unbc.ca webpages.

  1. Select the text you would like to convert into a hyperlink
  2. Selet the “Linkit” button in the WYSIWYG editor
  3. Type in the URL of the page. I do this by finding the page I am looking for within Drupal, selecting the URL, and paste it into the “Search content” field in the “Linkit” popup. Note that you must use the Drupal address – if you are in the unbc.ca Drupal environment you will paste in something like https://drupal.unbc.ca/some-name and not http://www.unbc.ca/some-name.
  4. The “Target path” field will populate when you select the result.
  5. Click “Insert link”
  6. Your link will now point to the desired page
  7. You can check your link by saving your draft and then clicking it in the draft view.

Image Formatting Basics

When inserting images into the WYSIWYG editor there are a few different was to adjust their appearance.

Aligning the image with text by using “Float” styles:

  1. Select your image in the WYSIWYG editor
  2. In the “Styles” drop down button in the WYSIWYG toolbar, choose “Float Left” or “Float Right” depending on which side of the text you want it to display.
Move an image within the WYSIWYG editor:
  1. This can be done by clicking and dragging the image.
  2. A text cursor will move when you do this and it will determine where the image will be placed.
Resizing an image:
  1. Select the image by clicking it in the WYSIWYG editor.
  2. Click the “Image” button in the WYSIWYG.
  3. Enter either the desired Width or Height (you can only control one in order to retain the correct proportions of the image). Make sure the padlock to the right is locked in order to keep the proportions.
  4. Click OK
Placing your image in a Template:
  1. You can control where an image will appear by placing it in a “Template”
  2. Click the “Template” button in the WYSIWYG editor
  3. Select the desired template
  4. Insert your image where appropriate

Insert an Image from the File Browser

If you have uploaded an image to another page then it will live in the File Browser and you won’t need to re-upload it to insert it into another page. For more information about why it’s important to use the File Browser, take a look at this post: Why Should I use the File Browser?

  1. Place your cursor where you would like the image to go in the WYSIWYG editor.
  2. Select the “Image” button in the WYSIWYG editor.
  3. Select “Browse Server”, this opens up the “File Browser”
  4. In the “File Browser”, in the left hand pane under the “sections” folder, choose the folder/section where your image lives (your image will live in the section where it was uploaded initially).
  5. All the files uploaded to that section will show up in the right hand pane.
  6. Select your desired image and click “Insert file”
  7. If you know the dimensions for that image, insert the width or the height in the “Image Properties” popup box (make sure the padlock is locked to preserve proportions).
  8. Click OK
  9. Your image will now show in the WYSIWYG editor.