WordPress.org

Ready to get started?Download WordPress

Forums

HTML5ify for WP
[resolved] HTML5 Elements Break When Switching From HTML To Visual Mode (4 posts)

  1. luispunchy
    Member
    Posted 3 years ago #

    I entered HTML5 elements - specifically figure and figcaption in the HTML mode of the tinymce editor. Save the post and view on the front-end and it works - the HTML5 elements are rendered properly.

    However, if I go back to the tinymce editor and switch to the Visual mode, it breaks the HTML5 markup. In this particular case, the figure elements becomes empty -> <figure></figure> -- and all the markup that was previously saved inside figure is now outside of it and immediately after it in the source as well as the HTML mode if I go back there.

    Seems to be a conflict with how the Visual mode parses HTML5. Any ideas how to fix this?

  2. luispunchy
    Member
    Posted 3 years ago #

    update:
    I've googled a bit and found some code that claims to make the Visual editor play nice with HTML5:

    - http://hybridgarden.com/blog/misc/adding-html5-capability-to-wordpress/ (this actually seems to be very similar to the HTML5ify plugin, although I thought the plugin is meant to make the HTML mode compatible, whereas this code is for the Visual mode)

    ...and there's this related code that claims to make the HTML mode of the editor compatible with HTML5:
    - http://nicolasgallagher.com/using-html5-elements-in-wordpress-post-content/

    I tried using the above two alternatives in combination with the HTML5ify plugin (both of them together, and each of them separately) but still get the same problem.

    I would be most grateful for any suggestions.

  3. miqronaut
    Member
    Posted 3 years ago #

    luispuncky, do you have other TinyMCE unfilter plugins installed? The "TSL iframe unfilter" plugin broke HTML5ify since it replaces TinyMCE's 'extended_valid_elements' rather than adding to it. I modified the other TinyMCE unfilter plugin's code (until it's fixed by author) and now HTML5ify retains markup when switching between visual and code.

    http://wordpress.org/support/topic/plugin-tsl-iframe-unfilter-resolving-tinymce-unfilter-conflicts

  4. luispunchy
    Member
    Posted 3 years ago #

    I'll mark this one as resolved, in light of miqronaut's reply... although to my memory I did not have any other TinyMCE plugins installed/activated so I'm not certain his specific situation would work in the case I described, it very well could apply to others with similar situations.

    My original post was months ago (sorry I didn't subscribe to my own thread and check back more recently) but I believe I found another workaround... for the particular content in question that required HTML5 markup I ended up building a custom meta box instead (outputting the content into the required markup), rather than using the TinyMCE editor.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic