Drupal Enterprise 7: Using Anchors in Your DE7 Site

This article describes how to use anchors in a UMN-Drupal site. The following instructions are for websites using the default UMN Drupal Enterprise 7 configuration.

How to add the Anchor button to the UMN WYSIWYG editor

  1. Go to Home » Administration » Configuration » Content authoring » Wysiwyg profiles
  2. Click Edit for the WYSIWYG profile used for your site. For most users, this will be UMN WYSIWYG.
  3. Select the Anchor and Advanced link check-box.
  4. Go to Home » Administration » Configuration » Content authoring » Text formats » UMN WYSIWYG
  5. Click Configure for the WYSIWYG profile used for your site.
  6. Rules for Class Names and for Element IDs need to be specified
    1. The class attribute is used in your HTML elements and attributes rules. You should specify the Rules for Class Names field in the "Advanced rules" section below. Leaving it unspecified will result in all class attributes filtered out.
  7. Scroll down to the Filter Settings tabs
  8. Click on WYSIWYG Filters
  9. In the HTML elements and attributes section:
    1. Locate the a attribute (it's probably the first item listed)
      1. Remove the ! before the "href"
      2. Add |id to the end of the list of arguments inside the brackets
      3. The row should now read a[href|target<_blank|title|style|class|name|id]
  10. Click Save at the bottom of the page
note: The exclamation point needs to be removed, because it makes the "href" a required element of the tag, so the filter will remove <a id="your-anchor"> out of the finished HTML, as it doesn't have a "href"

How to add Anchor Links to text

Anchor links allow you to link to a specific spot on a page, for instance, on a long page you could create a link at the top of the page that quickly jumps the user to the bottom of that page, or vice versa. This involves two steps: inserting the "anchor", then creating a "jump" link to that anchor.

Place the cursor at the spot in the text where you want the anchor. Use the anchor-shaped tool (15th from left).

 

Create a unique name for each anchor, using a single word related to the anchor, or else hyphens to create multi-word anchors. Every anchor on a page must be unique. Click insert to create the anchor.

 

Then go to the place on the text where you want to insert the "jump" link. Select the text that you intend for the link, and use the standard Insert/Edit Link tool (13th from left) to create the link.

 

The Insert/Edit Link window should show a field called "Anchor" just below the "Link URL" field. Pull down the selection triangle on the right, and pick the anchor you want. Select "Insert" to make the link.

Additional Information

If you need to make further changes to your WYSIWYG editor after following these steps, make sure you do not remove or alter these changes. If your new changes filter out the code for anchor links, then any existing anchor links will stop working.