Is there a way to prevent the Visual Editor from modifying my HTML when creating a post or a page? I know it has good intentions in doing what it does, but sometimes I'd prefer it not to touch my HTML, yet render the HTML in visual mode.

Thank you!

Sample of code used in editor:

<td width="124" align="left" valign="top">
    <p style="line-height: 140%; font-size: 10px; color: #333; font-family: Arial; margin: 0; padding: 0 0 12px 0;">
        <strong>Team Demo of the New Shake Table</strong>
    </p> 
    <p>
        <strong>May 17, 4-6pm</strong>
    </p>
    <p style="line-height: 140%; font-size: 10px; color: #333; font-family: Arial; margin: 0; padding: 0 0 8px 0;">
        <strong>Tech Exhibition in Oslo</strong>
    </p>
    <p><strong>June 5-9, Halle</strong>
</td>

Is there a way to prevent the Visual Editor from modifying my HTML when creating a post or a page? I know it has good intentions in doing what it does, but sometimes I'd prefer it not to touch my HTML, yet render the HTML in visual mode.

Thank you!

Sample of code used in editor:

<td width="124" align="left" valign="top">
    <p style="line-height: 140%; font-size: 10px; color: #333; font-family: Arial; margin: 0; padding: 0 0 12px 0;">
        <strong>Team Demo of the New Shake Table</strong>
    </p> 
    <p>
        <strong>May 17, 4-6pm</strong>
    </p>
    <p style="line-height: 140%; font-size: 10px; color: #333; font-family: Arial; margin: 0; padding: 0 0 8px 0;">
        <strong>Tech Exhibition in Oslo</strong>
    </p>
    <p><strong>June 5-9, Halle</strong>
</td>

• tinymce
• visual-editor

• Could you provide some samples of what you're adding to the editor and what is getting removed. – t31os Commented Mar 3, 2011 at 10:50
• <td width="124" align="left" valign="top"> <p style="line-height: 140%; font-size: 10px; color: #333; font-family: Arial; margin: 0; padding: 0 0 12px 0;"><strong>Team Demo of the New Shake Table</strong></p> <p><strong>May 17, 4-6pm</strong></p> <p style="line-height: 140%; font-size: 10px; color: #333; font-family: Arial; margin: 0; padding: 0 0 8px 0;"><strong>Tech Exhibition in Oslo</strong></p> <p><strong>June 5-9, Halle</strong></td> – Ardee Aram Commented Mar 3, 2011 at 10:55
• But I guess it's irrelevant, is it? I mean, since it is my blog is it not possible that I do <p><b>Test</p></b>? Wordpress can render it incorrectly (I'm thinking of say, IE or Firefox interpretation), but not just touch my code. – Ardee Aram Commented Mar 3, 2011 at 10:59
• 4 As long as your paragraphs have an attribute with a value on them TinyMCE/WordPress will leave them alone, eg. <p class="none"> or <p style="clear:none"> will get left alone, where as <p> or <p class=""> will get stripped as part of the JS routine that replaces content when mode switching. – t31os Commented Mar 3, 2011 at 17:15
• @t31os: I didn't know that, good tip. – Dalton Rooney Commented Mar 6, 2011 at 22:48

3 Answers 3

This wordpress plugin seems to do the trick for my problem...

http://wordpress/extend/plugins/raw-html/

It does seem wrong that if I enter code in the html editor it then strips it unless I resort to cheats like the pluging or adding class tags that do nothing.

I don't think there's a way to get TinyMCE to leave your HTML alone. This has been discussed in the WP Forum for ages. I stick with the HTML editor & write my code in another editor such as BBEdit first if it needs to be complicated.

As a general rule, I would not include that much inline styling in a post. It makes it very difficult to maintain or modify your styles in the future. This should all be defined in the theme stylesheet.

Have you seen the Extend KSES plugin to allow disallowed HTML code?

http://tierra-innovation/wordpress-cms/category/plugins/

"This plugin extends the HTML functionality of the WordPress kses.php file, which states the allowable HTML that the post/page content editor will accept. It allows the site administrator to optionally enable support for currently disallowed HTML tags…"