Search

The CK Editor

How to understand and use the CK Editor


CKEditor is the text editor that Luggage uses. It may be daunting for first-time users to try and figure out what each button does. This tutorial will lead new users through explanations of each button and their functions.

 

Horizontal Lines

How to utilize the horizontal line button


Step 1: Using the horizontal line button


Next, let's look at the button located next to the table button: the horizontal line button. If you need to separate your content, then you may want to use the horizontal line.

Screenshot of body text with horizontal line button

The Special Character Button

Do you need to add a copyright symbol to your page? Or perhaps a member of your lab has a diacritical mark in their name? The CK Editor has a list of special characters that you can insert into your body text. Below, you can see where it is located:

When you click on the special characters button, this dialog box will open:

Headers

How to utilize the header dropdown


Sometimes, the content on your page has varying amounts of importance. If you have a title, for example, you want your users to be able to see it easily. While you could just bold the text, using headers is great for optimizing your webpage for search engines.

Step 1: Make text into a header


The header drop-down is found in between the link button and the text formatting removal button:

Format Removal

How to utilize the formal removal button


Sometimes, you need to remove all of your formatting. Maybe you accidentally made the entire page into a header. Or maybe you accidentally bolded random parts of your news story. Either way, the remove formatting button is a useful tool in the CK Editor arsenal.

Step 1: Removing previous formats


This is where the format removal button is located:

Image Properties

Video created by Iowa State University Extension and Outreach IT

How to utilize the image properties button


The last useable button in the CK Editor toolbar is the image formatting button. If you click on an image and then click on the image formatting button, you will be able to alter the properties of that image. Before you get started here, you may want to read the detailed explanation of how to upload images on the Adding Images tutorial page.

Tables

How to create a table on your website


The next button in the top bar is the table creation button. This button allows you to create tables to organize data so that it is more readable for users. Here is where the table button is located:

Screenshot of the WYSIWYG text editor table creator/editor

Text Formatting

How to use text formatting tools on a website


Step 1: Locate the text formatting buttons


The most frequently-used functionality of the WYSIWYG toolbar is probably the basic text formatting options: bold, italic, and underline. These buttons are located in between the superscript button and the quote button:

Quotes and Lists

How to utilize the quote and list buttons


Do you need to indent a section of your content, such as a block quote? Or do you have a list of items that you want offset from the rest of your text? The CK Editor allows you to perform both functions. This tutorial will walk you through both actions.

Step 1: Making a Quote


The quote button is located between the underline button and the bulleted list button. It is useful when you want to indent part of your text.

Linking/Unlinking

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

Pages