WYSIWYG Tips And Tricks

Gregory Heller Profile Photo
Gregory Heller

on

February 4, 2010

WYSIWYG Tips And Tricks

in | 

WYSIWYG (what you see is what you get) editors can be tricky to configure properly, and most clients have to have them, for good reason too, who wants to hand code html?  In this short post I'll explain a few tips and tricks to get your WYSIWYG configuration dialed in.

For starters you will want the following modules installed

  • WYSIWYG API & your editor of choice (like TinyMCE or CK Editor)
  • WYSIWYG Filter allows you more flexibility that HTML filter for allowing and dissalowing html and style tags. This was the missing component for me, and one who's absense prevented indenting, outdenting and image alignment from working properly.
  • Better Formats (optional) allows you to set default input formats for different content types and different roles.  This is critical if you have many different levels of users and want the default input format to be different for each role (eg authenticated users have filtered html, staff have full html by default)
  • IMCE & IMCE WYSIWYG Editor Bridge (optional) if you want inline image insertion with the ability to resize images, this pair of modules is essential.

The configuration for each module mentioned above is pretty straight forward, but a few things that could hang you up the first time are:

The syntax for allowing html and style tags in WYSIWYG filter is different than in HTML Filter, and i found it confusing.  Here is what I allowed:

a[!href|target<_blank|title],
div[align<center?justify?left?right], p[align<center?justify?left?right], img[src|id|width|height|align|hspace|vspace], br,span,em,strong,cite,code,blockquote,ul,ol,li,dl,dt,dd,h2,h3,h4,h5,h6,u,p, @[class|style]

The important thing to note is that each line must end with a comma! The only line I had to add was the one for images, and a few allowed html tags in the line that follows it.

The order of your filters is also important. I set mine to: URL Filter, WYSIWYG Filter, Line break converter, HTML corrector.

Better Formats is one of those modules that is tricky to configure only because you are not going to find a link to configure Better Formats, you need to go to http://www.example.com/admin/settings/filters/defaults, or click on the "Defaults" tab under input filters configuration (as shown in the screen shot below).

IMCE and IMCE WYSIWYG Bridge can be a little tricky too. After installing and enabling the modules, you must go to the configuration for IMCE and create a profile and grant access to that profile to one or more user roles.  THEN you can go to administer the WYSIWYG editor, select the buttons for the editor including the Image button AND the IMCE plugin (Image is a button, IMCE is a plugin that adds functionality to the Image button). See the screenshot below:

So there you have it.  That is my new "best practice" for setting up WYSIWYG in Drupal.

Share it!

Medyum Hoca (not verified) April 29, 2010

thanks for your advice but IMHO this is the achilies heal of D6 - So many routes / options / configs, etc and no leadership.  Wating for D7 is simply not an option for some who may go to joomla, and others. 

sonic (not verified) February 14, 2010

thanks for your advice but IMHO this is the achilies heal of D6 - So many routes / options / configs, etc and no leadership.  Wating for D7 is simply not an option for some who may go to joomla, and others. 

Chris Rowe (not verified) February 8, 2010

Thanks for the tip. I ran into a problem where the TinyMCE Editor CSS was set to "Use theme CSS" and was messing everything up. None of the formatting was visible as you typed. I know I played with this setting at one point and don't remember the original setting, but changing it to "Editor default CSS" fixed the problem. Just thought I would pass that along since it stumped me for a while.

Also, I was wondering what settings you have for the TinyMCE 'Cleanup and Output" options. Several are checked for me by default, but it seems like you would want to let the filters do everything.

Rosamunda (not verified) February 4, 2010

Hi there :)

Two questions:

1. Wich module have you decided to use here at civicactions?

2. I´ve set some rules like you´ve just said, but some won´t appear, how do you add something like:

span style="background-color:#ffff00;"

span style="color:#f00;

This won´t work adding just SPAN.

I´ve tried with -span,-code,-pre,address,-h1,-h2,-h3,-h4,-h5,-h6,hr[family|background|size|color], with no luck. Any ideas?

Cheers!

Rosamunda

Gregory Heller February 8, 2010

In my original post above I indicate which modules I am using. At CivicActions we determine the best modules to meet the client's requirements. Basically, it depends on the project.  In many recent projects we have been using the IMCE approach outlined above, while in others where inline image placement is not a requirement we have used FileField and Imagecache.  For WYSIWYG we have generally been using WYSIWYG API and TinyMCE, thought recently some here have been evaluating the new CK Editor.

 

As for your second question, be sure that you checked the boxes for the style properties that you want to be able to change (see the style properties collapsed field set in the WYSIWYG filter configuration screen.)  And you probably need to add "@[class|style]" to the allowed HTML elements and attributes.

Rick Vugteveen February 4, 2010

Thanks for sharing. I've seen too many people tripped up by WYSIWYG configuration.

Even with the best-practice advice given here there is still a lot to be desired in the file handling and media category. If you haven't done so already, take a look at the Media module for Drupal 7 (Drupal Gardens allows for an easy test-drive). Media uses the new file API to finally unify file and image handling in a way that will let users insert images without the dreaded WYSIWYG -> Insert Image -> IMCE -> Insert Image -> WYSIWYG chasm of confusion. Like others here, I also recommend Insert. FileField Sources and Image Resize Filter are also good additions to any WYSIWYG setup. I'm glad to see all of this finally coming together but the end recipe still involves too many modules and fiddly settings. Seems like a prime set of configuration for an installation profile (feature module?) to capture.

Gregory Heller February 8, 2010

I'm not sure that you could accomplish this, currently, with a feature because I don't think most of these modules have "exportable" settings.  Though it would be nice if they did.

I had not seen FileField Sources module, are you using it in production? It has been a dev release for many months which concerns me a bit.

guaka February 4, 2010

I started using the insert module recently, it might have fewer options than IMCE but it also seems much easier for normal users to grasp what's going on.

Gregory Heller February 4, 2010

On this particular project we looked at the Insert module, however there were a few problems we had with it. Some of them outlined in this issue. A bit part of the problem for us was usability, the content types for this project have many text fields, and other types of fields, adding the image fields into the mix created a very confusing user interface and in the browsers tested, clicking the insert button didn't result in a refocus of the browser on the text area where the image was inserted leading users to insert the image multiple times.  Between that and not being able to easily adjust the styles (alignment, hspace, etc..) for the image.  It just wasn't "there" for us for this particular application.  It does look promising, and I hope to have occasion to use Insert in the future.

DjebbZ (not verified) February 4, 2010

I must agree with you. Insert is a lot simpler, and with the support of imagecache module, it has enough options for most use cases.