Estoy tratando de configurar algunos emoji en un div editable usando el rango de javascript. Pero después de insertar el nuevo nodo de emoji, el símbolo de intercalación se establece antes del nuevo emoji y no después. Probé la siguiente solución:
Insertar símbolo de intercalación después de un nodo insertado
pero no hubo suerte, aquí abajo está el código que estoy usando:
var sel, rng; if (window.getSelection) { rng = document.createRange(); sel = window.getSelection(); if (sel.getRangeAt && sel.rangeCount) { console.log(sel); rng = sel.getRangeAt(0); rng.deleteContents(); rng.insertNode( curemji ); rng.setStartAfter(curemji); rng.collapse(false); sel.removeAllRanges(); sel.addRange(rng); } } else if (document.selection && document.selection.createRange) { document.selection.createRange().text = emoji; }¿alguien puede ayudarme a entender lo que estoy haciendo mal?
Parece que estuviste bastante cerca, hice un cambio para usar un nodo de texto y lo hice funcionar:
rng.insertNode( curemji ); rng.setStartAfter(curemji);A:
var textNode = document.createTextNode(curemji); rng.insertNode(textNode); rng.setStartAfter(textNode);También incluí un ejemplo completo usando jQuery, nota al margen para cualquiera que use Quill , manipulará cualquier html ingresado, por lo que esto no funcionará, terminé usando la extensión Quill Emoji para obtener el comportamiento que quería.
$('.insert-character:first-of-type').click( function(e) { insertTextAtCursor($(".editor p")[0], "😀"); }); $('.insert-character:nth-of-type(2').click( function(e) { insertTextAtCursor($(".editor p")[0], "😎"); }); $('.insert-character:nth-of-type(3').click( function(e) { insertTextAtCursor($(".editor p")[0], "👍"); }); function insertTextAtCursor(el, text) { var sel = window.getSelection(); var range = sel.getRangeAt(0); if (el.contains(range.startContainer) && el.contains(range.endContainer)) { //Check if cursor is in desired element range.deleteContents(); textNode = document.createTextNode(text); range.insertNode(textNode); sel.removeAllRanges(); range.collapse(); sel.addRange(range); sel.collapseToStart(); } else { el.append(text); } } .editor { height: 1rem; margin-bottom: 5px; padding: 8px 15px; font-size: 1rem; border: 1px solid black; width:300px; } .editor p { margin: 0; } <body> <div class="container"> <div class="editor" contenteditable="true" data-placeholder="Send Message"> <p><br></p> </div> </div> <button class='insert-character'>😀</button> <button class='insert-character'>😎</button> <button class='insert-character'>👍</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script>