Creating Links in CKEditor

Category
Drupal Version
Tags

This page covers the creation of different types of links using the standard CKEditor link tool.  If your website is using the GT Editor or otherwise has the Linkit module installed, then you will have some additional options as described on the Creating Links in GT Editor (Linkit).

Accessibility and Usability of Links

To comply with accessibility law, and good sense usability guidelines, always make the visible text of your link something that clearly indicates what the website visitor is going to be taken to when following that link.  Some examples of improper link text include:

  • Click Here
  • Here
  • Read More
  • More
  • Follow This Link

Wording like these give the user no indication of what you are linking them to, and this is really bad for users with vision disabilities who utilize screen readers.  As a matter of speed and efficiency, these users often have the list of links on a page read aloud without their supporting context.  Hearing "Click Here" ten times makes it impossible for these users to know which link is which, and thus they will be unable to navigate through the links on your page.

While you can make an image into a link, it is best to only make text into links, or to link both an image and an equivalent piece of text together as a link so that you always have some plain text describing the destination of your link.  If you really only want to make an image into a link, then you must set the Alternative Text field of the image to a description of where the link is going to take the user.

Drupal 7

CKEditor in Drupal 7 has a variety of options available.  It is best to only use the ones described below:

Adding a Link

  1. Highlight the text that you want to turn into a link.
  2. Select the Link control button on the toolbar:
  3. Select the type of link you want to add in the Link Type drop-down:
    • URL: Links to another page in the current site, or an external site:
      • Enter the URL into the URL field.  The Protocol field will automatically adjust itself.
      • Enter links to pages on the current website as relative URLs, which do not include the server name:  /undergraduate/minors
      • Enter links to pages on the a different website as fully qualified URLs, which include the server name:  http://mysite.gatech.edu/undergraduate/minors
    • Link to anchor in the text: If you have already placed anchors in the current page, this will let you select one of them and create a jump-link to that anchor point
    • E-mail: This will let you easily create a link that invokes the user's default email program to send an email to a designated email address:
      • Fill in the E-Mail Address, Message Subject, and Message Body fields as desired.  Only the E-Mail Address is required, and bear in mind that the user can easily change the subject and body text in his/her email client - what you provide here is just a suggestion to the user.
  4. Select the Save button and your highlighted text should now be a link.

Please note that you cannot follow a link while in CKEditor.  You must either Preview your page or Save the page and return to View mode to be able to follow any of your links.

Removing a Link

  1. Put your text cursor somewhere within the linked text.
  2. Select the Unlink control button:
  3. The link will now be gone, though the text will remain.

Drupal 8

If you are working with a Dupal 8 site, you will find that it's version of CKEditor has taken a minimalist approach, so the instructions are really simple:

Adding a Link

  1. Highlight the text that you want to turn into a link.
  2. Select the Link control button on the toolbar:
  3. Enter the URL of your link into the URL field of the pop-up contol panel and select the Save button and your highlighted text should now be a link.

Please note that you cannot follow a link while in CKEditor.  You must either Preview your page or Save the page and return to View mode to be able to follow any of your links.

Removing a Link

  1. Put your text cursor somewhere within the linked text.
  2. Select the Unlink control button:
  3. The link will now be gone, though the text will remain.