tinymce - 如何在 tinyMCE 4 启动时打开 visualchars

Question

我想在启动编辑器后立即打开 visualchars 按钮和功能。 Tiny MCE 仅版本 4，非 jQuery 版本。

为什么？你不知道 nbsp 不好吗？

不，我不是要冒犯 HTML 正确性之神。在几种常见情况下(在问号、感叹号、冒号、分号之前，仅举几例)，法语文本中的不间断空格是强制性的。

我想看看不间断空格在哪里...

...以及由于我审阅其他人创建的内容(例如从 PDF 或 Word 复制/粘贴)而遗漏的地方，一般来说，我会检查文本是否有正确的法文排版。

我这样称呼我的编辑:

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();

这到目前为止有效，但我不知道如何在启动时激活视觉字符。

此外，我希望每次插入 nbsp 时都能够强制显示 visualchars，因为默认情况下 tinyMCE 的行为是我必须将其关闭然后再打开。

最后但同样重要的是，如果有比 tinyMCE 更好的编辑器，或者有更好的新手文档的编辑器，我很乐意尝试。

重要:TinyMCE 仅限版本 4

Answer 1

如果有人需要代码来在编辑器加载时强制启用视觉字符功能，这里有一个 TinyMCE Fiddle 可以向您显示详细信息:

http://fiddle.tinymce.com/ajgaab

你必须加载插件列表中的visualchars插件，然后你可以使用编辑器的初始化函数来开启这个功能:

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

请参阅 TinyMCE Fiddle 以获取完整的工作代码。