You either need to add such code via the HTML editor (and not switch back to the Visual editor), or else you will need to pass a custom configuration to the Visual editor.
I have similar needs, and here’s what I use (in functions.php
):
// http://tinymce.moxiecode.com/wiki.php/Configuration
function cbnet_tinymce_config( $init ) {
// Change code cleanup/content filtering config
// Don't remove line breaks
$init['remove_linebreaks'] = false;
// Convert newline characters to BR tags
//$init['convert_newlines_to_brs'] = true;
// Preserve tab/space whitespace
$init['preformatted'] = true;
// Add to list of formats to remove with Remove Format button
$init['removeformat_selector'] = 'b,strong,em,i,span,ins,del,h1,h2,h3,h4,h5,h6,pre';
// Do not remove redundant BR tags
$init['remove_redundant_brs'] = false;
// Add to list of valid HTML elements (so they don't get stripped)
// IFRAME
$valid_iframe="iframe[id|class|title|style|align|frameborder|height|longdesc|marginheight|marginwidth|name|scrolling|src|width]";
// PRE
$valid_pre="pre[id|name|class|style]";
// DIV
$valid_div = 'div[align<center?justify?left?right|class|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style|title]';
// Concatenate
$cbnet_valid_elements = $valid_iframe . ',' . $valid_pre . ',' . $valid_div;
// Add to extended_valid_elements if it alreay exists
if ( isset( $init['extended_valid_elements'] ) ) {
$init['extended_valid_elements'] .= ',' . $cbnet_valid_elements;
} else {
$init['extended_valid_elements'] = $cbnet_valid_elements;
}
// Pass $init back to WordPress
return $init;
}
add_filter('tiny_mce_before_init', 'cbnet_tinymce_config');
Specifically, you’ll want to set remove_linebreaks
to false
, set preformatted
to true
, and probably add the <pre>
tag to the whitelist.