Rich Text (WYSIWYG) Editors

Rich Text (WYSIWYG) Editors root
Drupal Version

A "rich text" or "WYSIWYG" (What You See is What You Get) text editor gives your content editors a way to create and maintain content using an interface that looks and feels a lot like using a word processor.  Formatting is applied using button controls, so the content editor doesn't have to know anything about HTML and can immediately see what the content is going to look like after it has been saved.

Drupal 10

Drupal 10 comes with the CKEditor version 5 text editor built-in, though it is a minimal version, so site administrators may wish to install additional features through CKEditor plugins.

NOTE: CKEditor version 5 is a complete rewrite of the CKEditor application.  Older CKEditor 4 plugins are not compatible with CKEditor 5.  If you have any custom CKEditor 4 plugins, you will have to rewrite them to work with the CKEditor 5 API.

Drupal 7

Drupal 7 does not come with any kind of rich text editor.  There are two popular add-on options commonly used on campus:

  • CKEditor Drupal module and CKEditor library:  This popular editor is easy to set up and gives you a wide range of flexibility in what your content editors can create.
  • Georgia Tech GT Editor module:  This module is actually built around CKEditor, but provides a great deal more control over what content editors can create, preventing them from doing things that might be dangerous (embedding JavaScript, for example.)

Rich Text Editor Guides and Resources

CKEditor Companion Modules

CKEditor Companion Modules esembrat3
Drupal Version

The Drupal community on campus has found a number of modules which help with using CKEditor:

IMCE

Versions: Drupal 10, 7

​IMCE can be used for managing images, and you might even use imce for files, as well.

Installation instructions for IMCE:

  1. Download, install, and configure IMCE.
  2. Remove the default Image button.
  3. Add the IMCE button.
  4. Enable the option "Plugin for inserting files from imce without image dialog".
  5. Enable the option "Plugin for inserting Drupal embeded media".

LinkIt

Versions: Drupal 10, 7

LinkIt can be used for managing URL links to pages on the site and outside of the site.

Installation instructions for LinkIt:

  1. Download, install, and configure LinkIt
  2. Remove the default URL button.
  3. Add the LinkIt button.
  4. Check "Support for Linkit module".

Image Resize Filter

Versions: Drupal 10, 7

From the Drupal.org site:  Image Resize Filter makes it easy to resize images, especially when combined with a WYSIWYG editor such as tinyMCE, CKeditor etc. Users never have to worry about scaling image sizes again, just insert an image and set it's height and width properties in HTML (this is done automatically by WYSIWYG editors) and the image is resized on output to match the HTML.

Embedding Digital Videos in CKEditor / GT Editor

Embedding Digital Videos in CKEditor / GT Editor afrank30
Drupal Version

Embedding Georgia Tech MediaSpace Repository Content

A good solution for the Georgia Tech MediaSpace (Kaltura) repository has not been developed yet.  In the meantime, an experimental MediaSpace embed module is available for Drupal 7 and Drupal 10 from the developer who created the embed module for the now retired OIT Digital Media Repository.  Use at your own risk!

After installing either module, you will have to add the new input filter to your preferred text formats.  Make sure to set the ordering so that the filter comes last after all other filters.  This ensures that the filter's Javascript code does not get filtered out by any of your other text filters.

There is also a method now for enabling MediaSpace as an oEmbed provider in the Drupal Media library system.  The Media Library works outside of CKEditor and would be used in conjunction with custom blocks that contain Media fields (typically used with Layout Builder based page.)

Embedding YouTube and Vimeo Videos

Option #1 - Video Embed Field (Drupal 7 or 10)

  1. Download, install, and enable the Video Embed Field module.
  2. Add the new video field type to one or more of your Drupal Content Types.
  3. Content editors can now add videos to nodes of those content types by inserting the right linking details into the video field.
  4. WebWash provides a tutorial about video styles you can create with the Video Embed Field module.

Option #2 - Video Filter (Drupal 7)

  1. Download, install, and enable the Video Filter module.
  2. In the administrative configuration area of Drupal under Content authoring -> Text formats, configure each text format that you want to be able to use embedded videos.
    1. Enable the video filter.
    2. In the Filter processing order section, move the video filter down to the bottom of the list so that it is applied after all other filters.
    3. Don't forget to save your changes.
  3. On pages that use one of these configured text formats, you can now insert a video shortcode to create an embed of a supported video type.  See the download page at the link above for the full list of supported video services and formats.
  4. Example shortcode for embedding a video:

