Many campus Drupal websites have either the What You See is What You Get (WYSIWYG) text editor called CKEditor, or the custom built specialized version of CKEditor known as "GT Editor".

The table below describes many of the control buttons you will find on the CKEditor or GT Editor toolbar.  If your control buttons don't look like these, you should ask your site administrator or local web developer to look into upgrading your site to the latest version of CKEditor.

Note: The control name can be seen by hovering over the control, and is what should be heard when working with accessibility technology.

Note: It is possible that your site administrator may have removed or rearranged control buttons or added ones not described below.  In addition, Drupal 8 sites will not have all of the buttons below by default, as Drupal 8 comes with a minimal functionality version of CKEditor.

Control Button Image	Control Button Name	Additional Notes
	Maximize	Maximizes the editor in the browser window so you can see more of your content while editing.
Styles	Formatting Styles	Lets you apply pre-defined combinations of various formatting styles to text.
B	Bold
I	Italic
X2	Superscript
X2	Subscript
	Insert Special Character
	Insert Teaser Break	Creates an invisible break to tell Drupal that everything above the break (and nothing below it) should be shown when this page is shown in a search listing or Views listing.
	Insert Horizontal Line
	Insert/Remove Bulleted List
	Insert/Remove Numbered List
	Decrease Indent	In a numbered or bulleted list, moves the current item up a level (further to the left)
	Increase Indent	In a numbered or bulleted list, moves the current item down a sub-level (further to the right)
	Table	Lets you create and configure a table
	Image	Lets you insert an image into your content
	Link (to content)	Link to other pages, uploaded files, other websites, etc.
	Unlink	Removes a link from text, returning the text to normal text.
	Anchor	Create a link anchor in your text, which can be used to send users directly to that part of the page.
	Paste from Word	Tries to preserve formatting and strip unnecessary markup when pasting in content from Microsoft Word
Source	Source	View and/or edit the HTML source code for your content.

If your site is running on Drupal 7 with the official GT Theme and the GT Editor module, then you should have a Styles drop-down option in the toolbar of your WYSIWYG (GUI) text editor (AKA CKEditor) with the following formatting styles.  If you are not using both the official theme and the GT Editor module, then you will not see any of these styles (and may not even see the Styles drop-down option).

"Block" styles

"Block" styles describes HTML elements or containers which do NOT sit next to each other on a line, but "own" the entire page's width for the lines they fill.

Basic HTML Styles

These first options are mainly headings, so you can add visual (and invisible) outlines to your pages and make it easier for people to scan them quickly.

• Heading <h3>
  • Subheading 1 <h4>
  • Subheading 2 <h5>
  • Subheading 3 <h6>
• Preserve format <pre>

Image and Media Styles

Mostly, these options style images within your pages. They work best when you place your image on its own line, and not inside a paragraph.

• Float Left: moves your image to align with the LEFT side of the page and makes other text wrap around your image on the same lines it occupies.
  • Float Left - Simple
  • Float Left 70%
  • Float Left 50%
  • Float Left 30%
• Float Right: moves your image to align with the RIGHT side of the page and makes other text wrap around your image on the same lines it occupies.
  • Float Right - Simple
  • Float Right 70%
  • Float Right 50%
  • Float Right 30%
• Clear Floats: forces text to NOT wrap around your image, so that the image has lots of white space on either side of it.
  • Clear Float Left
  • Clear Float Right
• Embedded Media Wrapper: not currently used, but may one day make videos more responsive on various sizes of device.

For Themers: these apply a <div> with a special class around the selected image or media. That <div> may replace the <p> element if your image is within a paragraph, leading to incorrect styling. This is intentional, as every Float style (except for those ending in "Simple") is designed to provide special styling to any text that accompanies your Floated image.

Paragraphs, Buttons and Links

Add visual enhancements to paragraphs or turn small phrases or a short sentence into a special button or link.

