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

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


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.


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.


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