Come si visualizzano gli stili in una textarea HTML
https://stackoverflow.com/questions/245507
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Sto cercando di aggiungere stili diversi all'interno di un'area di testo, ad esempio grassetto, colori diversi ecc.
Gli editor WYSIWYG (ad es. tinyMCE) usati nelle pagine Web in genere lo fanno, ma ho problemi a capire come lo fanno.
Non puoi farlo:
alt text http://www.yart.com.au/test/html.gif
Quindi come lo raggiungono?
Soluzione
Owen ha l'idea giusta. Queste librerie sostituiscono l'area di testo con un iframe e quindi mettono il documento dell'iframe in modalità designMode o contentEditable. Ciò ti consente letteralmente di modificare il documento html nell'iframe mentre il browser gestisce quindi il cursore e tutte le sequenze di tasti per te e ti dà un'API che può essere chiamata per apportare modifiche di stile (grassetto, corsivo e così via). Quindi quando l'utente invia il modulo copiano innerHTML dall'iframe nell'area di testo originale. Per maggiori dettagli su come abilitare questa modalità e cosa puoi fare con essa vedi: https: // developer.mozilla.org/En/Rich-Text_Editing_in_Mozilla
Tuttavia, il mio suggerimento per te è di utilizzare una delle librerie di controllo rich text esistenti se desideri questa capacità sul tuo sito. Ne ho costruito uno in precedenza e ho scoperto che passerai enormi quantità di tempo a gestire le incoerenze del browser per ottenere qualcosa che funzioni bene. Oltre alle differenze nel modo in cui abiliti le funzioni di modifica, vorrai anche normalizzare l'html che viene creato. Ad esempio, IE crea <br> elementi quando l'utente preme invio e FF crea <p> tag. Per i cambiamenti di stile, IE utilizza <b>, <i>, ecc. Mentre FF utilizza span con attributi di stile.
Altri suggerimenti
Di solito sovrappongono l'area di testo con il proprio componente di visualizzazione come un div. Mentre l'utente digita, javascript prenderà il contenuto digitato e applicherà gli stili nell'area di visualizzazione. Il valore di textarea è il testo con i tag html necessari per renderlo nello stile specificato. Così visibilmente l'utente vede il testo in stile.
Questa è ovviamente una spiegazione semplificata.
Credo che tinymce usi specificamente una tabella / iframe per scopi di visualizzazione (che viene sostituito al posto della textarea esistente). Quando sei pronto per salvarlo, copia tutte le informazioni nell'area di testo per l'elaborazione.
