Casella di testo avanzata Javascript HTML (IDE)

Question

Spero di creare un IDE in Javascript che si comporti in modo molto simile a Gmail, tranne per il fatto che lo stile cambierà automaticamente in base a ciò che digitano mentre digitano.La logica di questo non è quella in cui sto lottando.È così che Gmail ottiene la possibilità di modificare in un formato rich edit in html.Per quanto ne so, il controllo textarea non funziona in questo modo, quindi come fanno a simulare questa funzionalità?

Answer 1

Google per "contenuto modificabile" Provate a premere F7 a fine pagina HTML Edit Firefox direttamente :) Gmail utilizza frame all'interno di una pagina con contenteditable = "true".

Si veda anche Google Web Toolkit: http://code.google.com/docreader/#p=google-web-toolkit-doc-1-5&s=google-web-toolkit-doc-1-5&t=DevGuideWidgetGallery C'è widget di RichTextArea.

Answer 2

Non sono del tutto sicuro se questo è quello che vuoi dire, ma stai cercando un editor WYSIWYG in linea?

In questo caso mi permettono di raccomandare CKEditor , è abbastanza veloce, moderno e robusto.

È possibile trovare un elenco più ampio nel voce di Wikipedia corrispondente .

Si sarebbe probabilmente per personalizzare qualsiasi degli editori per essere in grado di modificare Mail (Non sarebbe in grado di lavorare con tutte le classi CSS predefiniti per esempio, in modo l'editor dovrebbe fare tutto lo stile definizioni direttamente nel tag), ma non dovrebbe essere un problema.

Answer 3

Scarica uno dei tanti sistemi open source che lo consentono e guarda come hanno fatto.
Fondamentalmente, collegano gestori di eventi al pulsante che a loro volta sanno come inserire "roba" nel punto in cui si trova attualmente il cursore nell'area di testo, OPPURE attorno all'area selezionata nell'area di testo.

Answer 4

Il mio voto è per ' EditArea ', che è nella lista di editor web based: Un altro Wikipedia .

Sono stato in grado di aggiungere in una pagina esistente con il più semplice di codice:

<script language="javascript" type="text/javascript" src="edit_area/edit_area_full.js"></script>
<script language="javascript" type="text/javascript" >
editAreaLoader.init({
  id: "my_textarea_id"   // ID of textarea to turn into syntax editor.
  , syntax: "php"
  , start_highlight: true
  , allow_resize: "both"
  , toolbar: "search, go_to_line, |, undo, redo, |, highlight, reset_highlight, word_wrap,|,syntax_selection"
  , min_height:150
  , min_width:400
});
</script>