tinymce 5 换行插件答案

【问题标题】：tinymce 5 line break plugintinymce 5 换行插件
【发布时间】：2021-05-19 12:50:30
【问题描述】：

我创建了一个小的 TinyMCE v5 插件，它向菜单或工具栏添加了换行按钮：

/* Plugin code */
(function () {
    'use strict';

    var global = tinymce.util.Tools.resolve('tinymce.PluginManager');

    var register = function (editor) {
      // Translate button text
      tinymce.util.I18n.add('fr_FR', {'Inser Line Break' : 'Insérer un saut de ligne'});
      // Register new Icon
      editor.ui.registry.addIcon('line-break', '<svg width="24" height="24"><path d="M 6.4,15.129563 H 12 c 3.7,0 6.2,-2 6.8,-5.1 0.6,-2.7 -0.4,-5.6 -2.3,-6.8 a 1.029563,1.029563 0 0 0 -1,1.8 c 1.1,0.6 1.8,2.7 1.4,4.6 -0.5,2.1 -2.1,3.5 -4.9,3.5 H 6.4 l 3.3,-3.3 a 1,1 0 1 0 -1.4,-1.4 l -5,5 a 1,1 0 0 0 0,1.4 l 5,5 a 1,1 0 0 0 1.4,-1.4 z" fill-rule="nonzero"/></svg>');
      editor.addCommand('InsertLineBreak', function () {
        editor.execCommand('mceInsertContent', false, '<br>');
      });
    };

    var register$1 = function (editor) {
      editor.ui.registry.addButton('br', {
        icon: 'line-break',
        tooltip: 'Inser Line Break',
        onAction: function () {
          return editor.execCommand('InsertLineBreak');
        }
      });
      editor.ui.registry.addMenuItem('br', {
        icon: 'line-break',
        text: 'Inser Line Break',
        onAction: function () {
          return editor.execCommand('InsertLineBreak');
        }
      });
    };

    function Plugin () {
      global.add('br', function (editor) {
        register(editor);
        register$1(editor);
      });
    }

    Plugin();
}());

/* Main code */
tinymce.init({
  selector : "textarea#mceEditor",
  menubar: "",
  language : "fr_FR",
  plugins: ["advlist autolink link image lists preview hr anchor pagebreak wordcount fullscreen media nonbreaking emoticons template paste help", "br"],
  toolbar: "fullscreen undo redo | formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist | link unlink image hr br ihtml | media | emoticons ",
  block_formats: "Paragraph=p;Header 2=h2",
  branding: false,
  elementpath: false,
  content_css : "https://www.dev-book.fr/styles/editor.css?v=36",
  valid_elements : "h1,h2,hr,br,ul,ol,li,strong/b,em/i,p/div[align|style],a[href|target],img[class|src|border=0|width|height|align|style|alt],iframe[src|width|height]",
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.7.1/tinymce.min.js"></script>
<textarea name="page_texte" style="height:"400px" id="mceEditor"></textarea>

使它起作用的唯一方法是在<br>后面添加一个空格在线：

editor.execCommand('mceInsertContent', false, '<br> ');

否则<br> 标记被插入，但它没有任何效果，这意味着编辑器中不会发生换行。添加这个空格的问题是它在新行启动时添加了一个空格字符，我不希望那样......

单击我的插件按钮时，我只想要与在键盘上点击“MAJ+ENTER”以插入换行符而不是默认的新段落时相同的行为。

不幸的是，由于外部 TinyMCE CDN 资源无法访问 Stack Overflow DOM，因此代码 sn-p 不起作用。如果有人对此子问题有建议。

【问题讨论】：

标签： plugins tinymce tinymce-5

【解决方案1】：

我发现用'<br>\u200C' 替换'<br> ' 可以解决我的问题。 \u200C 是“zero width non joiner”的代码

不确定这是不是完美的答案，但会继续等待更好的答案！

【讨论】：