[ VIDEO::http://www.youtube.com/watch?v=98nNpzE6gIs::aVideoStyle ]

Option #3 - Ivan Allen College oEmbed Support Module (Drupal 10)

  1. Install the IAC Support for oEmbed Formats for Drupal 10 module
  2. Add the new "Embed remote content with oEmbed links" input filter to your preferred text formats
  3. Where you want to place a YouTube video, just paste in the video's oEmbed URL (see the oEmbed module's instructions for full details)

Option #4 - Drupal Media Library and oEmbed

You can use the standard instructions for adding an oEmbed provider to Drupal's Media Library to enable the use of YouTube, Vimeo, and some other video services.  In most cases YouTube will be enabled out-of-the-box.  The Media Library works outside of CKEditor and would be used in conjunction with custom blocks that contain Media fields (typically used with Layout Builder based page.)

Embedding HTML, JavaScript or PHP Code on a Page

Embedding HTML, JavaScript or PHP Code on a Page
Category
afrank30
Drupal Version

The Easy Way for IFRAME and JavaScript Embeds

The "Full HTML" format in an out-of-the-box installation of Drupal 10, or in Drupal 7 with CKEditor installed without the WYSIWYG plugin should already allow for IFRAME embeds and JavaScript embeds.  If you haven't added any tools to restrict this, then you're all set.

For more restrictive CKEditor configurations, such as the GT Editor version of CKEditor for Drupal 7, you'll need to add a new text format (Configuration -> Content authoring -> Text formats and editors) that at a minimum allows IFRAME embeds.  If the service you want to embed from also requires you to include a snippet of JavaScript, then you'll need to enable that for your new text format as well.  You'll then want to restrict this format to site administrators (which should hopefully be a separate role from that of your site's day-to-date content creators and editors).  You can then add blocks where needed and use this new text format so that you can add your embed code to the block.

The Preferred Way for PHP Code

By far, the recommended way of adding custom PHP Code to a page of a Drupal site is by creating a custom module, which is a type of plugin that adds extra functionality to your Drupal site.  This does require a reasonable amount of PHP coding experience and time to get familiar with how to code for Drupal.  The Drupal organization has made some tutorials available to help get you started:

For a lot of cases, the right approach is to create a module that implements its own dynamic block(s).  These will act like a custom block that you create in the Block Layout interface, only the content will be generated by your module instead of being entered through the Drupal user interface.  Thus, you could implement a block that has your external embed code or custom PHP code output as its content, then place that block on whichever page you want the output to show.

The Absolutely Wrong Way for PHP Code

Do not try to use the PHP Code Filter module under any circumstances! This module used to let you put PHP Code directly into CKEditor and have it get processed when the page is displayed. It is very unsafe and can't even be turned on in Drupal 7 unless you upgraded to Drupal 7 from an earlier version that had it turned on. In addition, the module has been completely removed from Drupal 8. If you are already using this method for custom PHP, you should look into switching to one of the following methods as soon as possible.

GT Editor Site Administrator Documentation [Drupal 7]

GT Editor Site Administrator Documentation [Drupal 7] root
Drupal Version
Tags

The Georgia Tech GT Editor module for Drupal 7 is built around CKEditor, but provides a great deal more control over what content editors can create, preventing them from doing things that might be dangerous (embedding JavaScript, for example.)

This is a community supported project, meaning it is not officially supported by OIT or Institute Communications.


GT Editor Guides and Tutorials

Unhiding the CKEditor Text Format Selector [Drupal 7]

Unhiding the CKEditor Text Format Selector [Drupal 7] afrank30
Drupal Version

CKEditor normally shows a Text format drop-down selector just below the editing window, but the GT Editor hides this selector to streamline the editing experience.  However, there can be cases where you want to use other Drupal text formats for special cases (e.g. embedding a Twitter or Facebook feed).

The GT Subtheme has CSS code that hides the drop-down, which you can find at sites/all/themes/gt_subtheme/css/gt_subtheme.css.  The lines that hide the text format dropdown box are:


        div.form-item-log,
	.preview h3,
	.preview .node-teaser,
	body.page-admin-structure-block-add .form-item-regions-seven,
	body.page-admin-structure-block-manage-block .form-item-regions-seven,
	fieldset#edit-body-und-0-format,
	fieldset#edit-field-body-1-und-0-format,
	fieldset#edit-field-body-2-und-0-format,
	fieldset#edit-field-body-3-und-0-format
	{
	   display: none;
	}

Changing the Default Format Without Displaying the Text Format Selector

If you have created your own text format and want your editors to use it instead of the "basic text editor" format, you should change the order of the text formats so that yours is first/on top at admin/config/content/formats.