Links

The dialog are now contextual balloons in CKE5. The settings for links and workflow of adding links have changed slightly. This page outlines how to create new links in your content, edit existing links, and other linking features of the Rich Text Editor.

On this page:

 

 

Links are added using the Link tool pictured on the right. This is the recommended way of adding links regardless of the type.

Screenshot of the RTE link tool
  1. Highlight the text you wish to be linked
  2. Click the Link tool.
  3. In the link contextual balloon, start typing the title of the page within your site  you wish to link to in the URL field. You will see pages matching your query
  4. Select the page you wish to link to
    • Tip: When you have selected a page title, the field will complete itself with a (node/#). Don't be alarmed! This is just how Drupal identifies pages. Just let it do its thing.  
  5. Save

 

Reserved and built in internal paths

Only content type content can be searched through this method. There are other internal paths that you could link to such as:

  • People Listing
  • News Listings

You can find the internal paths for these listing views in the Site Details page.

You can use the provided paths as is when providing a URL in the link contextual balloon.

Screenshot of link tool adding internal links
Step 3 of adding internal links
Screenshot of url field using an internal path
Using the internal path as shown in the Site Details page to link to the administration category of the people listing

 

  1. Highlight the text you wish to be linked
  2. Click the Link tool.
  3. In the link contextual balloon, provide the URL wish to link to in the URL field.
    • Use the full absolute path (including the https://)
  4. Save
Screenshot of link tool adding external links
Step 3 of adding external links
  1. Highlight the text you wish to be linked
  2. Click the Link tool.
  3. In the link contextual balloon, provide the phone number prepended with tel: in the URL field.
    • For example, if you want the link to phone number (905) 569-4455, you should input tel:905-569-4455
  4. Save
 
  1. Highlight the text you wish to be linked
  2. Click the Link tool.
  3. In the link contextual balloon, provide the email prepended with mailto: in the URL field.
    • For example, if you want the link to email no-reply@utoronto.ca, you should input mailto:no-reply@utoronto.ca
  4. Save
Screenshot of adding email link
Step 3 of adding email links

 

  1. Highlight the text you wish to be linked
  2. Click the Link tool
  3. In the link contextual balloon, start typing the title of the file within your site that you wish to link to in the URL field. You will see results matching your query
    • Warning: For media items to appear in the search, they must first exist. Upload your files in media.
  4. Select the media item you wish to link to
  5. Save

See Media for details 

Add file

Before you can link to an anchor, it first needs to exist. You can add anchors to your page using the Anchor tool.

 

Setting an Anchor

  1. Place the cursor in the spot you wish to place an anchor
    • Tip: Works best where the major headings / titles are in your page
    • Example: This page has an anchor at each topic heading
  2. Click the Anchor tool
  3. In the anchor contextual balloon, provide an Anchor ID in the field
    • Anchor Names are used as ID and has to be unique
    • Use valid naming convention. Do not use special characters or space.
    • Use hyphens (-) to separate words
    • All lower case is preferred or camel case
    • Can not start with a number
    • You will need to remember the exact name you set here to link to it later

Best Practice: The anchor link should match the title or heading it is associated with. For example, the anchor name for the "Best Practice" section of this page is best-practice.

 

Screenshot of RTE anchor

 

 

Screenshot anchor name dialog

 

Linking to an anchor within the same page

  1. Highlight the text you wish to be linked
  2. Click the Link tool.
  3. In the link contextual balloon, provide the the Anchor Name you created prepended with # in the URL field.
    • Example: If you want to link to example anchor created above, you can input:
       #best-practices
    • Tip: It has to exactly match the anchor you created
  4. Save
Screenshot adding link to anchor
Step 3 of Linking to an anchor from within the same page

Linking to an anchor from a different page

  1. Highlight the text you wish to be linked
  2. Click the Link tool.
  3. In the link contextual balloon, provide the the Anchor Name you created prepended with full URL of the page where the anchor resides and an # 
    • Example: if you want to link to example anchor created above from a different page, you can input:
      https://www.utm.utoronto.ca/iits/documentation/drupal-user-guide/links#best-practices
  4. Save
Screenshot of adding external anchor
Step 3 of Linking to an anchor from a different page
  1. In the RTE, right click the link you want to modify
  2. Click Edit Link
  3. The link contextual balloon will show up where you can make your desired changes
    • It shows the same fields and options as creating a new link
  4. Save

 

Unlinking

  1. In the RTE, click the link you unlink
  2. In the contextual balloon for the link item, click the Unlink button
  3. Save

 

There are 4 predefined styles available for links:

  • Button: Adds Fawn's standard link appearance
  • Button Block: A button that fills the width of the container
  • Large Button: A bigger button
  • Large Button Block: A bigger button that fills the width of the container

To apply a button style to the link:

  1. Highlight the selected text / link
  2. In the Style drop down, choose one of the buttons styles mentioned above
Screenshot of RTE - Button Links

 

 

Best Practices

  • Use the appropriate link type. If you are linking within your site, use internal links.
  • Provide valid anchor names. Do not use special characters or spaces. Use '-' to separate words. All lower case is preferred or camel case. It should match or relate to the heading of the content it jumps to. Cannot begin with a number
  • See Accessible Navigation and Links