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

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.


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.