In che modo html viene generato dal testo che l'utente inserisce in un editor wysiwyg?

Mentre scrivo questo, vedo il mio testo comparire in un editor WYSIWYG. Ora è sicuro che ci sia una casella di testo non WYSIWYG sopra con un cursore lampeggiante che è un po 'di distrazione, ma tutto sommato è ancora un editor WYSIWYG.

Perché? Perché OGNI KEYSTROKE mi porta a vedere esattamente come verrà visualizzato. Questa è la salsa segreta. Devi costruire il display finale abbastanza velocemente da mostrarlo in modo pulito tra i tasti. Ogni keypress è una submission da elaborare.

Ora ci sono alcune piccole complicazioni come quando l'utente decide di non volere testo in corsivo e ha bisogno in qualche modo di cancellare i tuoi codici in corsivo. Alcuni editor (come Wikipedia) consentono di passare da WYSIWYG a una modalità di testo non elaborata che mostra i codici. Altri non lo fanno (come la parola MS) che causa confusione. Altri ancora come StackExchange mostrano entrambi allo stesso tempo.

La cosa importante che li rende tutti WYSIWYG è la dimostrazione del risultato su ogni tasto.

Dovrai distinguere tra una rappresentazione interna di come il contenuto modificato è memorizzato e una rappresentazione visualizzata:

• nella rappresentazione interna i caratteri testuali sono memorizzati come caratteri standard e altre cose come inizio e fine della formattazione in grassetto, underscore, collegamenti ecc. inclusi come caratteri meta . Quindi potrebbe esserci un meta-carattere per "inizio di grassetto", uno per "fine-di-grassetto", uno per "inizio di collegamento" (con un indirizzo di collegamento associato) ecc. Le interruzioni di riga possono contare come caratteri standard invisibili.

• la rappresentazione visualizzata è ciò che gli utenti vedono nell'editor WYSIWYG. Si noti che gli indici di posizione (ad esempio, per ricordare la posizione del cursore di inserimento o la selezione corrente) si riferiscono solo ai caratteri non meta visualizzati. Ogni volta che la rappresentazione interna cambia, la rappresentazione visualizzata (o le relative parti di essa) devono essere visualizzate immediatamente.

• la rappresentazione HTML è, nel tuo scenario, probabilmente qualcosa che gli utenti otterranno "su richiesta", quando chiedono di esportare il contenuto in quel formato.

Il problema che devi risolvere è come gli utenti possono manipolare la rappresentazione del testo interno senza vederla realmente. Tutto ciò che vedono è la rappresentazione visualizzata e forse un cursore di inserimento. Selezionando un testo e scegliendo un comando come "format bold" dal menu, l'editor può facilmente inserire i meta caratteri richiesti o rimuoverli quando diventano obsoleti. Quando aggiungi del testo, aggiungi caratteri standard nel punto in cui si trova il cursore di inserimento. Quando elimini il testo, controlla se i meta caratteri diventano superflui (come "inizia grassetto" immeditale seguito da "end bold"), quindi puoi rimuoverli anche tu.

Questo è solo uno schema approssimativo, nulla di completo, ma spero che tu abbia un'idea generale.