How to link and unlink content

Two important CK Editor features are the link and unlink buttons. Though the CK Editor does allow you to link to a site by simply pasting a URL into the text box, the link button is useful for embedding links. Here is where the link and unlink buttons are located on the CK Editor toolbar:

Screenshot showing link and unlink buttons

Step 1: Embedding Basic Links

To embed a link in text, highlight the area you want the link in.

Screenshot of body text with highlighted future link

Next, click on the link button:

Screenshot of the link button

A dialog box that looks like this should pop up. Enter your URL into the dialog box. The "http://" will automatically be trimmed:

Screenshot with link menu

Enter your link into the box. Now your link should be embedded in the text.

Step 2: Linking to a Page on Your Site

Now that you know the basics of embedding a link onto your page, it's time to learn about linking to pages on your site. If you would like to link to a page on your Luggage site, highlight the text you want to embed the link in and click the link button. Copy your link into the dialog box as before.

Screenshot of a link on a Luggage site

Next, delete all of the URL before the first backslash. The "http://" in the protocol dropdown should be replaced with an "<other>" token, as shown below:


Screenshot of a trimmed link on a Luggage site.

You can double-check your link by saving the page, then hovering your mouse over the link you just created. The link path will appear on the bottom of your browser. It should lead to your Luggage page.

Screenshot with finished links

Step 3: Creating an Email Link

Follow the link steps above, except instead of "URL" as the link type, select "Email".

Email link type

Then, enter the email in the Email field.

Add Email to the email field

Select OK.

Step 4: Unlinking a Page

After learning how to link to a page, unlinking will feel very intuitive. This is the unlink button:

Screenshot of the unlink button

When there is no link is selected, the button is unclickable. To unlink a page, highlight your link:

Screenshot of unlink button

Then click on the unlink button. The blue or purple link text should disappear.

Screenshot of unlinked link

Notice how the unlink button is greyed out. If you try clicking on it again, nothing will happen because there is nothing to unlink.

If you have questions about this tutorial, please contact Ann Greazel by emailing