Hitting [return] after a div in TinyMCE creates another div. Do you know why and how to stop it?

Question

Default behavior of TinyMCE is that if I hit return at the end of a heading , it creates a new p , but if I hit return at the end of a div , it creates another div .

headings and divs are both block elements, and seem to have the exact same settings in tinyMCE defaults, so I don't understand why this happens, and I don't find a way to make it behave differently. I need the div to behave just like the h1 .

Code pen: https://codepen.io/jacoping/pen/QWjQNxZ

Does anybody have a clue about why the div is behaving in such a way?

Answer 1

In tinyMCE.init , add forced_root_block: 'p' . This will always insert p elements when you press enter.

As to why this was happening: Most users are more likely to insert a p after a h1 , and are more likely to insert a div after another div . The program is being 'clever' and inserting the element that it thinks you're most likely to use next.

Answer 2

When you press ENTER after a heading, the behavior that word processors use (and people expect) is that you "leave" the heading and return to a normal block. In word processors that is a regular paragraph ( <p></p> ).

TinyMCE mimics this behavior so when you press enter leaving a heading (or a list or a table, etc) it creates a "default root block".

A div is another type of default root block - just not one people choose to use often. If you press enter at the end of a <p> or a <div> TinyMCE will simply give you another one of the same root block elements.

If you want to revert back to a paragraph when pressing enter at the end of the <div> you can use the styleselect dropdown to do that by selecting a different Block from the list. In your example you have

style_formats: [
  { title: 'H1', block: 'h1' },
  { title: 'DIV', block: 'div' },
]  

...which overrides the normal options in the list and removes any opportunity you have to switch to another block option like paragraph. If you comment out that part of the configuration your select list will include a variety of block options so you can switch back to a paragraph.