Estoy tratando de escribir un editor donde el usuario pueda tener elementos estáticos contenteditable="false" dentro de un div contenteditable="true" . Por ejemplo, para tener una imagen o un enlace dentro de un texto fluido. He visto a editores hacer esto donde los elementos estáticos se pueden seleccionar con flechas clave. Si se para en el lado izquierdo del elemento estático y presiona la flecha derecha, entonces se selecciona el elemento estático, que puede indicarse con un borde alrededor. Un ejemplo de esto es el editor trix .
¿Cómo se logra esto? El comportamiento predeterminado es que el símbolo de intercalación salte sobre el elemento estático, como se muestra en este código jsfiddle , que también se muestra a continuación:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> </head> <body> <div contenteditable="true"> foo <span contenteditable=false> block 1 </span> bar </div> </body>