Estoy buscando una solución y rascándome la cabeza durante 3 días para obtener la solución para esto, pero no puedo lograrlo,
Supongamos que tengo p contenteditable como este
<p contenteditable="true">Hello There <span class="link">Google</span></p>Ahora lo que quiero es que, cuando el usuario navegue por el símbolo de intercalación dentro de esta etiqueta p, debería tratar todo el intervalo como un solo carácter, es decir
Cuando el símbolo de intercalación está al final del texto "Google" y el usuario presiona la tecla de flecha izquierda, el símbolo de intercalación debería estar al principio de "Google" y viceversa
Cuando el signo de intercalación está al final del texto "Google", y el usuario ingresa cualquier texto que no debe estar dentro de la etiqueta de intervalo, el elemento principal del texto debe ser la etiqueta p y viceversa
Encontré la pregunta similar aquí.
En un elemento editable, mueva el cursor entre las etiquetas HTML
Pero no encontró la respuesta.
También traté de hacer esto obteniendo y estableciendo la posición de intercalación, pero fallé,
Cualquier sugerencia sería muy apreciada.
Proporcionar contenteditable="false" a la etiqueta span anidada, haría que span nuevamente no se pueda editar, y carat simplemente contará esto como una sola palabra y pasará a los siguientes caracteres. Espero que esto sea lo que estás buscando.
<p contenteditable="true">Hello There <span contenteditable="false" class="link">Google</span>, this part is again editable.</p>