I am a little bit of a newbie and am not a programmer, so I use Drupal out of the box. So for many this might be obvious, but not for me!
I am working on a project where I want to use filtered html for an Editor role, this Editor will also be the sole administrator of the site.
Editor must be able to input tables, insert images, I chose to use the "insert" module rather than letting the editor using IMCE to upload images, as I feel it would be less messy and easier to manage for him. But once he inserts the image into his body, he must be able to float it with the image edit button.
I was really struggling to achieve this because the HTML Filter stripps out all the style attributes that TinyMCE inserts to do things like align text and float etc...
I therefore searched and searched and I finally used a hybrid of two posts: one that is no longer online and
and made my own set of instructions, which I now have decided to post as a thank you to all this lovely community that really helps getting started!!
Download and enable:
* WYSIWYG Filter
* Better Formats
In input formats create 2 new input formats:
* WYSIWYG Public
* WYSIWYG Editor
Set WYSIWYG public as the default format that all roles may use
WYSIWYG editor may be used by editor
Select the following filters:
* HTML corrector
* URL filter
* WYSIWYG Filter
Then for each input format configure the allowed HTML tags (under configure)
Allowed HTML tags for public
a[!href|target<_blank> em,strong,i,b,ul,ol,li,dl,dt,dd,p,br,hr,span,address AND WHICHEVER YOU WANT TO ALLOW.
Style properties for public
Under Text properties, check: text-decoration
Allowed HTML tags for Editor
em, strong, strike, del, sub, sup, i, b, q, acronym, samp, kbd,
ul, ol, li, dl, dt, dd,
table[width|cellpadding|cellspacing|border], tr[align|valign], td[align|valign|width], tbody, th[align|valign|width], thead, tfoot, colgroup, col, caption,
address, blockquote, pre, cite, code,
h1, h2, h3, h4, h5, h6
(I have taken this from the blog mentioned above, but you can do whatever you want, it worked for me, so I'm not touching it!)
Style properties for Editor
Under Text properties, check:
Border properties (1):
Rearrange: Filter order and weight:
URL filter 0
WYSIWYG Filter 1
HTML corrector 10
Site configuration/Wysiwyg, choose TinyMCE 3.2.7 as editorand edit each role.
Basic Set up, check the following:
Enabled by default
Allow users to choose default
Show enable/disable rich text toggle link
Under the buttons and plugins:
for WYSIWYG public select:
for WYSIWYG editor select:
HTML block format
Block formats: for editor add/remove so that only tags are: h2,h3,h4,
CSS Editor: for all editors choose option "Editor default CSS".
Configure Better Formats
Under site configuration, input formats, choose the defaults tab.
For each role, select the appropriate default format:
anonymous: site default
authenticated: site default
editor: WYSIWYG editor
Then re-order in order of importance: editor, authenticated and anonymous.
Do the same for the comments and block defaults sections and save your settings.
So now, if you go and edit a page using the Editor filter, insert an image in the body and float it left, it should work!
The only problem I have now, is that since we are not using the "HTML filter" in the input formats filter selection, Bold is tagged as 'b' not 'strong' and Italic as 'i' not 'em'.... I am therefore trying to find information on how to circumvent that....