2012-01-06 14 views
10

Pensé que sería interesante rodar mi propio editor de texto a la Google Docs, puramente por curiosidad, por supuesto (nada que ver con la reinvención de la rueda). Me he estado preguntando cómo las aplicaciones como Docs y Zoho Writer pueden obtener un diseño avanzado como separar el texto en diferentes páginas o mantener los encabezados junto con su contenido, ya sabes, cosas como editores como TinyMCE o nicedit no funcionarán. Estoy al tanto de utilizar designMode y contenteditable, y he escuchado a personas que usan lienzos, pero ¿hay una mejor manera? ¿Cómo lo gestionan las suites de escritorio como MS o LibreOffice? ¿Se divide especialmente el contenido en páginas discretas mientras se editan?procesador de textos Javascript/editor (o, arquitectura Google Docs)

En una nota lateral, ¿alguien sabe cómo funciona el nuevo Google Docs? No parece usar contenteditable (Zoho usa designMode), ni lienzo. Por lo que encontré, solo se trata de una jerarquía muy profunda de <div> s.

+1

que no se sorprendería si se acaba de coger la entrada de teclado/ratón con JavaScript y el DOM cambian según el caso. Dicho eso, supongo que sin nada que me respalde y soy demasiado vago para investigarlo. –

+2

Google nunca deja de sorprenderme con las formas creativas que tienen de anidar etiquetas para crear todas sus animaciones y editores. –

+1

Tikkon, pensé en eso. Parece una gran molestia atravesar capturando cada tecla alfanumérica, más modificadores. Me pregunto si eso implicaría algún tipo de penalización de rendimiento. En una nota lateral, después de rastrear el DOM Sospecho que el cursor en Docs es en realidad un elemento DOM parpadeante. La mente estalla, ¿alguien? – Art

Respuesta

3

su 'asunto' es un poco de todo, pero voy a tratar de ayudarle a salir un poco:

Google Docs utiliza una iframe oculto (no display:none, es sólo que el usuario no puede ver realmente it) con un cuerpo con contenido editable (.docs-texteventtarget-iframe); cuando ve el cursor parpadeando significa que el cuerpo editable está enfocado y todo lo que escribe se inserta en el DOM (después de desinfectar caracteres HTML especiales)

Google Docs, como dije, está utilizando la modificación DOM (no canvas o svg); incluso el cursor está un poco parpadeando div.

TinyMCE utiliza una técnica similar pero con un campo de entrada (en lugar de un cuerpo de contenido editable)

+0

Punto tomado - Aclaré la pregunta. Es una solución bastante elegante: supongo que las pulsaciones de teclas se capturan y, en función de una máquina de estados finitos, se toman medidas como aplicar formatos o insertar caracteres. – Art

+0

El evento no se captura realmente en el sentido técnico, todo está escrito en el cuerpo (o entrada en TinyMCE) e inmediatamente después se copia el carácter al "documento" y se borra el cuerpo/entrada. Eso es porque capturar el evento conduce a inconsistencias en la interpretación de los códigos clave (diferentes navegadores/configuraciones). –

+0

¿Por qué uno no prefiere editar el cuerpo en sí, si los eventos no se capturan de esa manera? – Art

Cuestiones relacionadas