htmltinymceparagraph

Tinymce change p tag to div


and i have an issue i want that enter (which creates a big space because it makes a p tag) to work as shift + enter. And I made it work with

 force_br_newlines: true,
 force_p_newlines: false,
 forced_root_block: false,

But when you use shift + enter it makes it part as the same paragraph as abovee, which I don't want. I want that each enter to work like a br and also be considered it's own paragraph.

there are may failed attempts:

 forced_root_block: 'div',
  setup: function(editor) {
    editor.on('PostProcess', function(ed) {
        ed.content = ed.content.replace(/(<p>)/gi,'<div>').replace(/(<\/p>)/gi,'<\/div>');
    });
  },
  newline_behavior: 'linebreak',
 force_br_newlines: true,
 force_p_newlines: false,
  forced_root_block: false,
  newline_behavior: 'block',  
  convert_newlines_to_brs: true,
  force_br_newlines: true,
  force_p_newlines: false,
  setup(ed: { on: (arg0: string, arg1: (event: any) => void) => void }) {
    ed.on('KeyDown', (event) => {
      if (event.shiftKey && event.keyCode == 13) {
        event.execCommand('mceInsertContent', false, '<br><br>');
        //event.dom.Event.cancel(event);
        alert('shift enter key');
        return;
      }
      if (event.keyCode == 13 && !event.shiftKey) {
        event.execCommand('mceInsertContent', false, '<br>');
        //event.dom.Event.cancel(event);
        alert('enter key');
        return;
      }
    });
  },

Solution

  • When you say...

    "I want that each enter to work like a <br> and also be considered it's own paragraph"

    ...you are asking for two things that cannot happen together. A line break by definition does not create a new block element like a paragraph so if you insert a <br> you are not semantically creating a new block.

    If the core issue you want to address is that the spacing around a paragraph is too large for your needs you would be better off using CSS to reduce the margin and/or padding around paragraphs.

    At the extreme you could do this:

    p {
      margin:0;
    }
    

    ...which takes away all of the margin around the paragraphs.