• Intro Text: makes a paragraph's font size and line spacing larger (designed to be used only for the FIRST paragraph on a page).
• Yellow Highlight Button
• Blue Highlight Button
• Jump Link

For Themers: these apply a <p> with a special class around the selected text.

"Inline" styles

"Inline" styles describes containers which are designed to sit next to each other on the same line and usually occur within a paragraph.

Basic HTML Styles

• Computer Code <code>
• Cited Work <cite>
• Inline Quotation <q>
• Block Quotation <blockquote>

Pull Quotes

• Pull-quote - Left: styles a sentence as a large quote on the LEFT side of the page.
• Pull-quote - Right: similar to above, but on the RIGHT side of the page.

For Themers: these apply a <blockquote> with a special class around the selected text.

File Types

Add icons to your selected text, which show pictures of the related file type.

• PDF Icon
• MS Word Icon
• MS Excel Icon
• MS PowerPoint Icon
• Generic File Icon

For Themers: these apply a <span> with a special class around the selected text.

The following instructions are for adding an image or picture to a page when your site is using GT Editor or otherwise has the IMCE module installed.

Important!  Be sure to properly resize your image file before you upload it to your site.

1. Place your text editing cursor where you want to be located within your content
   • If you want the image on it's own line, create that blank line and place the cursor on it
   • If you want the image to float left or right of existing text, place your cursor at the beginning of that line of text
2. Select the Image button in the editor toolbar (it looks like a painting of an outdoor landscape with a mountain and a little sun in the upper-right corner).
3. In the pop-up control panel, select the Browse Server button to the left of the URL field.
   • If you do not see a Browse Server button, then your site is not configured with the IMCE module, and the following instructions do not apply to your website.
4. In the next pop-up control panel that appears, navigate to the folder where you want to save your uploaded image or a folder that already contains a file that you wish to use for your link.  To upload a new file to your chosen folder:
   1. Select the Upload toolbar button, and then use the resulting controls to find and select the correct file on your local computer.
   2. Once you have selected a file, select the Upload button that appears below the Create thumbnails option (not the Upload button above in the toolbar).
   3. Your newly uploaded file should appear in the folder file list.
5. Select your chosen or uploaded file to highlight it, then select the Insert File button from the toolbar.
6. You will now be returned to the first pop-up control panel, and you should see a filesystem path in the URL field.
7. If your image is conveying something important to your website users (i.e. the image is not purely decorative, meaning you could remove it and users would still get the same message from the page), then you need to enter a short description of the message conveyed by the image in the Alternative Text field.
8. If you want your image to float left or right of your existing text, then select the appropriate option for the Alignment field.  You may also need to add a little horizontal or vertical spacing by entering a small numeric value (usually 10 works) for the HSpace and / or VSpace fields.
9. When you are finished, select the OK button to place your image into the page.

When (and When Not) to Use a Table

Tables should only be used for the display of tabular data (data that is connected to one or more headings).

Do not use tables for any of the following reasons:

• Displaying a list of items (use an unordered or ordered list instead)
• Creating a multi-column page layout (use proper page layout tools instead)

If you are not sure about how to present a certain type of information, please check with your communications manager, your website developer, or even the Georgia Tech Drupal Mailing List for assistance.

How to Place and Configure a Table Using GT Editor or CKEditor

1. Place your cursor where you want the table to appear.
   • If you want the table on it's own line, create that blank line and place the cursor on it
   • If you want the table to float left or right of existing text, place your cursor at the beginning of that line of text
2. Select the Table button in the toolbar: 
3. In the pop-up control panel, fill in the fields as appropriate:
   • For Rows and Columns.  (You can adjust this again later if needed.)
   • Leave the Width field blank to allow for automatic sizing of the table, or enter 95% to force a full-width table with a little bit of right-hand spacing
   • Set Headers to something other than None.  All tables must have at least one row or column of headers (if not both) to be compliant with accessibility laws.
   • To float the table to the Left or Right of existing content, select the appropriate option under Alignment
   • Under Summary, enter a short summary of what the table represents and what message you expect your website visitors to get from the data in the table.  This is very important for people with vision disabilities who cannot directly view the table and thus cannot see the visual arrangement of the data.
   • Use the Caption field to give the table a visible title.  If the caption can properly summarize the intent of the table and its data, then you could use it alone and leave Summary blank, but at least one or the other should be used (and you can use both, if that works best for your needs).
