CODEWITHSUNDEEP
pluginstinymcetinymce-5
hugsbrugs
hugsbrugs

Reputation: 3611

tinymce 5 line break plugin

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.

Upvotes: 1

Views: 615

Answers (1)

hugsbrugs
hugsbrugs

Reputation: 3611

I found replacing '<br> ' by '<br>\u200C' was fixing my issue. \u200C 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 !

Upvotes: 1

Related Questions