In che modo Google Documenti implementa il rich text editing?

Question

Ho appena finito di leggere la sezione sul rich text editing nei browser in Professional JavaScript per gli sviluppatori Web di Nicholas Zakas. Si dice che ci sono due modi per andare sull'implementazione di rich text editing:

1. iframe con designMode insieme di proprietà di on
2. o un elemento con contenteditable attributo

Quello che ho concluso da tali informazioni è che entrambe le tecniche hanno così tante incoerenze cross-browser che nessuno è davvero una soluzione affidabile.

Ispezionando il markup di Google Documento, tutto quello che vedo è un gruppo di nidificati div s.

Quindi, sono curioso, quale tecnica ha determinato Google come la più adatta per implementare il rich text editing?

Answer 1

Google Docs non utilizza né designMode né contentEditable. Ha il proprio motore di rendering scritto in Javascript. Dal loro blog post on it:

per aggirare questi problemi, il nuovo editor di documenti di Google non utilizzare il browser per gestire testo modificabile. Abbiamo scritto un nuovissimo editing engine di superficie e layout, interamente in JavaScript.

e

Di gran lunga la cosa più difficile l'editor fa è capire dove per disegnare il testo. Per questo, abbiamo creato un nuovo motore di layout. Ecco un esempio di come funziona il nuovo motore: dì che digiti la lettera "a". Notiamo che hai premuto il tasto 'a' e rispondi disegnando un singolo 'a' fuori campo. Misuriamo quindi la larghezza e l'altezza di tale 'a', combiniamo tali misure con la posizione xey del cursore e posizioniamo la 'a' nel punto corretto sullo schermo. Se sei nel mezzo di una parola, spingiamo i caratteri dopo il cursore. Se sei alla fine di una riga, l'editor sposta la tua parola alla riga successiva e spinge qualsiasi overflow alle linee dopo di essa.