Managing Links in the RTE

This page outlines how to create new links in your content, edit existing links, and other linking features of the Rich Text Editor.

Jump to:

 

Link Types

Within the rich text editor there are 5 types of links you can easily create.

  1. Internal links which link to other pages on your subsite. ​
  2. External links which link to pages on other sites, including subsites other than the one you are currently editing.
  3. E-mail links which create a link to send e-mail to a specific e-mail address.
  4. File links which link to a file that you upload to your site.
  5. Anchor links which link to a specific position within a page.

 

Internal Links

These are links that are within your own Drupal site.

Step 1 - Highlight text to be linked

If you do not highlight any text the link will be created at the current insertion point and the link text will be the page title.

A section of highlighted text
Text with the insertion point placed before "Anchored heading"

Step 2 - Click the link button

The toolbar with the link button highlighted

Step 3 - Choose Internal path for the Link Type

Selecting internal path from the link type dropdown

Step 4 - Enter the title of the page you wish to link to

When you begin typing the title of the page you should see an auto-complete list of titles below the Link field. If you see the title you are looking for click on it.

Typing a sample page name

Step 5 - Click OK

When you have selected a title, the field will complete itself with a (node/##). If you can see the full title and don't see the (node/##) section, it likely means that it did not find your page correctly.

If you see the (node/##) portion press OK and your text will be linked.

Filled in form with OK button highlighted

The highlighted text is now linked

 

External Links

Step 1 - Highlight text to be linked

If you do not highlight any text the link will be created at the current insertion point and the link text will be the URL you are linking to.

A section of highlighted text

Step 2 - Click the link button

The toolbar with the link button highlighted

Step 3 - Select URL from the Link Type dropdown

URL highlighted on the Link Type dropdown

Step 4 - Enter URL in the URL field

A link to google.ca being created

Step 5 - Click OK button

OK button highlighted in link dialog

 

E-mail Links

Step 1 - Highlight text to be linked

If you do not highlight any text the link will be created at the current insertion point and the link text will be the e-mail address you are linking to.

A section of highlighted text

Step 2 - Click the link button

The toolbar with the link button highlighted

Step 3 - Select E-mail from the Link Type dropdown

E-mail being selected from Link Type dropdown

Step 4 - Fill in E-mail address and optionally add a default title or body

The e-mail link form completed with sample data

Step 5 - Click OK button

OK button highlighted on link dialog

 

File Links

Step 1 - Highlight text to be linked

If you do not highlight any text the link will be created at the current insertion point and the link text will be the URL you are linking to.

A section of highlighted text

Step 2 - Click the link button

The toolbar with the link button highlighted

Step 3 - Select URL from the Link Type dropdown

URL option being selected from Link Type dropdown

Step 4 - Click Browse Server button

Browse Server highlighted on link dialog

Step 5 - Locate the file you want to link to

An arrow points at a file

Step 6 - Press Insert File button

The insert button is highlighted in the IMCE window

Step 7 - Press OK button

OK button is highlighted on link dialog

 

Creating an Anchor

Step 1 - Place the insertion point where you wish to place the anchor

Note: the insertion point is placed before "Anchored heading"

Insertion point before a heading

Step 2 - Click Anchor button

Anchor button is highlighted on CKE toolbar

Step 3 - Enter a name for the anchor

An anchor of anchor-link-example being created

Step 4 - Click OK button

The OK button highlighted on anchor properties dialog

Screenshot showing a flag where the anchor is inserted
A flag will appear where the anchor was inserted.

Creating Anchor Links

Step 1 - Highlight text to be linked

If you do not highlight any text the link will be created at the current insertion point and the link text will be a pound sign followed by the ID or anchor name. For example: #anchor-links

A section of highlighted text

Step 2 - Click the link button

The toolbar with the link button highlighted

Step 3 - Select "Link to anchor in the text" from the Link Type dropdown

Link to anchor in the text option being selected from Link Type dropdown

Step 4 - Choose anchor or ID to link to

An anchor being chosen by anchor name

Step 5 - Click OK button

The OK button highlighted on the link dialog

 

Linking to an anchor on a different page in the same subsite

Suppose you have an anchor in different page on your subsite that you wish to link to from your current one. You will need the following information in order to create this link:

  • The node ID of the other page (node/###)
  • The anchor name

When creating your link use the following settings:

  • Choose URL from the Link Type dropdown
  • From Protocol choose <other>
  • Set the URL field to be your subsite (if you have a www.utm.utoronto.ca/subsite URL), the node path, followed by an octothorpe (#), followed by the anchor name.
    For example, /subsite/node/10#my-anchor

A link to an anchor on a different page

 

Updating Existing Links

Click anywhere in the link you wish to update. Click the link button. Edit the link to the new location. Click ok.

 

Changing an existing link

Step 1 - Click anywhere in the link to be modified

A link with the insertion point in the middle.

Step 2 - Click the link button

Link button highlighted on the CKEditor toolbar

Step 3 - Update the URL, anchor, e-mail address or internal link to the new location

The URL being updated in the link modal window

Step 4 - Press OK

OK button highlighted in link modal window

 

Removing an existing link

Step 1 - Click anywhere in the link you wish to remove

A window with an insertion point in the middle of a word

Step 2 - Click the Unlink button

The unlink button highlighted on the CKEditor menu bar

The text from Step 1 with the link removed

 

The Target and Advanced Tabs

You may have noticed there are two other tabs along the top: Target and Advanced. These options are available for all link types, but may have some accessibility impact. See Accessible Navigation and Links for more on these impacts.

 

Target

The target tab's options
The target tab's available options.

These settings in this tab allow you to change the behaviour of how the link is opened. In general, you should just use the default. Most of the options are disabled or will provide unexpected behavior. It is recommended you only use the following:

<not set>
Recommended. Default option. Loads in the same window.
Same Window (_self)
Loads in the same window. Same as default.
New Window (_blank)
Opens in a new window. Note: This has accessibility concerns.
 

Advanced

The advanced tab with some fields filled in
The advanced tab with an advisory title set.

These settings allow you to enter additional metadata about your link. In general, you shouldn't need to change any of these settings. If you do need to change any of these settings, the following are the important ones:

Id
A unique identifier for the link element in the document (id attribute).
Language Direction
The direction of the text: left to right (LTR) or right to left (RTL) (dir attribute).
Language Code
The language of the link element specified according to RFC 1766 (lang attribute).
Advisory Title
The text of the tooltip that is shown when the mouse cursor hovers over the link (title attribute).
Advisory Content Type
The content type of the link (type attribute).
Linked Resource Charset
The character set of the linked resource (charset attribute).
Relationship
The relationship between the current document and the link target (rel attribute).
The most common use of this would be to use the value "nofollow"
 

Button Links

You can add a button style to the link.

  1. Highlight the selected text/link
  2. In the style drop down, select either Button or Button Block Style
  3. Click Save

Accessibility

See Creating Accessible Hyperlinks