Estoy tratando de configurar/pegar una imagen en la posición actual del cursor/marca de intercalación. Estoy usando un div
que tiene contenteditable
establecido en true
. Aquí está la parte HTML:
<div class="container"> <div class="row"> <div class="col"> <nav></nav> </div> </div> <div class="row d-flex justify-content-center"> <div id="editor" class="col-md-6" contenteditable="true"></div> </div> </div>
Así es como se establece el css:
#editor { height: 88vh; font-size: 0.8em; }
Estoy usando una función de javascript que encontré en otra publicación de StackOverflow para obtener la posición actual del símbolo de intercalación.
function getCaretPosition() { var x = 0; var y = 0; var sel = window.getSelection(); if (sel.rangeCount) { var range = sel.getRangeAt(0).cloneRange(); if (range.getClientRects()) { range.collapse(true); var rect = range.getClientRects()[0]; if (rect) { y = rect.top; x = rect.left; } } } return { x: x, y: y, }; }
Estoy usando esta función dentro de un detector de eventos de pulsación de tecla para capturar cuándo pegar la imagen. La idea es pegar cuando el usuario presiona Ctrl + q, por ejemplo.
editor.addEventListener( 'keydown', (event) => { const keyName = event.key; if (keyName === 'Control') { return; } if (event.ctrlKey) { if (keyName == 'q') { var image = document.createElement('img'); image.src = 'img/bird.jpg'; image.style.width = '200px'; image.style.position = 'absolute'; image.style.top = getCaretPosition().y; image.style.left = getCaretPosition().x; editor.appendChild(image); } } }, false );
Ahora suceden las siguientes cosas:
Quiero que pueda pegar la esquina superior e izquierda de la imagen en la posición actual del símbolo de intercalación. Si hay textos, entonces es deseable moverlos/cambiarlos después de la imagen, como si estuvieran haciendo espacio para la imagen.
Gracias por cualquier idea.