Wordpress has (or rather had) an annoying habit — When you used it as a CMS, the built in editor graciously removed all div tags from your post. I really can’t see why anyone in their right mind would wish this. After digging through the support forums, came upon the following:
2.1 version tinyMCE will replace <div> by <p> when saving post, you may change this by hacking file: wp-includes/js/tinymce/tiny_mce_config.php
about 24th line, find:
$valid_elements = 'p/-div[*],-strong/-b[*],-em/-i[*],-font[*],-ul[*],-ol[*],-li[*],*[*]‘;replace by:
$valid_elements = '-strong/-b[*],-em/-i[*],-font[*],-ul[*],-ol[*],-li[*],*[*]‘;
This was the main reason why I was using ChenPress as my editor previously. I haven’t yet figured out TinyMCE will handle embedded php in a post… We’ll find out soon I guess.
Anyway, thought I would share.
Update – This hack no longer appears to work in v2.3.1 — I’m still trying to figure out a workaround.
Update Again – I tried mucking with the actual TinyMCE javascript… If you edit tiny_mce.js and comment out lines #4537 and #4540 (exposing the content of the if block, it seems to turn off the verify_html function within TinyMCE which partly causing this problem. I don’t think the valid_elements property is being used correctly, because I tried setting it to the complete HTML spec that I copied from here, but it didn’t work (same behavior). I think the bug is even deeper than that. However, because of all this, I have moved away from the WYSIWYG editor completely for all my posts (both blog and CMS content). So take this update with a grain of salt…
License
This work is published under a Creative Commons License.
Comments (14)
I try to avoid using divs for styling and/or layout but occasionally they’re unavoidable (e.g. on the site I’m currently working on). I ran into the annoying habit you describe and figured (a) I’d find the solution in the Wordpress Codex and (b) it’d be easy. Wrong.
A quick Google for “removing div tags wordpress” threw up this post, and it turns out it is easy after all.
Thanks for sharing!
This doesn’t appear to work any longer with v2.3.1. I’m looking for a new fix for this and will post here when I find it.
Let me know what you find… I need to spend time over the holidays upgrading, but if this hack no longer works, I might have to continue postponing it. Additionally, I wouldn’t paste the line verbatim. It looks like the line got mangled during a previous database transition. The important thing is to remove the div part of the filtering… I’ll download a copy of v2.3.1 tonight and take a peek at the tinymce code.
Mark & John, did you find a resolution for this? It’d be great if you did.
No luck yet. Still investigating…
Hey, I found a solution. Alter the tiny_mce_config.php file as follows.
change
‘p/-div[*]
to
‘p[*],-div[*]
‘-’ means remove empty elements
‘p/div’ means replace div by p
‘[*]‘ means any attribute allowed
Credit: http://wordpress.org/support/topic/139510#post-658765
Mario,
That didn’t work for me but if you just delete the tinymce folder from wordpress nothing breaks and you just get given the code option.
It appears that it isn’t wordpress that changes the tags it is the WYSIWYG text editor, that’s why posts can be fine first save and then screwed when you go back to edit and it opens via tinymce first.
Oh and don;t forget to clear your cache once it’s changed
Thanks everyone, this topic is obscure but highly important!
@Mario - I tried your fix since it makes sense however it didn’t work for me either; good try though mate
@Simon - A brilliant (if not draconian) solution! I’ve done it an it works well!
ok ppl, i found the solution. Where it mentions “p/-div[*]“, replace it with this “div/-div”. It work out for me.
Just delete the p/-div[*] from the list then the will not be replaced by the tag. Worked here!
Does anyone have a solution for WP 2.5 and up? This worked great for version before that but I can’t seem to find that code anywhere in the tiny_mce_config.php file. Did div code move?
Mario’s solution (#6) worked for me. I’m on WP 2.3.3.
Thanks!
I am using 2.6.2. And what I am trying to do is stop it from removing my precious p tags. under wp-admin/js/editor.js,
I commented off two lines and replaced it with a new one
//content = content.replace(new RegExp(’\\s*’, ‘mgi’), ”);
//content = content.replace(new RegExp(’\\s*\\s*’, ‘mgi’), ‘\n\n’);
content = content.replace(new RegExp(’\\s*\\s*\\s*’, ‘mgi’), ‘\n’);
it now only removes tags with empty content. i hope. seems working for me. hope it helps someone.
uh…html tags were removed…
Trackback/Pingback (1)
[...] your lucky day, if you’re using WP 2.3. Edit the tiny_mce_config.php as outlined at this article and [...]