Creación de un área de texto falso

Question

Para un proyecto que estoy trabajando, tengo que ser capaz de mostrar "divs" antes de que los contenidos de texto de un área de texto:

Al principio pensé que sólo podía coloque los divs con posicionamiento absoluto y z-index, pero eso implicaría "presionar" el texto, y asegurarse de que el usuario no pueda eliminar esos primeros espacios, no con retroceso ni Ctrl + C ni Ctrl + x ni eliminar. Parecía complicado llegar de todas las formas posibles.

ahora, estoy tratando de utilizar un "div" hecho para parecerse a un área de texto, que contiene un editable "span" que contendrá el texto:

que trabaja para el momento, pero no es perfecto, especialmente en términos de: foco (hacer clic en cualquier lugar en el div externo debería mostrar el cursor en el espacio de texto *), y parece romperse si vacío el lapso de texto.

¿Alguna idea sobre cómo solucionar esto? Estoy abierto a sugerencias, incluso si tengo que cambiar la estructura de mi texto falso.

Debería funcionar en todos los navegadores principales (recientes), y puede usar jQuery.

• $('#outerDiv').bind('click', $('#outerDiv span.text').focus()); parece funcionar en Chrome, pero no en Firefox.

Answer 1

Lo que me hago es la siguiente:

1. Su elemento que contiene (el editor de texto) debe ser un elemento de bloque. No es editable
2. Sus etiquetas deben constar de lo siguiente: Un contenedor que float s a la izquierda y inline-block o float ed children.
3. A bloque no flotante elemento de nivel (importante) que es contenteditable.

Resultado final:

<div> 
    <!-- The list of tags --> 
    <ul style="float:left"> 
    <li style="float:left">...</li> 
    <li style="float:left">...</li> 
    <li style="float:left">...</li> 
    </ul> 
    <!-- This will contain your text: --> 
    <div contenteditable="true">...</div> 
</div> 

Si usted tiene una gran cantidad de etiquetas, que van a envolver a la línea siguiente. El texto en el elemento editable se ajustará también a las etiquetas.

Al hacer clic en las etiquetas no se daría el elemento editable, pero se puede remediar con JavaScript.

Here's an example I whipped up. Funciona en Safari/Chrome/Firefox. No he probado Internet Explorer, pero debería funcionar bien.