4. Select the OK button and you should see your empty table generated within the content of your page.
5. Now, you can add content to each cell of the table by clicking on or tabbing to a cell.

How to Modify an Existing Table

You can modify the configuration of an existing table by right-clicking on the table and using the pop-up contextual menu.  Through this menu,  you can add columns, add rows, manipulate individual cells, and adjust the display and formatting settings for the table.

Available table contextual menu options:

• Paste
• Cell ->
• Row ->
• Column ->
• Delete Table
• Table Properties

This page covers the creation of different types of links using the standard CKEditor link tool.  If your website is using the GT Editor or otherwise has the Linkit module installed, then you will have some additional options as described on the Creating Links in GT Editor (Linkit).

Accessibility and Usability of Links

To comply with accessibility law, and good sense usability guidelines, always make the visible text of your link something that clearly indicates what the website visitor is going to be taken to when following that link.  Some examples of improper link text include:

• Click Here
• Here
• Read More
• More
• Follow This Link

Wording like these give the user no indication of what you are linking them to, and this is really bad for users with vision disabilities who utilize screen readers.  As a matter of speed and efficiency, these users often have the list of links on a page read aloud without their supporting context.  Hearing "Click Here" ten times makes it impossible for these users to know which link is which, and thus they will be unable to navigate through the links on your page.

While you can make an image into a link, it is best to only make text into links, or to link both an image and an equivalent piece of text together as a link so that you always have some plain text describing the destination of your link.  If you really only want to make an image into a link, then you must set the Alternative Text field of the image to a description of where the link is going to take the user.

Drupal 7

CKEditor in Drupal 7 has a variety of options available.  It is best to only use the ones described below:

Adding a Link

1. Highlight the text that you want to turn into a link.
2. Select the Link control button on the toolbar:
3. Select the type of link you want to add in the Link Type drop-down:
   • URL: Links to another page in the current site, or an external site:
     • Enter the URL into the URL field.  The Protocol field will automatically adjust itself.
     • Enter links to pages on the current website as relative URLs, which do not include the server name:  /undergraduate/minors
     • Enter links to pages on the a different website as fully qualified URLs, which include the server name:  http://mysite.gatech.edu/undergraduate/minors
   • Link to anchor in the text: If you have already placed anchors in the current page, this will let you select one of them and create a jump-link to that anchor point
   • E-mail: This will let you easily create a link that invokes the user's default email program to send an email to a designated email address:
     • Fill in the E-Mail Address, Message Subject, and Message Body fields as desired.  Only the E-Mail Address is required, and bear in mind that the user can easily change the subject and body text in his/her email client - what you provide here is just a suggestion to the user.
4. Select the Save button and your highlighted text should now be a link.

Please note that you cannot follow a link while in CKEditor.  You must either Preview your page or Save the page and return to View mode to be able to follow any of your links.

Removing a Link

1. Put your text cursor somewhere within the linked text.
2. Select the Unlink control button:
3. The link will now be gone, though the text will remain.

Drupal 10

If you are working with a Drupal 10 site, you will find that it's version of CKEditor has taken a minimalist approach, so the instructions are really simple:

Adding a Link

1. Highlight the text that you want to turn into a link.
2. Select the Link control button on the toolbar:
3. Enter the URL of your link into the URL field of the pop-up contol panel and select the Save button and your highlighted text should now be a link.

Please note that you cannot follow a link while in CKEditor.  You must either Preview your page or Save the page and return to View mode to be able to follow any of your links.

Removing a Link

