Redattori Rich Text di JavaScript

Question

Esistono diversi editor Web (molto buoni) per il rich text scritti in Javascript (ad es. FCKeditor, YUI Texteditor e molti altri).

Tuttavia non sono riuscito a trovare alcun tutorial su come costruire un componente del genere. Qualcosa che spiegherebbe considerazioni di alto livello (architettura) e / o maggiori dettagli in basso "critico". punti (cioè perché la maggior parte degli editor là fuori usano iFrame, come gestite l'input da tastiera come Ctrl-B, Ctrl-C quando il testo è selezionato e quando non lo è ecc.)

La mia motivazione principale è la curiosità; se dovessi sviluppare un tale editor oggi non saprei da dove cominciare.

Qualcuno conosce qualche tutorial che copre i problemi di cui sopra (idealmente, qualcosa che spiega come creare un editor wysiwyg da zero)?

Answer 1

Dopo ulteriori ricerche ho trovato quanto segue. La funzionalità per la creazione di un editor Rich Text è già implementata nel browser. IE è stato il primo a creare una tale API e Firefox l'ha replicata.

Panoramica

Il punto principale è che l'oggetto javascript " document " ha una proprietà chiamata designMode che può essere impostata su " on " ;. Ciò converte tutta la pagina in un componente simile a textarea. Immagina che il browser apra la pagina allo stesso modo di MS-Word: l'utente può vedere la formattazione ma può anche digitare la pagina (normalmente il browser apre una pagina in sola lettura).

window.document.designMode = "On";

Poiché quanto sopra riguarda tutta la pagina Web, la maggior parte degli editor utilizza iFrame in modo che l'area modificabile sia solo l'iFrame che ha il proprio oggetto documento.

Inoltre, c'è un'API che consente un facile accesso javascript allo stile. Questo è esposto attraverso il metodo execCommand (). Ad esempio, puoi chiamare da Javascript

document.execCommand('bold', false, '');

e il testo selezionato diventerà in grassetto.

Esercitazioni

Ho trovato quanto segue:

Una breve guida dettagliata guida .

A mozilla guida . Ha il riferimento API più conveniente che ho trovato e anche alcuni altri collegamenti.

Una guida di microsoft .

Answer 2

Usa la tua curiosità per motivarti ad aprire il codice sorgente nel tuo editor preferito e iniziare a esplorare. Poiché questi editor sono scritti in JavaScript, le risposte sono gratuite per la ricerca.

Mi rendo conto che stai cercando qualcosa di più facilmente digeribile, ma leggere il codice sorgente può essere molto gratificante.

Iniziare a creare un editor potrebbe essere semplice come prendere un editor open source esistente e modificarlo per soddisfare le proprie esigenze speciali.