How to prevent tinymce macro from inserting nbsp;?

Question

I've got the following macro button defined to wrap a selection in a shortcode in the wp_editor visual editor:

(function() {
tinymce.create('tinymce.plugins.ingredient_name', {

    init : function(ed, url){
        ed.addButton('ingredient_name', {
        title : 'Tag ingredient',
        onclick : function() {
            var text=ed.selection.getContent({'format':'text'});
            ed.execCommand('mceInsertContent',false,'[ingredient_name]' + text + '[/ingredient_name]');
        },
            image: url + "/name.png"
        });
    }
});

tinymce.PluginManager.add('ingredient_name', tinymce.plugins.ingredient_name);

})();

The macro works as intended, except that tinymce is also inserting &nbsp in front of the resulting shortcode. So, instead of this result:

1 [ingredient_name]pound[/ingredient_name] salami

I get this:

1 [ingredient_name]pound[/ingredient_name] salami

this then somehow gets mangled when inserting to the DB, and rendered to the template, I get '1Â pound salami'. I can go back and remove the offending &nbsp's, but I'd prefer tinyMCE not insert that entity in the first place. Any ideas?

Answer 1

well, it turned out not to be an issue with tiny mce at all, rather php DOMdocument that was filtering tinyMCE's output, interpreted in the wrong charset, then passing garbage characters to the page.

Fun!

Answer 2

The TinyMCE WYSIWYG editor convert space symbols into   entities by default. It causes because the default entities property is set to convert space symbols into   entities:

entities: "160,nbsp,38,amp,34,quot,162,cent,8364,euro,163,pound,165,yen,169,copy,174,reg,8482,trade,8240,permil,181,micro...."

To resolve this issue, you should redefine the entities init property. For example:

tinyMCE.init({
    entities: "38,amp,34,quot,162,cent,8364,euro,163,pound,165,yen,169,copy,174,reg,8482,trade"
});

To initialize TinyMCE options in WordPress, you have to add your own hook to tiny_mce_before_init filter:

function wpse8170_change_mce_options($initArray) {
    // other settings...
    $initArray['entities'] = '38,amp,34,quot,162,cent,8364,euro,163,pound,165,yen,169,copy,174,reg,8482,trade'; 

    return $initArray;
}

add_filter('tiny_mce_before_init', 'wpse8170_change_mce_options');

The full list of values, which you can adjust, you can read at TinyMCE Configuration page. And the last link for entities option.