Float Image with Filtered HTML, WYSIWYG and TinyMCE

Even our office manager uses Drupal! Alessandra explains how to configure WYSIWYG properly to allow image floating in this quick HOWTO.

Photo of Alessandra Sturani
Thu, 2010-11-25 14:21By kuki

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 

http://drupal.org/node/454408

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

* 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

@[style],

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

@[class|style|title],

a[href|target|title],

img[src|width|height|alt|title],

em, strong, strike, del, sub, sup, i, b, q, acronym, samp, kbd,

ul, ol, li, dl, dt, dd,

p[align

 

div[align

 

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:

text-align

text-decoration

text-indent

Box Properties:

margin

margin-top

margin-right

margin-bottom

margin-left

padding

padding-top

padding-right

padding-bottom

padding-left

Border properties (1):

border

border-top

border-right

border-bottom

border-left

border-width

border-top-width

border-right-width

border-bottom-width

border-left-width

Table properties:

border-collapse

border-spacing

caption-side

empty-cells

table-layout

Layout properties:

Float

Rearrange: Filter order and weight:

URL filter 0

WYSIWYG Filter 1

HTML corrector 10

Configure WYSIWYG

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:

bold

italic

underline

bullet list

numbered list

link

for WYSIWYG editor select:

bold

italic

underline

align left

align center

align right

justify

bullet list

numbered list

outdent

indent

link

unlink

image

HTML block format

paste text

table

Under CSS

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