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 Commented May 13, 2011 at 3:49
  • The HTML code is most commonly displayed on a page, yes. Commented May 13, 2011 at 4:05
  • I just added a few syntax highlighters plus the search results Commented May 13, 2011 at 4:35
  • The only solution I found which respect code in HTML and Visual Editor view is the rawhtmlpro.com Commented 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. Commented 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. Commented Apr 22, 2015 at 11:40
  • Today is 2015, and the plugin has an update Commented Sep 9, 2015 at 4:37
  • Still works like a charm! Commented 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? Commented 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? Commented 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? Commented 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. Commented 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 Commented May 17, 2011 at 6:21

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.