Configure HTML Input filter for WYSIWYG with style attributes

Your setup seems very straightforward, but unfortunately it is not working for me. Here is my configuration:

I have WYSIWYG setup with TinyMCE, and I'm using IMCE for image handling. When inserting images, TinyMCE likes to use the "style = float" element, which is of course filtered out by the "Filtered HTML" input format.

Note: The default "Filtered HTML" input format is what I applied my WYSIWYG/WYSIWYG Filter to.

Following your instructions, I added the following to my "HTML elements and attributes" of WYSIWYG Filter:

@[class|style|title],
img[src|width|height|alt|title]

Then I checked off "float" under Allowed style properties.

The result is that the image appears, but as long as I'm using the Filtered HTML input format, the "style" tags are always stripped.

Ugh, I'm having this problem too. This is a dealbreaker for the client. What are the alternatives to this? This was suggested as a good fix but TinyMCE module is deprecated and I'm using WYSIWYG module instead.
http://drupal.org/node/126216#comment-803606

Maybe I missed it, but what files are you editing for this configuration?

Just need to keep track of this thread....

I want to subscribe to this, but besides that I want to say that I have a similar problem.
How do you manage span classes?
I´m using CKeditor module (I don´t need the extra stuff of the wysiwyg module here), and I´m adding a button that allows people to set texts in different colors.
It won´t do.
I´ve got this stuff inside my "HTML elements and attributes" box:

a[!href|target<_blank|title],
div[align<center?justify?left?right],
span[style|font-family|background-color|font-size|color],
-span,-code,-pre,address,-h1,-h2,-h3,-h4,-h5,-h6,hr[family|background|size|color],
-font[face|size|color]
p[align<center?justify?left?right],
br,span,em,strong,cite,code,blockquote,ul,ol,li,dl,dt,dd

If I put just "span" it won´t do. So, I´ve checked the html output of ckeditor and it looks like this:

<p>
	<span style="color: rgb(255, 0, 0);">this text is red</span></p>

That´s why I´ve added all those [family|background|size|color] tags.

But it won´t do...

subscribed

I'm struggling the span tag with style attribute. I'm using wysiwyg with fckeditor.
The fckeditor output span is like #5
I added

span[style|font-family|background-color|font-size|color],

but text color still not take effect.

update:
I figured it out. The original drupal html filter should be disable in the input filter no matter rearrange wysiwyg filter on top of html filter, html filter still filter style attribute finally.

This step doesn't mention in the module readme.txt and module maintainer should update the readme file.

Beside, what is the meaning of putting a hyhen before a tag in #5 ? And
How to allow table width ?
I added following in the html elements and attributes

table[width|cellpadding|cellspacing|border|style],
tr[align|valign|rowspan],
td[align|valign|width|colspan],
th[align|valign|width],tbody,thead,tfoot,

However configured table width, say 80% in editor, the style still filtered out.

This is the table tags in editor

<table cellspacing="0" cellpadding="0" border="0" align="center" style="width: 80%;" class="mceItemTable">

Update2:
img alignment not work too. Tinymce use style float to control the image alignment
I added
img[src|width|height|alt|title|align|style],
NOT WORK.

subscribed

subscribe

WYSIWYG filter is stripping "style" from table.
Adding this doesn't work.
table[width|cellpadding|cellspacing|border|style]
I want this not to be stripped:
<table style="border: 1px solid rgb(255, 255, 255);">

Please, open a separate support request so we can deal with them in their own context.

PS: You should also enable the individual style properties that you plan to allow.

Most of those issues seems to be related to this one:
http://drupal.org/node/760720

subscribed

I dont understand the syntax here, or where it is put...

in my
admin/settings/filters/4/configure

I can put in stuff like:

<a> <em> <strong> <span> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <h3> <h4> <h5> <img> <p> <br>

for the allowed html tags.

the settins people are putting here dont have the gt or lt, and have commas. I'm a bit confused.

@YesCT: The configure form of the WYSIWYG Filter has a lot of information about the syntax. Here's a screenshot:

