Contexto:
Estoy trabajando en un editor WYSIWYG en el navegador en javascript vainilla, y es principalmente para uso personal. Sin embargo, el estándar document.execCommand está obsoleto y me gustaría trabajar para agregar negritas y cursivas en mi editor. Mi editor es un elemento <div> contenteditable y separa las líneas en <div> secundarios. Cuando se presiona la tecla Enter , se crea automáticamente un nuevo div en el que se está trabajando. Esa es la naturaleza de contenteditable .
El problema:
Parece que no puedo descifrar cómo mover el cursor más allá del elemento en el que se encuentra. Lo que quiero hacer es obtener el elemento, cerrarlo y pasar a uno nuevo. La forma en que supongo que hacer esto es agregar </div><div> al innerHTML del elemento actual y mover el cursor más allá con Selection.Modify , pero eso no parece funcionar.
Si fuera el final del archivo, simplemente agregaría las etiquetas y movería el cursor hasta el final, pero necesito que funcione dentro del contexto.
Mi código:
<div id="editor"> <div>foo</div> <br> <div>bar</div> <br> <div>foobar</div> <!-- cursor^ ^where it should be --> </div> //get working element if that helps let element = window.getSelection().anchorNode.parentElement; //useful tool for debugging //insert text works fine, but can't figure out how to insert element tags into innerHTML function insertText(text){ let selection = window.getSelection(); //get selection let range = selection.getRangeAt(0); //get range range.deleteContents(); //clear gunk let node = document.createTextNode(text); //create a node to append. Problem starts here. range.insertNode(node); //insert the node at the cursor for(let char of text) selection.modify('move','left','character'); //move cursor past inserted text }Si puedes ayudar en algo, te lo agradecería mucho.
Tenía un problema diferente. Lo que estoy trabajando agrega envoltorios a las palabras cuando se encuentran palabras específicas. El problema era que si hacía clic al final de la palabra marcada, el signo de intercalación estaba dentro del elemento envuelto y si continuaba escribiendo, las nuevas palabras mantenían el estilo de envoltorio.
Entonces, esto no es lo que quieres exactamente, pero espero que te ayude.
La mejor de las suertes.
function clickOutside(){ var nodes = textarea.querySelectorAll("mark"); for (let n of nodes){ n.addEventListener("click", function (event){ if(!n.classList.contains("clicked")){ co(n); n.classList.add("clicked"); } else if (n.classList.contains("clicked")){ n.classList.remove("clicked"); } }) } } //relavent part function co(node){ var el = node var range = document.createRange(); var sel = window.getSelection(); range.setStart(el.nextSibling, 0); range.collapse(true); sel.removeAllRanges(); sel.addRange(range); el.focus(); }