Tinymce Enter Button Press the interrupt line creation button (<br>)

In my application, I use the Tinymce plugin.

I have a tag <h1>like this:

<h1 class="element">Lorem ipsum dolor sit amet.</h1>
<h2 class="element">Lorem ipsum dolor.</h2>

when I put the cursor at the end of the h1 tag and press the enter key, I get this result:

<h1 class="element">Lorem ipsum dolor sit amet.</h1>
<br>
<h2 class="element">Lorem ipsum dolor.</h2>

but I want it to be like this (creating a new h1 tag ):

<h1 class="element">Lorem ipsum dolor sit amet.</h1>
<h1 class="element"></h1>
<h2 class="element">Lorem ipsum dolor.</h2>

How can i do this?

This is my tinymce script initialization

tinymce.init({
  selector: '#editor',
  inline: true,
  force_br_newlines: true,
  force_p_newlines: false,
  forced_root_block: '',
  fixed_toolbar_container: "#toolbarEditor",
  plugins: [
    "",
    "",
    "textcolor"
  ],
  menubar: false,
  toolbar_items_size: 'small',
  toolbar: "bold italic | styleselect fontsizeselect forecolor",
  textcolor_map: ["000000", "Noir", "DA291C", "Rouge Pantone", "ffffff", "Blanc"],
  fontsize_formats: "8px 10px 12px 14px 18px 24px 32px 36px",
  style_formats: [
    {title: 'T1', block: 'h1', class: 'HelveticaNeueLTCom-UltLtCn-100', styles: {'font-size': '36px'}},
    {title: 'T2', block: 'h3', class: 'HelveticaNeueLTCom-UltLtCn-45', styles: {'font-size': '32px'}},
    {title: 'T3', block: 'h4', class: 'HelveticaNeueLTCom-UltLtCn-18', styles: {'font-size': '18px'}},
  ],
  setup: function (editor) {
    editor.on('blur', function (e) {
      if (parseInt(ed.find('#editor_content').css('height')) > parseInt(json.text.h)) {
        alert('Attention ! Vous avez dépassé la hauteur limite! Un retour en arrière sera effectué');
        editor.undoManager.undo();
      }
    });
  }
});
+4
source share

Source: https://habr.com/ru/post/1607811/


All Articles