1. Put your text cursor somewhere within the linked text.
2. Select the Unlink control button:
3. The link will now be gone, though the text will remain.

If your Georgia Tech Drupal website has the GT Editor feature package installed, then it also has the Linkit module, which gives you an enhanced interface for creating links to local content.

Accessibility and Usability of Links

To comply with accessibility law, and good sense usability guidelines, always make the visible text of your link something that clearly indicates what the website visitor is going to be taken to when following that link.  Some examples of improper link text include:

• Click Here
• Here
• Read More
• More
• Follow This Link

Wording like these give the user no indication of what you are linking them to, and this is really bad for users with vision disabilities who utilize screen readers.  As a matter of speed and efficiency, these users often have the list of links on a page read aloud without their supporting context.  Hearing "Click Here" ten times makes it impossible for these users to know which link is which, and thus they will be unable to navigate through the links on your page.

While you can make an image into a link, it is best to only make text into links, or to link both an image and an equivalent piece of text together as a link so that you always have some plain text describing the destination of your link.  If you really only want to make an image into a link, then you must set the Alternative Text field of the image to a description of where the link is going to take the user.

Creating Links to Pages Within Your Site

1. Highlight the text that you want to turn into a link.
2. Select the Link control button on the toolbar:
3. If your site has Linkit installed, then the pop-up panel should have two fields: Search for content and Link URL along with a Insert Link button.  If your pop-up panel doesn't have these fields and button, then you'll need to follow the instructions for Creating Links in CKEditor.
4. In the Search for content field, begin typing any word(s) from the title of the page you would like to link to.  As you type, a drop-down box should open up and show you any pages whose titles have the word(s) you have entered.  Simply select the page you want from the list.
5. As a confirmation, you should see a URL path appear in the Link URL field after you have selected a page.
6. Select the Insert Link button to create your link.

Creating Links to Pages on Other Sites

1. Highlight the text that you want to turn into a link.
2. Select the Link control button on the toolbar:
3. If your site has Linkit installed, then the pop-up panel should have two fields: Search for content and Link URL along with a Insert Link button.  If your pop-up panel doesn't have these fields and button, then you'll need to follow the instructions for Creating Links in CKEditor.
4. In the Link URL field, type in the fully qualified (starts with "http://" or "https://") URL for the page to which you want to link.
5. Select the Insert Link button to create your link.

Creating Links to Uploaded Files

Note: A "file" can be anything that can be reasonably opened in a web browser or which your site users would want to download to their own computer: a Word Document, a PDF file, an image file, etc.  For the greatest level of usability, consider turning any kind of office related document into a PDF, as PDFs can be opened on virtually any computer or mobile device without needing any additional software.

Note: These instructions require that your site be running the GT Editor feature package or otherwise have both the Linkit and IMCE modules installed.

1. Highlight the text that you want to turn into a link.
2. Select the Link control button on the toolbar:
3. If your site has Linkit installed, then the pop-up panel should have two fields: Search for content and Link URL along with a Insert Link button.  If your pop-up panel doesn't have these fields and button, then you'll need to follow the instructions for Creating Links in CKEditor.
4. Select the Open file browser button below the Search for content field.
   • If you do not have an Open file browser button, then your Drupal site does not have the IMCE module installed.  Stop and contact your site administrator or developer for further assistance.
5. In the next pop-up control panel that appears, navigate to the folder where you want to save your uploaded file, or a folder that already contains a file that you wish to use for your link.  To upload a new file to your chosen folder:
   1. select the Upload toolbar button, and then use the resulting controls to find and select the correct file on your local computer.
   2. Once you have selected a file, select the Upload button that appears below the Create thumbnails option (not the Upload button above in the toolbar). 
   3. Your newly uploaded file should now appear in the folder.
6. Select your chosen or uploaded file to highlight it, then select the Insert File button from the toolbar.
7. You will now be returned to the first pop-up control panel, and you should see a filesystem path in the Link URL field.
8. Select the Insert Link button to create your link.