How to exit ancestress blocks in TinyMCE editor?

Author: Omar Shamali

Writing Date: 2023-12-27

Go to your initialization or caller block of TinyMCE, which is where you have

tinymce.init({})

Usually it contains your configuration, to add the functionality of exiting ancesstor blocks like divs or other parents, add this at the begining (or anywhere) of the initialization block of TinyMCE, example:

tinymce.init({
// keep_styles: false,
// inline:false,
init_instance_callback: function (editor) {
editor.on('KeyDown', function (e) {
if(e.keyCode == 27) {
let editor = tinyMCE.activeEditor
const dom = editor.dom
const parentBlock = tinyMCE.activeEditor.selection.getSelectedBlocks()[0]
const containerBlock = parentBlock.parentNode.nodeName == 'BODY' ? dom.getParent(parentBlock, dom.isBlock) : dom.getParent(parentBlock.parentNode, dom.isBlock)
let newBlock = tinyMCE.activeEditor.dom.create('p')
newBlock.innerHTML = '';
dom.insertAfter(newBlock, containerBlock)
let rng = dom.createRng();
newBlock.normalize();
rng.setStart(newBlock, 0);
rng.setEnd(newBlock, 0);
editor.selection.setRng(rng);
}
});
},
});

Note: This is tested on TinyMCE 5.10.3