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.
Recent Comments