{"id":942,"date":"2024-01-09T14:31:00","date_gmt":"2024-01-09T22:31:00","guid":{"rendered":"https:\/\/blogs.oregonstate.edu\/calverta\/?p=942"},"modified":"2024-01-09T22:02:12","modified_gmt":"2024-01-10T06:02:12","slug":"how-to-make-anchor-links-in-osu-drupal-10","status":"publish","type":"post","link":"https:\/\/blogs.oregonstate.edu\/calverta\/how-to-make-anchor-links-in-osu-drupal-10\/","title":{"rendered":"How to make anchor links in OSU Drupal 10"},"content":{"rendered":"\n

While OSU Drupal 7 had a button in the CKEditor to create anchor links, at the time of posting (2024-01-09) CKEditor in OSU Drupal 10 doesn’t currently have a button … yet.<\/p>\n\n\n\n

Until there is a button, here’s how to add anchor links manually.<\/p>\n\n\n\n

For the text version of this bad advice, I’ll pretend that we have a page for students about the cost of attending OSU. On that page there are several sections designated by h2 headings. I’ll assume one of the headings you’d want to create an anchor link to is “Financial aid”<\/p>\n\n\n\n

You’ll need to edit html by hand. Click the “source” button in CKEditor to view the block html.<\/p>\n\n\n\n

Preferably in a heading element add id=”financial-aid”<\/p>\n\n\n\n

<h2 id=\"financial-aid\">Financial aid<\/h2><\/code><\/pre>\n\n\n\n
Then when creating a link on a different part of the page, use #financial-aid as your url.<\/p>\n\n\n\n
or if you are linking from somewhere other than your current page, add #your-anchor-text to the end of the url.<\/p>\n\n\n\n
For example: https:\/\/unit.oregonstate.edu\/students\/cost#financial-aid <\/p>\n\n\n\n
If you are adding a link from a menu bar item to your anchor link, use “#financial-aid” (without quotes) in the url field.<\/p>\n\n\n\n
Here’s a wildly entertaining video walkthrough – although it does not include an example of adding a link to a menu bar item.<\/p>\n\n\n\n
\n