http://drupal.org/files/issues/wysiwyg_filter_settings.png

ah. duh. have to get the module enabled!

If the strong and em filters aren't setup properly, then TinyMCE will use b instead of strong and i instead of em.

Here's the modification of the poster's code to get em and strong working.

@[style],
a[!href|target<_blank|title],
em/i, strong/b, strike, sub, sup,
ul, ol, li, dl, dt, dd, 
p[align<center?justify?left?right], br, hr, 
div[align<center?justify?left?right], span, 
address, blockquote, pre, cite, code, 
h3, h4, h5, h6

Thanks,
Eric

@espector
Just a parenthesis to say that em and strong are, most of the time, not used properly.

em: Renders as emphasized text
strong: Renders as strong emphasized text

According to W3C:
http://www.w3.org/TR/html401/struct/text.html#h-9.2.1
[...] The presentation of phrase elements depends on the user agent. Generally, visual user agents present EM text in italics and STRONG text in bold font. [...]
Generally = not always

That's mean that the browser can display em and strong as it want. You can not expect the browser to render em as italic and strong as bold.

If you want italic or bold text, you have to use the following tags:
i: Renders as italic text
b: Renders as bold text

For example, if you want to see a text in both bold and italic:

<strong><em>STRONG EMPHASIZED + EMPHASIZED = Doesn't makes sense</em></strong>
<b><i>BOLD + ITALIC = Makes sense</i></b>

I'm not using TinyMCE but according to your post, I think that it's normal behaviour is good.

I'm having a problem when I add an image using ckeditor (with IMCE) my image gets completely filtered out. I've already turned off the HTML filter everywhere and configured the img element with the following:

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

I'm a bit at a loss for this. Any other ideas?

@jnettik Is your image still there when you go back to Edition mode?
If not, your problem is not related to the WYSIWYG filter. It's probably a Bug with CKEditor.
If yes, have a look at the Input configuration (not the WYSIWYG filter configuration) to see if you have any other filter enabled:
1. Administer > Site configuration > Input formats
2. Click "Configure" for the input format that you use
3. Uncheck other filter than "WYSIWYG Filter" under the section Filter and tell me if you still have the Bug.

I am also having the same issue as in #19. I have no other filters enabled on the input filter. When editing the post the image is displayed in is definitely there. Did you ever resolve this?

Thanks.

