Hi experts,

I'm running a drupal installation with TinyMCE, IMCE file manager and the tiny imgAdvanced Button enabled. While editing, I see the style results on the images (f.ex. margin or border) in the TinyMCE editor field - but when I save the page, the styles of the image tag are stripped. The result is Only local images are allowed.

The drupal filter is set to FullHtml (but in the debugging process I've already tried to create a new filter only for TinyMCE - without success for my problem.) If I disable the TinyMCE, the style attributes are save - but whenever I save the page with the Tiny, they are stripped again. Style attributes in other tags like

or

are save, they will not be stripped. The only solution I found so far, is to disable 'Verify html' in the TinyMCE settings. I think this is no good solution as on my site severals admins are editing text - and not everybody knows html.

My Question: Does anybody know the problem and - preferable - the solution. Can anybody tell me, how to edit the TinyMCE settings for 'verify html'. I suppose I have to add style into allowed attributes for the image tag- but I don't know where to do so ...

I hope I find some help here - I'm already trying to fix this problem for several hours and found many entries in the forum ... but none that solved my problem.

Thanks, anschinsan

Comments

dabble’s picture

Hi, Try this:
go to Administer>>Site configuration>>Input formats and set "Full HTML"
http://drupal.org/node/120622
Hope it helps

MaraudeR’s picture

This may be a security risk, that's the point on having FILTERED html...

Rob_Feature’s picture

As dabble suggests, first make sure it's not stripping out ALL the tags (including the img tag). If your image is showing up, but the style are gone, I might suggest this (without knowing if this is fully what the 'verify html' button is doing):

Most attributes in images (besides the 'alt' tag or id/class tags) are not XHTML strict compliant...they've been depreciated. The proper way to style your images in XHTML is to use CSS.

Try putting an alt tag or a class tag in your image. Does it strip those out? If it doesn't, I have a feeling that button is forcing your code to validate, which means it would remove any depreciated tags.

That's just a thought, without really knowing what that functionality is attempting to do.

/**
  * Bob Christenson
  * Mustardseed Media
  * http://mustardseedmedia.com
  */
anschinsan’s picture

Sorry, I didn't see that my post was filtered (please laugh, but don't get angry ;) Here it is again ... full with tags ...:

I'm running a drupal installation with TinyMCE, IMCE file manager and the tiny imgAdvanced Button enabled. While editing, I see the style results on the images (f.ex. margin or border) in the TinyMCE editor field - but when I save the page, the styles of the image tag are stripped. The result is <img src=" ... instead of <img style="margin:10px" src=" ...

I've enabled Full html as the editor filter. In the debugging process I've as well created a new filter only for Tiny without any filtering at all. This didn't solve my problem. Style attributes in <div> or <p> are save, they will not be stripped. The only solution I found so far, is to disable 'Verify html' in the TinyMCE settings. I think this is no good solution as on my site severals admins are editing text - and not everybody knows html.

My Question: Does anybody know the problem and - preferable - the solution. Can anybody tell me, how to edit the TinyMCE settings for 'verify html'. I suppose I have to add style into allowed attributes for the image tag- but I don't know where to do so ...

I hope I find some help here - I'm already trying to fix this problem for several hours and found many entries in the forum ... but none that solved my problem.

Thanks, anschinsan

Rob_Feature’s picture

I still think this is due to it stripping out tags that are not compliant. Did you try putting in a class or a alt tag and see if it strips that out?

/**
  * Bob Christenson
  * Mustardseed Media
  * http://mustardseedmedia.com
  */
klance’s picture

I have the exact same problem, and it isn't invalid code that's being stripped. In fact, when you click the image button, there's a box that allows you to put values into the style attribute. When I enter "float: right;" it floats the image right immediately, but when I preview the page it strips it out again. When I view the HTML there is no style attribute in my img tag. So it even strips code that *it* put in, not me.

schildi’s picture

