WYSIWYG Tips And Tricks
on
WYSIWYG Tips And Tricks
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.
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.
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.
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
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.
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.
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.















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.