Grow your CSS skills. Land your dream job.

WordPress visual editor strips html classes

  • # September 25, 2009 at 2:22 am

    Pasting html code into <pre> areas in my posts causes WordPress to either:
    1. Strip the class="example" from my code; or
    2. Render the html within the <pre> tag.

    If I enter the code via HTML (rather than the Visual editor) everything looks on my post until I click the Visual editor tab and then Update Post. This then displays the code on my post as: <div class=“table”>.

    My aim is a simple way to drop code into a wordpress post so I can keep my own commonly used code clips or Snippets on my local machine.

    My own personal version of the Chris Coyier’s Snippets, if you like, for when I’m offline.

    This seems to be a well-know problem but one without an easy answer.
    Plugins like Save My pre and TinyMCE Valid Elements but they don’t seem to do the trick.

    Suggestions? Tips?

    # September 25, 2009 at 2:52 am

    are you running the latest version of wordpress?

    # September 25, 2009 at 3:14 am

    Yes, latest version — 2.8.4 — Fresh install.

    This is an example "flow", step-by-step, and the problem:

    1. Copy some html from Coda
    2. Paste it into TextEdit
    3. Copy from TextEdit
    4. In the wordpress visual editor, select Preformatted from the Format dropdown
    5. Paste in the code.

    Straight away, all the classes have been stripped.
    So this:

    Code:

    ..comes out like:

    Code:
    Left
    Right

    *If I didn’t mind losing all line formatting and spacing I can paste the full contents unstripped using the Paste as Plain Text button… less than ideal.

    The issue is that it must (well… might) be javascript stripping the code as it’s pasted in.

    Ideally, there is a way to stop this behaviour that doesn’t require hacking the wordpress core… a plugin perhaps?

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".