2012-05-09 18 views
9

È davvero una grande funzionalità dell'interfaccia utente che posso modificare le mie liste al clic senza pulsanti specifici. Sembra un grande editor wysiwyg con link e tag evidenziati. Quale tecnica js usano? Contenteditable per lo spionaggio e quindi textarea per la modifica?In che modo workflowy ha implementato la modifica in linea?

+0

Workflowy sembra richiedere un account utente per vederlo in azione. –

risposta

27

Sono uno dei due ragazzi che costruisce WorkFlowy. Quando sposti il ​​mouse sulla pagina, abbiamo un'area di testo opacity:0 che viene posizionata sul testo per l'oggetto che stai passando sopra in qualsiasi momento. Ha esattamente lo stesso contenuto e la stessa formattazione del contenuto sottostante.

Quando si fa clic, l'area di testo viene messa a fuoco e viene creata opacity:1 e il contenuto viene imitato da opacity:0. Quindi quando digiti, sincronizziamo il contenuto tra la textarea e il contenuto di destinazione. Probabilmente ci sposteremo in un'area di testo completamente invisibile in futuro, poiché ciò consentirà la modifica di testo avanzato. Questo è ciò che fanno molti IDE basati su HTML.

+3

Grazie Jesse per la risposta e per il flusso di lavoro! Buon lavoro! –

+0

Hah, e ho passato ore a debuggirlo :) Grazie mille! – fjdumont

+1

Perché non usi contenteditable? – eloone

Problemi correlati