Hi there!
Welcome to OSU Drupal Droplets.
This is Joe Fenn with Oregon State University's
Web and Mobile Services.
Today we're going to continue our exploration
of CKEditor by taking a look at the LinkIt
module which is a separate module that integrates
with CKEditor.
Linkit's a really cool tool that gives us
the ability to easily create relative links
which is something that a lot of users struggle
with when they're just starting out and even
experienced users can sometimes mess this
up.
LinkIt makes it all easy.
Without any further hesitation let's jump
on in and edit our test page.
We'll start with creating an anchor link in
LinkIt.
So, first thing's first, we need to set an
anchor.
So, this flag here in CKEditor is the anchor
tool.
What an anchor link does, it allows you to
create a link on a page.
So, for example, you would have the link up
top and the anchor would be down at the bottom.
When you click the link at the top, it pulls
the page up to a particular spot.
We don't use anchor links a whole lot anymore.
There are other, more interesting tools that
have been created to kind of do this functionality
but it is still here and sometimes people
want to know how to make it. So, let's do that.
What we're gonna do is start by just creating
some text at the top, so we'll just call it
a "Test Anchor" and then, just for the heck
of it, let's left align this.
So, this is the text right here that we're
going to add the hyperlink to.
We actually need to set an anchor, so, let's
go ahead and do that.
And then we'll come up and we will click our
little flag here.
Now, when we make our anchor, keep it all
lower case and don't put any spaces in.
So put a dash instead of a space.
Spaces can sometimes break things.
Let's write "Test Anchor" and hit okay and
you'll see that it puts this little anchor
here, now your outside world will not see
the anchor.
This is just a visual cue for you, the content provider
So we've created our test anchor...come up,
click the chain with the little plus.
And, in this case, we want to actually create
the URL here.
We don't have a handy tool that will pull
the anchor up.
So, when you make an anchor, you start by
using a pound sign, just like this, and then
you write the anchor out.
Now note, the reason we use all lower case
and dashes is so it makes it easy to correctly
write your path here.
So, you don't have to guess.
Everything's all lower case and your spaces
are filled.
Let's go ahead and click the Insert Link button.
And notice you can't really test the anchor
here when you're in Edit.
We need to save the page and actually test
from the outside.
So we hit Save and then we will click our
anchor and notice it pulls it up as far as
it can.
It can't go any further cause this is the
absolute bottom of the page down here.
But notice there is where our anchor is set.
And that's how you create an anchor in CKEditor
using LinkIt.
This has been Joe Fenn with Oregon State University's
Web and Mobile Services and I hope to see
you for future tutorials.
