En un elemento contenteditable en el que se ha insertado una lista con document.execCommand , ¿es posible crear el siguiente párrafo en la raíz del elemento editable y no dentro del contenedor de la lista?
Traté de secuestrar la tecla "enter" y jugar con la selección / rango, pero no logré lograr ese objetivo. El navegador parece agregar siempre el siguiente párrafo dentro del contenedor de la lista.
Por ejemplo:
<div contenteditable="true"> <div> <ol> <li>1</li> <li>focus -> user click enter here twice</li>da como resultado
<div contenteditable="true"> <div> <ol> <li>1</li> <li></li> </ol> <div>after clicking twice enter, focus is here and newly created div is a sibling of ol</div>pero me gustaria conseguir
<div contenteditable="true"> <div> <ol> <li>1</li> <li></li> </ol> </div> <div>after clicking twice enter, focus is here and newly created div finds place at the root</div> tenga en cuenta que mi objetivo es usar document.execCommand porque mi función necesita admitir deshacer/rehacer (y no estoy tan motivado para implementar una vez más mi propia pila personalizada de deshacer/rehacer).
Usa appendChild.
const mainDiv = document.querySelector('[contenteditable]'); const newDiv = document.createElement('div'); newDiv.textContent = 'foo'; mainDiv.appendChild(newDiv); <div contenteditable="true"> <div> <ol> <li>1</li> <li>focus -> user click enter here twice</li> </ol> </div> </div>Mi respuesta se basó en una solución que se encuentra aquí: ¿Cómo establecer la posición del cursor (cursor) en un elemento editable (div)?
No estoy seguro si esto es exactamente lo que estás buscando. Presionar enter dos veces seguidas colocará el cursor al final del texto "focus here" y lo colocará fuera del elemento OL.
var lastKey = null; document.querySelector('[contenteditable="true"]').addEventListener('keyup', e => { e.target.children[1]; if (e.key === 'Enter' && e.key === lastKey){ var range = document.createRange(); var sel = window.getSelection(); var el = e.target.children[1]; range.setStart(el.childNodes[0],el.childNodes[0].textContent.length); range.collapse(true); sel.removeAllRanges(); sel.addRange(range); } lastKey = e.key; }); <div contenteditable="true"> <div> <ol> <li>1</li> <li></li> </ol> </div> <div>focus here</div> </div>