How to turn on visualchars on startup in tinyMCE 4

Question

I want to have the visualchars button and functionality turned on as soon as the editor is initiated. Tiny MCE version 4 only, non jQuery version.

Why? Don't you know that nbsp is BAD?

No, I am not trying to offend some god of HTML correctness. Non breaking spaces are compulsory in French text in several common instances (before question marks, exclamation marks, colons, semi colons to name a few occasions).

I want to see where the non-breaking spaces are...

... and where they are missing because I review content created by someone else (e.g. copy/pasted from PDF or Word), and generally speaking I will check the text for proper French typography.

Here is how I call my editor:

var ed = new tinymce.Editor('tinymce1', {

    plugins: [
                    'advlist link image charmap pagebreak',
                    'searchreplace wordcount visualblocks visualchars code fullscreen media nonbreaking',
                    'table template paste'
    ],

    language: 'fr_FR',
    element_format: 'html',
    keep_styles: false,
    paste_as_text: true,
    content_css: '/admin/css/tinymce.css',
    browser_spellcheck: false,

    toolbar1: "bold italic | styleselect formatselect | link unlink | bullist numlist | charmap subscript superscript | visualchars visualblocks nonbreaking",
    toolbar2: "image media | cut copy paste | searchreplace | undo redo | code | fullscreen | removeformat | spellchecker",

    menubar: false,
    toolbar_items_size: 'normal',
    style_formats: [
        {title:'Signature', block:'p', classes:'signature'}
    ],

    block_formats: 'Paragraphe=p;Titre 3=h3;Titre 4=h4;Div=div',


    setup: function(ed) {
        ed.on('keyup', function(e) {
            console.log('keyup: good for you, you captured a keyup event!');
        });

        ed.on('init', function(e) {
            console.log('init: nothing to see here, it kinda works.');
        });

    } // setup

}, tinymce.EditorManager);

ed.render();

This works so far, but I don't know how to activate the visualchars on startup.

Additionally I'd like to be able to force the visualchars every time I insert a nbsp, because by default tinyMCE's behavior is that I have to turn it off and then On again.

And last but not least, if there is a better editor than tinyMCE or one with a better documentation for noobs, I'd be happy to try it.

Important: TinyMCE version 4 only

Answer 1

If someone needs the code to force the visual characters capability on as the editor loads here is a TinyMCE Fiddle that shows you the details:

http://fiddle.tinymce.com/ajgaab

You have to load the visualchars plugin in the plugin list and then you can use the editor's init function to turn on the feature:

tinymce.init({
  selector: "textarea",
  plugins: [
    "...visualchars..."
  ],
  ....
  setup: function (editor) {
    editor.on('init', function () {
        editor.execCommand('mceVisualChars');
    });
  }
}); 

Please see the TinyMCE Fiddle for the full working code.

Answer 2

You need to add oninit (then the editor is initialized and ready) the activation of the plugin.

Additionally I'd like to be able to force the visualchars every time I insert a nbsp, because by default tinyMCE's behavior is that I have to turn it off and then On again.

You can check for the inserted character onKeyDown and then activate the plugin (and button).