Setting TinyMCE valid elements

  • I’m working on customizing the default TinyMCE install that comes with WordPress 2.x (in point of fact, I’m working on it in WordPress MU, but the internals are the same).

    I’m trying to figure out why I can’t use the “class” attribute of anything in the html editor.

    As an example, let’s take an img tag. I want the user to be able to add a class attribute to a tag in the html editor, but everytime I do so it’s stripped out.

    I’ve looked in tiny_mce_gzip.php and modified the $vald_elements string, which is where WP is setting the list of valid elements for the tinyMCE_init() procedure call. When I remove an attribute from the list of available attributes for the img element it also gets stripped, so I know this part of it is working, but what’s confusing is that the class attribute is already in the valid element list, and it still get stripped. What’s more, if I add a class to an a tag it’s kept.

    The bit that’s allowing the anchor class: a[accesskey|charset|class|...

    The bit that (should be) allowing the img class: img[alt|border|class|...

    Don’t know if it’s relevant, but I can see the class in the path-bar under the TineMCE edit box, for both img and a tags. The stripping happens at save, and after that I can’t see the class in the path-bar or in the html.

    Has anyone else successfully applied classes to images? Is there another valid_elements filter I’m missing?

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi,

    I’m not using WordPress, but am using TinyMCE directly at https://www.goannatravel.com .

    Anyway, I can get the class to apply to images, but only when saved and not on the fly. The setting I’m using is:

    extended_valid_elements : "img[class|style|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name]"

    Hope this helps,

    Cheers,
    Aaron Watkins

    I can now actually have the class applied in the tinyMCE window and will let you know how in case you’re about to run up against the same problem…

    Basically, you need to add your styles to the tiny_mce/themes/advanced/css/editor_content.css file (if you’re using the Advanced Theme). Doing this will also automatically have the classes appear in the image class select dropdown.

    Cheers,
    Aaron Watkins

    Thread Starter cori

    (@cori)

    Hi Aaron;

    Sorry for the delay in reposting – I’ve been busy with other tasks and this one had fallen off my radar a bit.

    I’ve done both of what you’ve suggested, neither with success. If you look at the attribute list snippet I posted class is right in there, supposedly being allowed for img tags. I had also already tried adding the items to the editor_content.css file before I initially posted (sorry, I should have made that clear). I could get the selection to appear in the drop-down, but the values were still stripped from the html (weird, huh?).

    Anyway, thanks for the effort….

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Setting TinyMCE valid elements’ is closed to new replies.

Tags