Adding links to internal content pages, links to anchors on a page, and external links to other websites is an important feature of any content creation system and should be easy so as not to interrupt a creators workflow.
Out of the box, Drupal doesn't provide a comprehensive linking solution. However, with a few modules, you can make a robust solution very quickly and if you do this when setting up your site it is only a few extra steps. In this article, I will discuss some common linking functionality you need to think about including in the WYSIWYG and what the options are. Even though this is Drupal specific when it comes to adding the functionality it is also meant to be a general discussion of UX for content creators.
TLDR
I have gone for the Linkit module with the Advanced link module and a separate Anchor link module.
A bit of a back story
When setting up this site almost a year ago I set up CKEditor Entity Link and kept the default core CKEditor link functionality. CKEditor Entity Link enables easy linking to internal pages and other Drupal entities and the core CKEditor link was needed so I can add external links.
This solution as illustrated has 2 linking icons which isn't really an issue and has worked nicely to get this far. But now I want to add some new linking capabilities. I want to improve the content creation workflow and make the content easier to use for the reader. First, I will look at what I felt was missing and then what solution I am going with in the following case study.
Case Study: Looking at linking functionality
First, let's look at what is missing with the current linking set-up, below is what I have come up with with a few notes:
- The ability to add anchor links in the articles easily.
- Deeps links within articles are good as you can directly link to them from other pages.
- As such these links probably can't be easily indexed for use in other articles but being able to see them and being able to copy the link would be nice.
- Add styling to the anchor links could indicate that the heading is linkable. A chain-link icon seems standard.
- Allow users to add attributes to links, such as a title. Good SEO and should have been included from day 1. Since I was unsure of my direction and the options I decided to revisit once I had more content on the site.
Now let's look at the options for achieving the above functionality in Drupal.
Adding Anchor Links to Drupal
To add Anchor links and anchors in Drupal there is only 1 solution so this was easy. The solution is to install the Anchor Link module. To read more about Anchor Link I have included it in my module reviews section of this site. Anchor Link works nicely, it gives users a way of adding and naming anchors and a way of adding a link to the said anchor from within the same WYSIWYG text area. One thing with Anchor Link, however, is that it adds another set of icons for linking so now we have 3 icon sets.
Since this could be a bit of a UX nightmare. I wanted to see if I could fix it by trying to integrate it better into the editor toolbar. A quick search in the issues of Anchor Link and CKEditor Entity Link and I found a few solutions. All of the solutions involve Linkit so I decided to check it out.
As such integration into other CKEditor linking is not plausible right now for Anchor Link. The solution doesn't quite work, it doesn't integrate the auto-suggestion functionality. I have written and documented my research and testing on a separate page so if that interests you please read about it on integrating anchor link into Linkit (content coming). If integration into Linkit was possible then this would be an all in one solution which would be nice.
Using Linkit instead of default core linking and CKEditor Entity Link
The reason for switching to Linkit is that Linkit integrates with the Drupal default link functionality and therefore there is only the need to have one link icon in the CKEditor for internal and external linking. The other benefits are:
- Linkit uses an internal link node/# for the URL and uses a filter to add the pretty URL on render. Not necessary a big issue if you use Redirect module for redirecting when URLs change.
- Linkit's dialog can be customized to have article meta included which makes it easier to find articles.
- Linkit has matchers which will allow better integrations for Anchor Link in the future.
- More sites report using it so the upgrade to CKEditor 5 will be better supported possibly.
So all in all, using Linkit seems like a better option if you want to have Anchor links, it means you will only have 2 icon sets and also in the future, there may be the possibility of integrating Linkit with Anchor Link.
Having 2 icon sets instead of 3 is a big win and I don't think having Anchor Link sperate is an issue, especially since creating the anchor will always need to be a separate icon. Also, if you have a manual, a style guide, and training on usage then your content creators and editors will know what features are available and how to use the editor for the best results.
Enabling titles and attributes
This is as easy as installing the Advanced link module, it integrates with all three solutions: that is the default link capabilities, CKEditor Entity Link, and Linkit. The ease of adding this makes it a quick win to provide better link optimization so this is a must-have for all sites.
You can read about the Advanced link module on the CKEditor enhancements for Drupal page.
Conclusion
In this article, we have looked at what linking functionality you may need to include and how you can do it in Drupal. It is my recommendation that either of these solutions should be installed and configured when you set up a new site before any content is added. You should also provide the site users, content creators, content managers, and editors, with a manual on how this works and so they know that it is offered.
Well, I hope you now can provide a better linking functionality to your users. Are there any other linking functionality you think could be provided by the CKEditor, leave a comment below? Thanks for reading and see you soon.