CCS Drupal Guide
  • Introduction
  • Drupal Platform Introduction
  • Drupal User Roles & Responsibilities
  • Workbench Moderation
  • Drupal Websites: Getting Started
    • Drupal Text (WYSIWYG) Editor
    • Taxonomies
  • Managing Menus
    • Sidebar Menus
  • Best Practice Tips
  • UG Drupal Content Types
    • Banners
    • Book
    • Course Outlines
    • Events
    • FAQ
    • Featured Item
    • News
    • Page
    • People Profiles
    • Service
    • Social Media Account
      • Live Feeds
    • Webform
  • Accessible Content Guide
    • Accessibility Basics
      • Accessibility First Content Development
      • HALT: Accessibility with the Drupal Text Editor
      • Accessible Design Intro
    • Content Titles & Headings
    • Links
    • Colour
    • Documents
    • Images
    • Tables
    • Lists
    • Audio & Video
    • Other Accessible Content
  • Advanced Topics on Drupal Websites
    • Blocks
    • Collapsible Sections / Accordions
    • Categorizing and Displaying Profiles
    • Headings that Expand and Collapse
    • Tabs
    • Customizing Content Layout
    • Mini Panel
    • Google Maps
    • Google reCAPTCHA
    • Bootstrap: Typography
  • SiteImprove
  • Google Analytics
  • Style Guide Code Snippets
  • Home Page Layout Options
  • Home Page Layout Tutorials
  • Content Type View Panes
    • Course Outline Panes
    • Event Panes
    • FAQ Panes
    • Feature Panes
    • News Panes
    • Social Media/Feeds
    • Service Panes
    • People profiles
  • Customizing Site Search
  • Client FAQ
Powered by GitBook
On this page
  • Buttons on the Drupal Text (WYSIWYG) Editor
  • First Row
  • Second Row
  • Third Row
  • Inserting an Image
  • Create and Delete Sub-Directories
  • Inserting a Table
  • Creating and Removing Hyperlinked Text/Images

Was this helpful?

  1. Drupal Websites: Getting Started

Drupal Text (WYSIWYG) Editor

PreviousDrupal Websites: Getting StartedNextTaxonomies

Last updated 6 years ago

Was this helpful?

Drupal provides its users with a simple text editor that is universal amongst all content types. The Drupal Text Editor (A.K.A the WYSIWYG Editor) allows users to add custom content to the page through its collection of tools. WYSIWYG stands for "What You See Is What You Get."

Here is what the Drupal Text (WYSIWYG) Editor's operations look like:

Buttons on the Drupal Text (WYSIWYG) Editor

First Row

  • Cut (Scissors): Acts like a basic cut functionality in MS Word.

  • Paste (Papers): Acts like a basic paste functionality in MS Word.

  • Paste as Plain Text (Clipboard with T): Pastes entered content into the editor and removes ALL text styling.

  • Paste as "Plain Text" from Word (Clipboard with W): Pastes entered content into the editor and removes text styling but keeps formatting.

  • Remove Existing Text Formatting (Tx): Removes styling from selected text.

  • Undo & Redo (Arrows): Undo/Redo the most recent action done in the editor.

  • Insert Image (Image Icon): Allows the user to insert an image.

  • Insert Table (Table Icon): Allows the user to insert a table.

  • Insert Thematic Break (Horizontal Line): Produces a horizontal line in your content. Most commonly used for separating different sections within a page.

  • Insert Special Character (Omega Symbol): Allows the user to insert special characters and symbols into the page.

Second Row

  • Bold & Italics (B and I): Bold and Italicize selected text.

  • Subscript and Superscript: Subscript and superscript text.

  • Numbered List (Numbered List Icon): Create a numbered list or place selected items into a numbered list.

  • Unordered List (Unordered List Icon): Create an unordered list or place selected items into an unordered list.

  • Decrease Indent: Decrease an existing indent on selected text.

  • Increase Indent: Indent selected text.

  • Text Align (Left, Center, Right, Justify): Align selected text.

  • Create Hyperlink (Chain link icon): Allows the user to hyperlink selected text.

  • Remove Hyperlink (Chain link icon with x): Allows the user to remove a hyperlink from text.

  • Create Anchor (Flag): Allows the user to create a text anchor. More information about anchors below.

