Create Internal Links using the Linkit module in Drupal

Don’t forget to subscribe to our YouTube channel to stay up-to-date.

Linkit gives you an easy interface with an ‘autocomplete’ field to search for content on your site, and then link to it. In other words, it provides search functionality to find the content on your site and insert the corresponding internal link.

Using the same interface, you can also insert external links. So you can insert links, both internal and external, with the same interface.

It supports internal links to nodes, users, taxonomy terms, files and comments, etc. With this module, you do not need to copy or remember the target URL, or go back and forth to find out and verify the exact link. It provides a more user-friendly interface well integrated with the insert link function of the editor.

Use Linkit with Editor Advanced Link Module

While working on links, you will find that you need something more, such as the option to open the link ‘in a new window’. You might as well also install another module called the Editor Advanced Link, which is another popular module which provides enhanced features for inserting links. For this reason, it is recommended also to install this module at the same time, to make it more complete.

In fact, it was also mentioned in the project page of the Linkit module that, starting from version 8.x-5.x, support for link attributes has been removed, and this Editor Advanced Link module is recommended there.

Getting Started

Installation of the Linkit module is easy. There are no extra requirements. Just follow normal module installation procedure. However, note that there are different versions in this module. At the time of this writing, there are:

• 6.0.0 which requires Drupal 8.8 | 9
• 8.x-5.0 which also supports Drupal 8.8 | 9
• 8.x-4.3 which supports Drupal 8 prior versions
• 7.x-3.6 for Drupal 7

If you are running Drupal 8.8 or above, we suggest installing 6.0.0 or later. For older versions of Drupal 8, you should install version 8.x-4.3. In this article, we shall focus on the latest 6.0.0 version.

Installation using Composer

If you follow the normal Composer installation, like

composer require drupal/linkit

ft will install version 8.x-4.3 by default. To install the latest version of the module, which is recommended, you need to specify the version in the Composer command:

composer require drupal/linkit:^6.0.0-beta2

Enable the Linkit module after installation.

Editor Advanced Link Module

Installation of the Editor Advanced Link module is straight forward. There are no extra requirements. Just follow normal module installation procedure.

Installation using Composer

Install using Composer:

composer require drupal/editor_advanced_link

Enable the Editor Advanced Link module after installation.

Configuring the Linkit Module

Configuration of the Linkit module is a little bit different for different versions of the module. In this article, we shall focus on the latest version 6.0.0.

1. Go to Configuration > ‘Content authoring’ and click on ‘Text formats and editors’

2. Click on Configure on the text format you’re going to use. In this example we’ll click on Configure on the “Basic HTML” row.

3. Enable Linkit under the ‘Enabled filters’ section by checking ‘Linkit URL converter’

4. Scroll up back to the ‘CKEditor plugin settings’, and select the ‘Drupal link’ tab. Make sure the ‘Linkit enabled’ option is checked, and then select the appropriate ‘Linkit profile’. Let’s choose the ‘Default’ profile for now. For more details about Linkit profiles, it will be covered below later.

After this configuration has been completed, linkit will be available for users.

How to Use Linkit

Users normally create content in the long text format fields using the default Drupal editor. To insert a link, you first highlight the text and click on the ‘Link’ button, and an ‘Add Link’ window will popup and there you can enter either an internal or external link.

You can see the small text under the space in this popup window, it says ‘Start typing to find content’, because it is now an ‘autocomplete’ field, which is enabled by the Linkit module.

If you are looking for the link to another internal content on the same site, just start typing with the title or keywords, and the system will automatically search for the matching content:

Here you just select the right content, and the system will insert the appropriate internal link for you into the editing text.

Note that these figures show the scenario without the Advanced Editor Link module enabled.

Configuring the Advanced Editor Link Module

After installing and enabling the Editor Advanced Link module, an extra attribute ‘Title’ becomes available by default.

The ‘Title’ attribute, when entered, will appear when you hover over the link.

There are other attributes available apart from ‘title’, but they are limited by the ‘Allowed HTML tags’ setting in the Basic HTML editor configuration. These other attributes need to be enabled before you can use it.

Enable Extra Attributes for the Advanced Editor Link Module

To enable the other attributes from this Editor Advanced Link module, go to

1. Go to Configuration > ‘Content authoring’ and click on the ‘Text formats and editors’

2. Click on Configure on your text format.

3. Scroll down to the bottom and find the Filter settings. Select ‘Limit allowed HTML tags and correct faulty HTML. There you can find the attributes allowed associated with the tag for links. After the Editor Advanced Link module is enabled, the following allowed HTML tag reads:

Here you can find the attribute ‘title’, and that’s why it is available by default.

4. To enable the ‘target’ attribute, you can modify this allowed HTML tag by inserting the tag as follow:

target</strong>>

And then save the configuration. After that, you will find the extra attribute in the popup window:

With this ‘target’ attribute, you can configure the link to be opened in a new window or a new browser tab.

If you are an advanced user, you may add more available attributes to the allowed HTML tags for additional attributes. They include the following attributes highlighted as bold. Each represents a separate attribute corresponding to different CSS elements.

target class id rel</strong>>

We shall not go into details for these other attributes here.

Create Additional Linkit Profiles

Additional Linkit profiles can be created:

1. Go to Configuration > Content authoring and click on ‘Linkit’

2. From this page you can create and manage all your Linkit profiles. To create a new profile, click the ‘+ Add profile’ button, then enter in a “Profile Name”.

3. Click on the ‘+ Add matcher’ button to continue

4. Select a matcher from the list. When you search the content by autocomplete in the URL field, this is the entity you select here which the system will search from.

5. After selecting the matcher, you will arrive at this following page for additional configuration for this particular matcher.

6. Enter the ‘Metadata’ in the form of ‘tokens’. Metadata is additional information to be displayed in the autocomplete list of search which helps content creators to better identify the right content to select. Click on the ‘Available Tokens’ to display the list of tokens you can choose to configure. This list is based on what matcher you have chosen above.

As an example, following is the metadata field in the default profile for ‘content’:

by [node:author] | [node:created:medium]

which adds the name of the author and the date created to the list of autocomplete search. When searching in the URL field, it will look like this. The small text comes from the ‘metadata’ configured.

7. Complete other settings or you can leave them as default, then Click ‘Save changes’ to save this matcher.

For each profile, you can add additional matchers for different types of content that are allowed. Following is an example of multiple matchers created in a single profile, which allows content creators to search for different types of content entities. Each matcher will be configured with different matching metadata to display. This will make the content searching much easier.

In this example, matchers include content, users, taxonomy and media items (if the media module is enabled).

8. Do not forget to select the right profile in the target text format editor:

Summary

The Linkit module, together with the Editor Advanced Link module, provides a user-friendly interface for inserting both internal and external links.

The Linkit profile allows you to configure the appropriate metadata which appears when searching for content. This is helpful to content creators to accurately locate the appropriate content in the autocomplete search.

These 2 modules together allow us to provide a very nice user-experience for the content creators, and make life easier for them.