Preserving tabs and line breaks in <pre><code> when switching from HTML to Visual Editor

Question

Tabs placed in a <pre><code></code></pre> block are stripped and line breaks are removed leaving a single continuous line of text. This occurs when switching from html to visual editors. Is there a setting in TinyMCE to avoid this?

BEFORE:

AFTER:

Here it even garbles the code and spits parts of it out the <pre>...

EDIT:

I seems the best option is to remove the <code> tag entirely and leave the pre. This still has the issue of removing duplicate blank lines, but it keeps the pre untouched even when switching between editors.

Answer 1

Add to function.php

add_filter('tiny_mce_before_init', 'tiny_mce_before_init');

And function tiny_mce_before_init:

function tiny_mce_before_init($init) {
 $init['setup'] = "function(ed) {
     ed.onBeforeSetContent.add(function(ed, o) {
     if ( o.content.indexOf('<pre') != -1) {
     o.content = o.content.replace(/<pre[^>]*>[\\s\\S]+?<\\/pre>/g, function(a) {
     return a.replace(/(\\r\\n|\\n)/g, '<br />');
    });
   }
  });
 }";
 return $init;
}

http://core.trac.wordpress.org/ticket/19666 - it's known bug, there is workaround but not fix tabs only new line chars

Answer 2

I have also added custom shortcodes to functions.php to avoid things breaking when switching from html to visual editors. Mainly I've used this for iFrame's, but maybe it would be helpful here too.