Third Row

  • Text Sizing Dropdown Menu: Allows the user to place the selected text into headings. This should not be used for font sizing and should only be used to mark correct headings as headings.

  • Image Styles Dropdown Menu: Allows images to be aligned left, centred, or aligned right.

  • Full Screen Text Editor: When selected, the Drupal Text Editor will expand and take up the entire screen. Select again to close.

  • Show Blocks (Vertical and Horizontal Lines): Allows the user to see the different code blocks within the Drupal Text Editor.

Inserting an Image

  1. Ensure that the location you are trying to add the image to is correct.

  2. In the respective Drupal Text (WYSIWYG) Editor, click on the image icon.

  3. On the new popup window, select Browse Server. If the image is already uploaded, then proceed to step 5.

  4. Uploaded the image to the website file system by selecting Upload from the menu bar. Upload the file and select the appropriate settings, then select Upload.

  5. Locate the image you would like to insert. Then, select Insert File on the menu bar.

  6. Once your image has been selected and the appropriate alternative text has been added, insert the image by selecting OK.

Create and Delete Sub-Directories

The users can create and delete sub-directories under the root/uploads directory only. Make sure that the uploads directory/sub-directory is selected/highlighted.

Inserting a Table

The WCAG 2.0 standard for table settings dictates that table markup must be properly structured to differentiate and properly link between header and data cells.

  1. Ensure that the location you are trying to add the table to is correct.

  2. In the respective Drupal Text (WYSIWYG) Editor, click on the table icon.

  3. In the new popup window, enter the number of columns (vertical), and rows (horizontal), in their respective input fields.

  4. Add a Caption if a title is not provided elsewhere. A caption will act as a title above a table.

  5. Adding a Summary is optional, but recommended if the table is complicated and the information is not provided elsewhere.

  6. Upon completing the above steps, select OK. Once selected, the table should be inserted into the text area of the editor. You may proceed to insert the information into the table.

/! Note: To modify an existing table, right-click on a cell in the table and additional options will be displayed.

Creating and Removing Hyperlinked Text/Images

The WCAG 2.0 standard for links dictates that the purpose of each link can be determined by the link text alone (AAA), or by the link text and its surrounding context (AA).

Example Do not use:

Use this format instead:

  1. Ensure that the location you are trying to add the hyperlinked text to is correct.

  2. In the respective Drupal Text (WYSIWYG) Editor, highlight the text in which you are trying to hyperlink.

  3. Once the text has been highlighted, select the hyperlink button on the Drupal Text Editor.

  4. On the popup window, Specify the link type by selecting one of the options in the dropdown menu:

    • Internal path: Any link that is under www.uoguelph.ca/yourSiteName

      • Ensure that the "link type" dropdown menu is set to internal path.

      • Search for the internal page by typing the first few characters of the page name in the "Link" field.

      • Select the page you want to link from the list of suggestions.

      • Once completed, select OK.

    • URL (External Path): Any link that is NOT under www.uoguelph.ca/yourSiteName

      • Ensure that the "link type" dropdown menu is set to URL.

      • Once completed, select OK.

        • Link to Anchor in Text: This option can be used to direct the user to a pre-existing anchor on the page.

      • Ensure that the "link type" dropdown menu is set to Link to Anchor in the Text.

      • Select the anchor you would like this text to link to by selecting the anchor name from the "By Element ID" dropdown menu.

      • Once completed, select OK.

        • Email: Hyperlink text to an email address that, upon selection, will prompt the user to email the specified address.

      • Ensure that the "link type" dropdown menu is set to E-mail.

      • Enter the email address you would like this text to hyperlink to.

      • If applicable, enter the email subject and message body into their respective fields.

      • Once completed, click OK.

Source: Allows the user to input raw HTML and CSS. Commonly used for adding content from the into your content.

Insert Block Quote (Quotation mark): Create a block quote or place selected information into a block quote. For more information on block quotes check out the .

Ensure that you give the image appropriate alternative text. For more information on appropriate altetnative text, please visit .

If your table requires table headers, select the appropriate markup using the "Headers" dropdown menu. For more information about table headers, please visit .

To search the internet click .

.

Paste the link where you would like this text to hyperlink to (Eg: ) in the "URL" field.

Style Guide
Official Bootstrap Style Guide
the WebAIM turotial on alternative text
the WebAIM tutorial on tables
here
Visit Google's homepage
https://www.google.ca
Drupal Text (WYSIWYG) Editor
image
image
image
upload
image
Insert Table Window
Hyperlink Button
image
External URL Hyperlink
Insert Email Image
Insert Anchor Image
Insert Table Button