but as far as I can see (in my case) the content is stored correctly in database. But some process/filter is preventing the style from be delivered to the browser (compare http://drupal.org/node/236996 )

concepcja’s picture

I had the same problem today.

Edit: modules/tinymce/plugin_reg.php
Find: $plugins['advimage']['extended_valid_elements'] ...

Add "style|" in the begining of the list of valid elements. Works for me.

schildi’s picture

Sorry, tinyMCE is not involved when viewing a page (not in edit mode). Data is stored correctly in the DB.
As zeta-zoo mentions in http://drupal.org/node/236996 it is an effect of filtering OUTPUT by the so called "INPUT filter" (input format). In my case the input format "filtered HTML" seems to prevent styles from being transfered to the browser.

Anonymous’s picture

Yes, this is the solution!

The Advanced Image plugin for TinyMCE does not allow style attribute within img tag, unless you add it to plugin_req.php on the following line:

$plugins['advimage']['extended_valid_elements'] = array('img[style|class|src|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name]');

and maybe also here:

$plugins['flash']['extended_valid_elements'] = array('img[style|class|src|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name|obj|param|embed]');

*refresh cache and browser cache*

(I'm sick of coders deciding what's best for other people. Give it up, let people decide themselves!)

DomeMinion’s picture

I too have this problem of the disappearing code with TinyMCE in version 6 of Drupal. The depreciated tag, align, is listed in "modules/tinymce/plugin_reg.php." So, using TinyMCE's HTML editor, I inserted align="right" into the img tag.

It worked. Add this to the pile of troubleshooting evidence.

Adding "style|" to the front of TinyMCE's extended_valid_elements array did not work -
$plugins['advimage']['extended_valid_elements'] = array('img[style|class|src|alt|title ... |name]');

I'm new to Drupal and have been poking around trying to find where v6 itemizes its HTML tag filter. Found info on v5 but no luck yet on v6.

DomeMinion’s picture

While poking around I found two places to insert "style|" (style with a pipe) into "modules/tinymce/plugin_reg.php":

(1) $plugins['advimage']['extended_valid_elements'] = array('img[style|class|src|alt|title ... |name]');

(2) $plugins['flash']['extended_valid_elements'] = array('img[style|class| ... name|obj|param|embed]');

After making the change in the "flash" pugin, <img>'s style attribute was no longer stripped .

allanmorris’s picture

TinyMCE related but not quite Drupal. In Joomla you can edit the tinymce.php file in the plugins/editors folder and adjust the extended params as above like:

extended_valid_elements : \"a[class|name|href|target|title|onclick|rel],img[style|class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],$elements\",

and adding the 'style' element to the img element allows the use of the css styles in the editor and it saves them no problem.

Thanks and good luck.

Allan.

capellic’s picture

This post was incredibly helpful. I was scratching my head wondering why my class settings for my link was being stripped out before the data was being written to the database (ruling out a filter issue).

I opened up modules/tinymce/plugin_reg.php and saw the following:

$plugins['advlink']['extended_valid_elements'] = array('a[name|href|target|title|onclick]');

I immediately noticed that "class" was missing. I added it to look like this....

$plugins['advlink']['extended_valid_elements'] = array('a[class|name|href|target|title|onclick]');

... and it worked!

Riccardo83’s picture

Well if im using Wysiwyg API and TinyMCE 3 how do i do it, i dont have that plugin_req.php file.

its all a mess, tinymce 3 only works with d6, but img assist doesnt... argh....

Check out my blog
http://blog.riccardo-ulpts.com

toodlepip’s picture

Riccardo83 - I had exactly the same problem and had to put together a nasty hackety-hack to get it working. Find the file:

sites/all/modules/wysiwyg/editors/tinymce.inc

Find the code that starts:

// Clean-up.
$init['extended_valid_elements'] = array_unique($init['extended_valid_elements']);

From what I can work out, this is used to make sure that any 'extended_valid_elements' that are added by plugins aren't duplicated. I found that adding in an extra line to allow for advanced image-formatting did the trick, changing the code to:

// Clean-up.
$init['extended_valid_elements'] = array('img[class|style|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name]');
    $init['extended_valid_elements'] = array_unique($init['extended_valid_elements']);
$init['extended_valid_elements'] = array_unique($init['extended_valid_elements']);

Out of interest, for module maintainers, it looks like the code that the settings for $init['extended_valid_arguments'] is set to an empty array, when iterating through the user plugins. Might make sense for a global setting to include the standard tags used by the buttons that TinyMCE ships with.

Happy to help, if I can. Hope this is useful.

Toodle Pip

Sam
http://www.toodlepip.co.uk

spiffyd’s picture

This did the trick. Just doing (1) was not enough, (2) is needed too.

tgvcdr’s picture

First I just added "style" to advimage ( nothing happened ) but after adding "style" to flash it worked.

Then I removed "style" from advimage and to my surprise : it is still working!

Thank you again.

hduyker’s picture

Same problem here, after updating TinyMCE (the editor itself) to v3.xx.

We have the problem with images; I'm guessing that TinyMCE switched from inserting "align=right" to inserting "style='align:right'".

Bug in the drupal module seems to be that ONLY the very last encountered 'extended_valid_elements' is sent to the TinyMCE init function (haven't solved that yet, but the workaround is to add "style|" in all of the img[] tags.

Another problem is that the Filtered HTML filter seems to strip out style attributes even on allowed tags.
~~~~~
Drupal and WoW - a good match. See our site, the Argent Archives for the reason.

jaks1970’s picture

Works perfectly now.

Thanks so much. This was driving me crazy. :)

rockdw’s picture

At the risk of simply adding a "me too" to the thread, I have to say thank you many, many times for this. I have been going bonkers for a couple weeks now trying to find what's going on with this one. I'm not afraid of html by any means, but part of the requirement for my project was to set up something that a relatively non-technical person could use. Having the img styles disappearing was putting a severe damper on my progress.

I am using Drupal 6.2 with tinymce 3.1 / 6.x-1.1-dev plugin. I had to add the style| entry to only one place in the modules/tinymce/plugin_reg.php file to get it to work:

$plugins['advimage']['extended_valid_elements']

mariagwyn’s picture

I would like to know if there is a way to add this to the template.php page so that the tinymce files are not touched (and overwritten on upgrade).

thanks,
Maria

svdoord’s picture

I feel I'm nearly there. In my Drupal 6 template.php, I have:

function phptemplate_tinymce_theme($init, $textarea_name, $theme_name, $is_running) {
    $init = theme_tinymce_theme($init, $textarea_name, $theme_name, $is_running);
    $init['extended_valid_elements'][] = 'img[class|src|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name|style]';
    return $init;

This does the trick of not stripping out the style tag. However, the input filter 'HTML Filter' still removes the CSS. I like the part where the input filter removes JavaScript etc., but not the CSS. Does anybody know of a way to fix that?

Thanks,
Stefan

capellic’s picture

I've been hacking around, guess at the array key name to get class/id to stick to table, tr and td with no luck.

Xulin’s picture

Hi
i have installed TinyMCE 3.2 with tinytinyMCE latest version (5.x.1.3) with Imce (5.x.1.2).
I have the same problem with style attribute (tag image) but when i looking for "plugins_reg.php" i dont found it.
There is something similar at the line above in the menu where i can choose "extended_valid_elements" inside "drupal-->administration --> tinytinyMce administartion" but not work.
How can i do without plugin_reg.php? Isn't impossible do it with tinytinyMCE module installed?
Someone can help me?
thank!!

rpghost’s picture

I use tinytinymce and it handles the style properly by default... the style for centering an image is stored in the database. The problem I have is filtered html input mode is stripping the style out of the image. How do I change the filtered html to allow the style? I tried in the settings adding things like "Only local images are allowed. Is there a way to hack it?

James

--
http://www.rpgshop.com

SKrossa’s picture

Filtered HTML can be set so it does not strip out tags. Image Assist uses <span> tags for alignment (so, not styles in the <img> tag). In the img_assist.css file (at least 5.x-1.6) there are these lines:

...
/**
 * FINAL PAGE (node)
 * You may want to copy these styles to your theme's CSS file and then set img_assist.css 
 * not to load on every page.  This can be set on the img_assist settings page.
 */ 
span.inline-left {
  display: block;
  float: left;
  margin: 5px 5px 5px 0px;
}
span.inline-right {
  display: block;
  float: right;
  margin: 5px 0px 5px 5px;
}
span.inline-center {
  display: block;
  text-align: center;
}
span.inline .caption {
  display: block;
}
.image-clear { /* Clear floated images. Copied from Garland's style.css. */
  display: block;
  clear: both;
  height: 1px;
  line-height: 0px;
  font-size: 0px;
  margin-bottom: -1px;
}

For our site, we put the above styles in our theme customization css file, and everything works fine. Alternatively, in the Image Assist settings, under "Display Settings", we could have set "Include img_assist.css on all pages for styling inline images?:" to "Yes".

magicduck’s picture

I've found great solving of the problem here :)
http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/extended_valid...

tinyMCE.init({
...
extended_valid_elements : "img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name]"
});

//magic_duck http://logic-is-art.blogspot.com/

wxman’s picture

I'm using the setup in a Drupal 6 site, and all I did was edit plugin_reg.php by adding 'style' to the array:

$plugins['advimage']['extended_valid_elements'] = array('img[style|class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name]');

It seems to be working fine now.

jimkeller’s picture

this is a better solution than editing the core. Simply add the following into a custom module (edit extended_valid_elements and options as needed). Then just go into the WYSIWYG "buttons and plugins" configuration, and enable "TinyMCE Fixes"

function mymodule_wysiwyg_plugin($editor, $version) {
	switch ($editor) {
	    case 'tinymce':
	        return array(
	          'context' => array(
		          'extensions' => array('TinyMCE Fixes' => t('TinyMCE Fixes')),
          		  'extended_valid_elements' => array('style'),
          		  'options' => array (
          		  	'forced_root_block' => false
          		  	
          		  )
	          )
	        );
	    
	    break;
	  }
}

(Note that if you put extended_valid_elements in the 'options' array, it will override all options added by all other modules instead of merging them, which probably isn't want you want. )

However, there was still an issue with the style tag where Drupal ran the comment tag created by tinyMCE through htmlspecialchars, causing the style tag to look like: "

<!-- ...", which still didn't work. Couldn't find a decent fix for it, so my workaround was to edit node.tpl.php and change: print $content to
    	$content = str_replace( '&lt;!--', '', $content );
    	$content = str_replace( '--></style>', '</style>', $content );
    	$content = str_replace( '--&gt;</style>', '</style>', $content );
    	print $content; 
Hope this helps someone, I spent more time than I would've liked to on this issue. Jim Keller http://www.contextsolutions.net
Denes.Szabo’s picture

This plugin helped me to insert into the text area any google map with embeded code.

I just added into the extended_valid_elements this line: 'iframe[width|height|frameborder|scrolling|marginheight|marginwidth|src]'

THX!

--
Denes Szabo - http://internode.hu

birdrockdesigns’s picture

I've read this thread hoping to find a solution to this issue.

I've set the default for all page content to be Full HTML. But also, allows the user/editor to view in Rich Text (i.e. Tiny MCE mode).

When you click on the 'HTML' button in Tiny MCE mode, you can view the source, when you close it, the actual HTML changes.

For example:

<div class="top"></div>

This is strictly a background image div.

This disappears once you've viewed the HTML source using the Tiny MCE.

I've checked the settings in the admin, and tried disabling cleanup word HTML and so forth. Nothing seems to work.

Upon reading this thread, I looked for the php file in the Tiny MCE module folder. Not to be found. So I can't edit any of the settings it seems.

I'm running an installation of drupal 6.x

Does someone have any ideas on what I should do to correct this?

Thanks!

blake15’s picture

I am also having the same issue as the post above. I have tried all suggested fixes with no success. Can someone please explain how to keep tinymce from stripping the image tags.

elizas’s picture

If CFDOCUMENT has external CSS included (not inline styles), then CFDOCUMENT finds those external resources to use, it does not include the resources like in CFINCLUDE. CFDOCUMENT acts as a browser and uses HTTP to get those resources (CSS and images). By this the server resolves the IP or URL that we have used to refer resources.

So if the files are local, a better and simpler solution is, we can use “file:” protocol with 3 leading slashes (“file:///”) in the image SRC or CSS source. It also speeds up the CFDOCUMENT call.

Only local images are allowed.
OR
Only local images are allowed.

http://www.mindfiresolutions.com/How-to-resolve-resource-CSS-Image-embed...

homo_sapiens’s picture

As anyone can see, this bug has been reported as something happening inside Drupal4.7 . Meanwhile we have Drupal 6 and as blake15 wrote in his comment this problem still exists, although some people reported that they have solved the problem.
I also tried all suggested fixes with no success.
Does anybody think that it makes sense to upgrade to the newest version of TinyMCE (3.3.9.2). Could this solve the problem. Im currently running TinyMCE 3.2.0.2 .

It would be nice, if someone could tell me that the problem disappeared in a newer version of TinyMCE.

P.R.

schildi’s picture

are filtered out by default. I you have installed the wysiwig module, you can configure it so that style attributes are no longer filtered out.

BigMike’s picture

schildi,

I've looked around and can't figure this out. I've added style to the list of block formats and I've also enabled Style properties, but it is removing my style tags.

When I enter:

<style type="text/css">#someid { display: none; }</style>

in my Full HTML mode, and then switch to Filtered HTML then back to Full HTML, the <style...></style> tag disappears.

Help! Thanks!
Mike

schildi’s picture

it also took me a time to find this out:

  1. Go to admin/settings/filters
  2. there you will find a filter called "wysiwyg" or similar (associated with Wysiwyg)
  3. follow the "configure" link
  4. then go to TAB configure
  5. there you will find a box titled "HTML elements and attributes".
    This box contains in my case the following settings
    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
    

and also have a look at the other settings on this page!

Regards

Sorry, but I can't append screen shots to this comment ...

tinny’s picture

Two modules that may help:
1) HTML purifier: http://drupal.org/project/htmlpurifier
2) WYSIWYG filter: http://drupal.org/project/wysiwyg_filter