In this video we will be installing a wysiwyg editor so that we can include links, images, and other HTML code without having to actually know HTML.

Install Wysiwyg module

I'm going to be using the Wysiwyg module with the CKEditor. Because Wysiwyg has built-in integration for the CKEditor library, I won't download the CKEditor module from Drupal.org, just the Wysiwyg module.

  • drush dl wysiwyg
  • drush en wysiwyg

Now, I'll configure Wysiwyg, and download the CKEditor plugin.

  • Go to "Configuration => Content authoring => Wysiwyg profiles"
  • Click the "Download" link for CKEditor
  • Right click on the download link and choose "Copy link location"
  • In the terminal type "cd ../all/libraries"
  • Download the zip file "wget http://download.cksource.com/CKEditor/CKEditor/CKEditor%203.6.3/ckeditor_3.6.3.tar.gz"
  • Unzip it "tar -zxvf ckeditor_3.6.3.tar.gz"
  • Remove the zip file "rm ckeditor_3.6.3.tar.gz"

Now, when we refresh the profiles page, we can choose which input formats should use the CKEditor. "Filtered HTML" is the default format, so I'll choose the CKEditor for the "Filtered HTML" input format.

Now we need to click "Edit" to configure the editor.
I'm only going to configure what's in the "Buttons and Plugins" section. You can poke around to see your options if you'd like (such as whether or not the wysiwyg editor should be enabled by default), but I'm just going to enable a few features, and leave the rest at the default settings.

  • Buttons and Plugins (Anything that is checked will be available to the editor. Unchecked items will not be available.)
    • I'll just enable a few options: Bold, Italic, Underline, Link and Image.
    • Keep in mind that anything you allow here, must be allowed in the text format (in this case "Filtered HTML"). If you allow something there, but don't allow it in the text format, it will look correct while editing, but once you save, it will not look the same. I'll use Underline to demonstrate what I mean.

Now when we edit the newsletter, we are presented with a wysiwyg editor. I'll make the word "This" bold, "Awesome" italicized and "information" underlined. We can also add links by highlighting the text we would like linked, and then clicking on the link icon. Here, we can specify the details about a the link, then click "OK".

Now we've got some bold text, italic text, underlined text, links and an image. Let's see what happens when I save the newsletter.

Alright, it look like everything has worked except for the underline and the image. We can also see that the text has been brought to one line instead of keeping our paragraphs in place.

I'm going to edit the newsletter to see which tags we need to add.

Right below the wysiwyg text area, you'll see the "Disable rich-text" link. I'll click that to see the raw HTML that is creating our newsletter. This might look a little daunting your first time, but don't worry about it. All we're looking for is any text between the "<>" that is not listed below next to "Allowed HTML tags".

These are the tags we are using:

  • <p> (is not listed below)
  • <strong> (is listed below)
  • <em> (is listed below)
  • <u> (is not listed below)
  • <a> (is listed below)
  • <br> (is not listed below)
  • <img> (is not listed below)

So, from looking through our text we can see that we need to add the following tags to our "Allowed HTML tags" for the "Filtered HTML" text format: <p> <u> <br> <img>

Edit "Filtered HTML" text format

  • Go to "Configuration => Content authoring => Text formats => Filtered HTML"
  • Scroll down and click the vertical tab, "Limit allowed HTML tags"
  • Add the required tabs "<p> <u> <br> <img>"
  • (Save)

Edit the newsletter again to check configuration

Now, if we edit the newsletter again, we will see our new tags listed as available, and when we click "Save", our newsletter looks as intended. And if we send another test, all of our formatting is in place.