tinymce 5 line break plugin

Question

I've created a small TinyMCE v5 plugin that adds a line break button to the menu or toolbar :

 /* 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>

The only way to make it works is adding a space behind <br> on line :

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

otherwise the <br> tag is inserted but it has no effects meaning no line return occurs in the editor. The problem by adding this space is that it adds a space char at new line startup and I don't wan't that ...

I just want the same behavior when clicking my plugin button as hitting "MAJ+ENTER" on keyboard to insert line break instead of default new paragraph.

Unfortunately the code snippet does not work because of external TinyMCE CDN resource not being able to access Stack Overflow DOM. If one has suggestions to this sub-questions.

Answer 1

I found replacing '<br> ' by '<br>\‌' was fixing my issue. \‌ is a code for " zero width non joiner "

Not sure this is the perfect answer but will go on with it waiting for a better one !