Tinymce images auto-wrapped in <p> tag. CSS ways around or text editor hacks

Question

Hiya,
I have run into this problem many times now using drupal or wordpress where my tinymce config files are a bit too cleverly abstracted.

The problem is that tinymce auto-wraps my <img> tags in <p> tags. If there is a way around this in either Wordpress or Drupal, that would be awesome.

My problem exists when I want to do something like this

<style>
    img {
        float: left;
    }
    p {
        float: right;
        margin-right: 20px;
        width: 400px;
    }
 </style>

and I want my code to look like this

<img src="some_png.png" />
<p> Imagine a lot of lipsum text.</p>

but tinymce does this

<p><img src="crap_im_wrapped_in_a_paragraph.png" /></p>
<p> Imagine a lot of lipsum text.</p>

I'm trying to float an image to the left of a paragraph with a set width, without having width restraints on the image itself.
in this case the image's parent then gets a width and a float right. That is not what I want.

It is very possible that there is an easy clever fix for this but I still have not found one. I would prefer not hacking my config files if I don't have to.

1 caveat...
The only reason this problem exists is because I want clients to be able to easily do their own editing so I won't just have them wrap the image in a <div> instead of a <p>. That seems to me unintuitive for my clients who are the actual users of the wysiwyg

Previous Solution
I have been using a regex to remove the paragraph tags but it is always somehow problematic. I end up adding more images somewhere else then i have to keep tuning my regex to ignore them. 502 errors abound!

my question(s) is(are)
What can I to in my CSS to make the image wrapped in the paragraph do what I want it to do?
and if i can't
What drupal or wordpress specific can I do to make that paragraph disappear?

-- Edit -- the solution needs to be compatible with IE7+ and modern browsers. :P

Thanks!
aaron

Answer 1

You call tinyMCE with tinyMCE.init function, don't you?

So add this string to it:

forced_root_block : false,

Also you can change tiny_mce_src.js. Find

forced_root_block : 'p',

and change it to

forced_root_block : false,

P.S. Don't forger to clear the cache.

Answer 2

If you don't want it to wrap image tags, look in the Tinymce source for a function called "isBlock". There is a regular expression white list test that determines whether or not an element is a block element. If you need image tags to be treated as block elements then add "IMG" to the list of node names it looks for. I just had to do this myself, am still looking for negative side effects right now but it does solve the immediate problem at hand.

EDIT: That was more or less a temporary solution, if you just need to stop the root level block wrapping of image tags, there's a function called "forceRoots" where you'll actually want to perform your image tag check. I did it by modifying this line of code:

if (nx.nodeType == 3 || (!t.dom.isBlock(nx) && nx.nodeType != 8)) {

to look like this:

if (nx.nodeType == 3 || (!t.dom.isBlock(nx) && nx.nodeType != 8) && nx.nodeName.toLowerCase() != "img") {

This solves the problem quite well for me.

Answer 3

If we're talking about a WordPress site, there's an annoying filter that will automatically wrap some elements within the content with a <p> tag called wpautop. It's actually handled by wordpress at runtime and not by TinyMCE.

Add this to the top of your template or functions.php file:

<?php remove_filter('the_content', 'wpautop'); ?>

source:
http://wordpress.org/support/topic/stop-wordpress-from-adding-p-tags-and-removing-line-break