13

I've been looking around for a solution that will allow me to edit HTML code and have it remain after a switch to the Visual editor and back.

I've tried a bunch of things with no luck:

  • the wp-no-format plugin
  • the Raw HTML plugin
  • entering all my HTML on one line

If it were just me managing the content, I would disable the Visual editor. But as I have a number of content managers, and pages on which there is HTML (forms, for example) and content that they need to edit, that's no an option.

Any suggestions will be greatly appreciated.

Improve this question
4
  • are you trying to display the code in a post/page
    – xLRDxREVENGEx
    May 13, 2011 at 3:49
  • The HTML code is most commonly displayed on a page, yes.
    – evanmcd
    May 13, 2011 at 4:05
  • I just added a few syntax highlighters plus the search results
    – xLRDxREVENGEx
    May 13, 2011 at 4:35
  • The only solution I found which respect code in HTML and Visual Editor view is the rawhtmlpro.com
    – Sylvain Rayé
    Mar 26, 2013 at 23:40

6 Answers 6

Reset to default
7

I know exactly how you feel, and sadly this problem is rooted in the wordpress core code not in TinyMCE or due to browser compatility problems. I wrote a plugin that allows you to format html markup in the HTML editor, switch back and forth between it and the Visual tab without affecting the source code, and make changes in the Visual tab without breaking the original HTML formatting...

http://wordpress.org/extend/plugins/preserved-html-editor-markup/

It also preserves tabbed indentations - 4 spaces only :( - and it enhances HTML5 compatibility.

The only "pitfall" is that it disables wpautop. I quote pitfall because some people hate that the editor wraps p tags around their content, as a result the Visual editor will use br tags for carriage returns instead - so you may need to adjust your stylesheets.

Enjoy!

Improve this answer
4
  • 1
    I've updated the plugin with a few features that solve the no wpautop problem. Now the visual editor can be configured to inject p tags or br tags or both (two consecutive newlines creates a p tag.) And it supports inline javascript and css. In version 1.5, soon to be released it will support javascript code blocks as well. If you want your markup to look like you wrote it, it's definitely the plugin to use. Nothing I've tried comes close.
    – Marcus Pope
    Aug 31, 2012 at 21:51
  • Thank you very much, this is the only solution that I've found that makes the visual editor (after saving) not change the HTML.
    – jackJoe
    Apr 22, 2015 at 11:40
  • Today is 2015, and the plugin has an update
    – Ooker
    Sep 9, 2015 at 4:37
  • Still works like a charm!
    – joseantgv
    Feb 20, 2019 at 14:34
2

You can try this plugins:

TinyMCE Advanced have setting to Stop removing the <p> and <br /> tags when saving and show them in the HTML editor

Improve this answer
1
  • @evanmcd Did Stop removing the <p> and <br /> tags… work?
    – sam
    Nov 2, 2013 at 19:50
0

If there are only sections of code that you don't want mangled, you could alternatively store that sensitive HTML / embed / etc into custom fields.

By use of this shortcode plugin, you could include the custom fields RAW inside any post, page or even widget with something like: [include "my custom field name"]. It also can pull common snippets from other posts with something like [include global="shared_code_menu"].

It's a cheap alternative and has limitations, but it's lightweight and straight-forward.

http://pp19dd.com/wordpress-plugin-include-custom-field/

Improve this answer
0

Following plugin worked for me.

https://wordpress.org/plugins/embedit-pro/

Improve this answer
0

Add this to your functions.php

function wp_tiny_mce_sanitize_fix( $init )
{
    $init['extended_valid_elements'] = 'div[*], article[*], span[*], p[*]';
    $init['remove_linebreaks'] = false;
    $init['convert_newlines_to_brs'] = true;
    $init['remove_redundant_brs'] = false;
    return $init;
}
add_filter( 'tiny_mce_before_init', 'wp_tiny_mce_sanitize_fix' );
Improve this answer
-1

Ok so lets move this to an answer now. Do you want something like this

-Title-
Sample Post

-content-
lalalalalalalalalalalala

<div><a href="blah.com">Blah</a></div>

A list of Syntax Highlighters
- SyntaxHighlighter TinyMCE Button
- WP SyntaxHighligter
- RBCODE
- The Search Result From Wordpress Extend

Improve this answer
4
  • Hmm, honestly not sure what you're trying to get across with that answer. Can you explain a bit more? Do you understand the nature of the problem I'm trying to solve?
    – evanmcd
    May 14, 2011 at 12:48
  • I asked if you wanted to show the html you said yes. So that is what a syntax highlighter does. Now if that is not what you are looking for then sorry but that is how i read it. So are you trying to use custom html inside a post to change the looks of the post?
    – xLRDxREVENGEx
    May 14, 2011 at 15:39
  • The problem I am trying to solve: 1) enter HTML in HTML View. 2) switch to Design View. 3) switch back to HTML View. HTML has been modified when I don't want it to be.
    – evanmcd
    May 17, 2011 at 1:28
  • yeah I just realised that happens I never use the non html view so I never realised that. I'm still trying to figure it out
    – xLRDxREVENGEx
    May 17, 2011 at 6:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.