I had a similar bug recently because of an update (I'm not sure which module was in cause). Some old images has a path that start with "/system/...". I simply switch to Source view and edit the path of those images manually.

Do you also have the bug with new inserted images?

WYSIWYG filter is definitly stripping "style" from table.
Adding this doesn't work.
table[width|cellpadding|cellspacing|border|style]
I want this not to be stripped:

All other attributes are available... f.ex. align etc.

@[style],
a[!href|target<_blank|title],
div[align<center?justify?left?right],
p[align<center?justify?left?right],
br,span,em,strong,cite,code,blockquote,ul,ol,li,dl,dt,dd,
table[border=0|cellspacing|cellpadding|width|frame|align|style],
tr[rowspan|width|height|align|valign|bgcolor|background|bordercolor],tbody,thead,tfoot,
td[colspan|rowspan|width|height|align|valign|bgcolor|background|bordercolor|scope],
th[colspan|rowspan|width|height|align|valign|scope]

What can I do to not lose the style tag with the width?

@ayalon I don't have any problem with attributes. I don't know if it's a bug or something else. For anything relating to style, adding @[style] should be enough to allow the attribute style on every elements. But, you also have to go to the section Style properties and check every styles you want to allow.

Maybe your width and border are set within the style attribute instead of being set as attributes. Ensure you have checked everything in Border properties 1 and 2, as well as width and height in Dimension properties.

Administer > Site configuration > Input formats
    Click configure for the default input format (and maybe the other one as well, I don't know how you setup your editor)
        Note: Be sure to have only the WYSIWYG Filter in the section Filters, just to be sure that your bug is not related to an other filter.
        Click on the configure tab, open "Style properties" section.

If this is not enough to solve your problem, can you post the HTML code you try to submit in your editor, and the HTML code after been filtered (in firefox, select the related text, right click it and choose View Selection Source)

ckeditor set width & height atributes in single style atribute.
i installed "WYSIWYG Filter" with adding code

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

but style attribute is still cut. tt

@Luciuz
The WYSIWYG Filter has a special section to set which Style attributes you want to allow. Style doesn't work like the other attributes.

subscribe to bookmark

Here is my setup,

@[style|class],
a[!href|target<_blank|title|rel],
div[align<center?justify?left?right],
p[align<center?justify?left?right],
br,span,em,strong,cite,code,blockquote,ul,ol,li,dl,dt,dd,,h1,h2,h3,h4,h5,h6
table[border=0|cellspacing|cellpadding|width|frame|align|style],
tr[rowspan|width|height|align|valign|bgcolor|background|bordercolor],tbody,thead,tfoot,
td[colspan|rowspan|width|height|align|valign|bgcolor|background|bordercolor|scope],
th[colspan|rowspan|width|height|align|valign|scope],
img[src|width|height|alt|style|title]

The class attribute always strip off. Any clue ?

According to # 20 I have to disable any other filter including drupal's HTML filter. I never understood that until now. Thanks

Can someone please help me include fckeditor's alignment: [ 'rteleft', 'rtecenter', 'rteright', 'rtejustify' ] into the HTML elements and attributes?

In case someone had the difficulty I had understanding this, style classes with names are white listed inside the Advanced rules box.

hello
i was getting crazy and after hours i found that if you go to admin/by-module and there find

Filter

Handles the filtering of content in preparation for display.

* Configure permissions
* Input formats
* Get help

and go to imput formats.
in:
Filtered HTML All roles may use default format configure
go to configure.

since you have the "WYSIWYG Filter", remove the "HTML filter".

I was able to configure the WYSIWYG Filter as I need it with one exception: I must allow iframes. Is there a way around it? maybe another module? please help!

@esbon, go to modules and make a search.
i saw something about iframes but i dont remember if it was for node creation.
maybe in panels.

Here's my configuration, which works! (for me)

• Install the WYSIWYG Filters module.
• Go to Admin>Site Configuration>Input Formats and for the Filtered HTML item click configure
• In the Edit tab>Filters fieldgroup, untick HTML Filter and tick WYSIWYG Filter
• In the Rearrange tab make sure WYSIWYG Filter is before HTML Corrector
• In the Configure tab>WYSIWYG Filter fieldgroup paste this in:
  

  @[class|style|title],
  a[target<_blank|title],
  em/i, strong/b, strike, sub, sup,
  img[width|height|alt|title|src],
  p[align<center?justify?left?right],
  div[align<center?justify?left?right],
  br,address, blockquote, pre, cite, code, 
  h1,h2,h3,h4,h5,h6,
  ul,ol,li,dl,dt,dd,
  table[width|cellpadding|cellspacing|border],
  tr[align|valign|rowspan],
  td[align|valign|width|colspan],
  th[align|valign|width],tbody,thead,tfoot

• Below that, in the Style Properties fieldgroup, tick all the styles that you want to allow.
• Below that, in the Advanced Rules fieldgroup, type in the classes that you want to allow (if any).

That should do it.

@chichilatte,

I'm now using this module as it does provide extra flexibility when editing content. Was getting quite frustrated with the built in html filter stripping out stuff like 'float' and 'margin' for inline images.

This was a very good solution. Thanks.

Can I just add, this is my setup:

@[class|style|title],
a[href|target<_blank|title],
em/i, strong/b, strike, sub, sup,
img[style|width|height|alt|title|src],
p[align<center?justify?left?right],
div[align<center?justify?left?right],
br,address, blockquote, pre, cite, code,
h1,h2,h3,h4,h5,h6,
ul[class],ol,li,dl,dt,dd,
table[width|cellpadding|cellspacing|border],
tr[align|valign|rowspan],
td[align|valign|width|colspan],
th[align|valign|width],tbody,thead,tfoot

Just spent awhile working this out. In order to float images successfully in filtered html you need to have the style attribute in the img element (see above code), and also to tick the box that says 'float' in the 'Layout properties' area in the wysiwyg tab.

EDIT** remember to put in 'href' into 'a' if you want your inline links (using linkit module) to work. Code above is modified and current.

Thanks samwillc, this is exactly what I wanted. Also I would like to add for other n00bs like me, that to have this working remember to disable "Limit allowed HTML tags" in the settings.

And to add the actual class names that you are going to use into the class box (comma separated list). Otherwsie, they will get stripped out too.

After lots of testing, i made a few amendments and this is my production-ready filter list...

@[class|style|title],
a[href|target<_blank|title|rel|name],
em/i, strong/b, strike, sub, sup,
img[width|height|alt|title|src],
p[align<center?justify?left?right],
div[align<center?justify?left?right],
br,address, hr, blockquote, pre, cite, code, span,
h1,h2,h3,h4,h5,h6,
ul,ol,li,dl,dt,dd,
table[width|cellpadding|cellspacing|border|summary],
colgroup,col,
tr[align|valign|rowspan],
td[align|valign|width|colspan],
th[align|valign|width],tbody,thead,tfoot

The problem I am facing is that I am unable to center align tables in the wysiwyg. By the way I am using TinyMCE. When tables are created with the align option set to "center", or even "right", the HTML is stripped immediately (i.e. without even saving the node).

I followed every step in #35 yet it doesn't appear to solve my problem. Even #40 doesn't do anything.

Finally I tried to set the desired Style properties (all) and the following message appeared. Being unfamiliar with the configuration I didn't make further changes. Can anyone advise me how to resolve this issue?

Hi,

Don't you need to add the align property to table?

table[align|width|cellpadding|cellspacing|border]

Sam.

This helped. At least now align="center" appears. Unfortunately, table still appears left aligned.

Maybe adding this too:

table[align<center?left?right|width|cellpadding|cellspacing|border]

Sam.

Tried this but it doesn't make a difference. I removed the styles as well since they required further configuration (see post #41) but nothing happened.

Check that element with something like Firebug. That should tell you which styles are being applied to the element. Prolly, it's a bit of css, with higher prio than html attribs.

If you can see in your source code that table align right IS being set on the table and not stripped out, then #46 is probably correct.

Could you copy/paste a section of the source code here that includes the table?

Sam.

This is the code. I am using the Zen subtheme.

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><h2>Heading</h2><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><table style="width: 80%;" align="center" border="0"><tbody><tr><td><strong>Table Heading 1</strong></td><td>123456</td><td>123456</td><td>123456</td><td>123456</td><td>123456</td><td>123456</td></tr><tr><td><strong>Table Heading 2</strong></td><td>234567</td><td>234567</td><td>234567</td><td>234567</td><td>234567</td><td>234567</td></tr><tr><td><strong>Table Heading 3</strong></td><td>345678</td><td>345678</td><td>345678</td><td>345678</td><td>345678</td><td>345678</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr></tbody></table>

Maybe you could do it with css?


table.CLASSNAME {
margin-left:auto;
margin-right:auto;
}


The table css worked for me. Is it safe to assume WYSIWYG filter can be disabled on my site if I'll be relying on CSS?

Hi sarhansg,

The filter is used for all kinds of things that can't be replaced with css. You'll need it if you're allowing other users to enter in stuff in filtered html text areas, for putting classes on lists that you make in filtered html, that kind of thing.

CSS is only for layout, the filter takes out potentially harmful html stuff from text areas. I'd keep in on if I were you and configure it correctly.

I just had a thought, have you disabled 'Limit allowed HTML tags' in /admin/config/content/formats/filtered_html. This needs to be *unchecked* as WYSIWYG filter replaces this feature.

Sam.

samwillc thank you for the explanation. It helps a great deal.

On my site I cannot access the link you provided (/admin/config/content/formats/filtered_html - page not found). I'm using Drupal 6. I followed the instructions in #35. However, in my case instead of using Filtered HTML I've used Full HTML. Does this make a difference?

I tried using Filtered HTML but even with the checkbox for WYSIWYG Filter selected (admin/settings/filters/1) neither the additional configuration options appear in the Configure tab (admin/settings/filters/1/configure) nor does the WYSIWYG filter appear in the Rearrange tab (admin/settings/filters/2/order).

Hi sarhansg,

Sorry but I have never used Drupal 6, only started myself about 9 months ago and straight onto v7 so I can't help you with that.

Full html should only be allowed for trusted users, i.e. yourself. I don't actually use it myself at all, filtered html deals with everything on my site.

Sam.

Hi samvillc,

I use Full HTML because there's only one user on the site. However, in my case even when I set Filtered HTML as the default the required configuration settings outlined in my earlier post do not appear.

Hi sarhansg,

As I mentioned, I have never used D6 and have no idea about what the interface looked like. Got a screenshot of what does appear when you set it as default?

Maybe one of the other folk on D6 will be able to shed some light on the matter.

Sam.

Hi samwillc,

Attached are screenshots of the various configuration pages (i.e. Edit, Configure, Rearrange). By the way I am using the following:

- Drupal 6.22
- TinyMCE
- Wysiwyg 6.x-1.5
- Zen theme 6.x-2.1

Do let me know if you require any further information.

Sarhan.sg
Wishing all of you a VERY HAPPY NEW YEAR!

Thanks, and what about when you click on Input formats > Filtered HTML

What do get then in Configure tab?

Does it not give you a checkbox to check for WYSIWYG filter, and then you can save configuration. That would then open up more options. Well that's what I would expect anyway.

Sam.

Attached are the screenshots for the Filtered HTML.

Again no difference after enabling it.

The only possible solution to this issue appears to be #49. Was hoping there would be a way to resolve this within wysiwyg itself. Not all users are savvy enough to know how to add a class to a table. To us it might just another step but to the end user it another unnecessary step. Just my two cents worth.

I agree with that, not all users will be able to do this without teaching them first. Another dropwdown with the ability to actually add the class names you've specified via WYSIWYG filter would be very useful.

You seem to have all the options you need to get the filter up and running. There are more options I presume under the collapsed 'Style properties' in this screenshot:

http://drupal.org/files/wysiwyg_filter_-_filtered_html_-_configure.jpg

Have you set up your 'Wysiwyg profile' correctly too? I use ckeditor now for all my filtered HTML text areas on my site, I tried tinyMCE for awhile but didn't get on with it as well.

Sam.

Yes, there are more options but ticking all the checkboxes didn't do anything for me.

I use TinyMCE. Will give CKeditor a try and let you know if that resolves this issue.

Ok, give it a go and post your results.

Sam.

Tried CKeditor but the tables still don't follow the alignment style. By the way I installed CKEditor 3.6.2 and NOT CKEditor 3.6.2 for Drupal. When I installed the latter Drupal reported an error. FYI.

Re #7

update:
I figured it out. The original drupal html filter should be disabled in the input filter no matter rearrange wysiwyg filter on top of html filter, html filter still filter style attribute finally.

This step doesn't mention in the module readme.txt and module maintainer should update the readme file.

Thank you. This worked for me too.
If you enable the WYSIWYG Filter you need to disable the "Limit Allowed HTML Tags" filter.

Also worth remembering that when allowing <img> tags you need to allow the source attribute.
So the correct format for allowing images (with inline styling optionally) is:
img[!src|style]

I managed to get it to work, eventually. Here is my complete list:

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

As mentioned above, Limit allowed HTML tags must be disabled. If it still doesn't work, try disabling the other filters.

To esbon in #33:
It has been six years, but now there is a module that lets you allow iframes from a whitelisted list of domains It is Src whitelist.

I you still need this, please check it out.