Rich Text Editor (UTM Minor)

This page provides step-by-step instructions (with pictures) for inserting images and media into your content.

Jump to:

Inserting Images

The steps below will outline the process of adding a new image to your content. If your image has already been uploaded previously, you can skip from step x to step y.

  1. Click on the Image button
  2. In the image dialog window, click on the button labelled Browse Server. This will open a pop-up file browser in a new window.
  3. Select the folder you want the image to be uploaded to (or the location of the existing image if it has been previously uploaded) on the left-hand side in the Navigation window.
  4. Click on the Upload button in the upper left-hand corner on the file browser menu bar.
  5. Click on the Choose File button.
  6. Select your image and click open.
  7. Click on the button labelled Upload in the bottom of the upload dialog.
  8. Select your image file from the listing window in upper right quadrant.
  9. Click on the Insert file button with the green checkbox in the file browser menu bar. This will close the file browser window and fill in the path to your file in the editor field.
  10. Enter your Alternate text. For more on alternate text see Alternate Text.
  11. Press the OK button at the bottom of the image dialog window.
  12. Your image should now appear in the editor window.

In Images

Step 1 - Click on The Image Button

A screenshot of the CKEditor image button

Step 2 - Click on the Browse Server button

Browse button

Step 3 - Select folder to contain (or containing) image

Arrow pointing to folder navigation in IMCE

Step 4 - Click on Upload button on file browser menu

Upload button in IMCE highlighted in red

Step 5 - Click on Choose File

Choose file button circled in red

Step 6 - Choose your file

Choose File dialog on Windows 7
Open File Dialog on Windows 7
Choose File dialog on OSX
Open File Dialog on OSX

Step 7 - Click on the Upload button in the dialog

The upload button highlighted

Step 8 - Select your image in the file browser

An arrow pointing at selected file

Step 9 - Click on Insert file button

Upload button circled in red

Step 10 - Enter your alternate text

Alternative text highlighted in red

Step 11 - Click OK

The OK button circled in red

Step 12 - Your image should now appear in the editor window

CKEditor with an image in the editor

Wrapping Text Around Images

Step 1 - Select your image by clicking on it

An image is selected in the RTE

Step 2 - Click on the Styles dropdown button

'Left' being chosen from styles dropdown

Step 3 - Choose your style from the Object Styles section

For more information available image styles see the Image Style Cheatsheet.

An image on the left with text wrapping around it.

An image with the 'Left' style applied.

 

Inserting Media

You can embed media such as videos into your pages through the RTE as well. The embed must be using the <object> tag, if it is using the <iframe> tag, it will be stripped out by the editor (see known issues).

You need to use the Old Embed Code Utility to generate these embeds for YouTube videos.

YouTube Share Links
Step 1. Using YouTube's sharing url

Embedding a YouTube video

  1. From YouTube video, copy the sharing url that it provides
  2. Go to Old Embed Code Utility 
  3. In the "YouTube video code or URL" field, paste the sharing url you copied in Step 1
  4. Click the Generate Code button. This will generate the code that you need to use in Step 6
  5. In the edit page you want to embed the video in, click the Embed Media button
    edit media button
  6. Paste your embed code you generated in Step 4 into the textarea in the pop-up dialog window and press OK.
    The media embed textarea