Textarea che può evidenziare la sintassi al volo?

Sto memorizzando un numero di blocchi HTML all'interno di un CMS per motivi di manutenzione più semplice. Sono rappresentati da <textarea>s.

Qualcuno conosce un widget JavaScript di qualche tipo che può fare l'evidenziazione della sintassi per HTML all'interno di uno textareao simili, pur rimanendo un semplice editor di testo (niente WYSIWYG o funzioni avanzate)?

Non è possibile raggiungere il livello richiesto di controllo sulla presentazione in una textarea regolare.

Se sei d' accordo , prova CodeMirror o Ace (precedentemente skywriter e bespin ) o Monaco (utilizzato in MS VSCode).

Dal thread duplicato - un link wikipedia obbligatorio: http://en.wikipedia.org/wiki/Comparison_of_JavaScript-based_source_code_editors

Ecco la risposta che ho fatto a una domanda simile ( Editor di codice online ) sui programmatori :

Innanzitutto, puoi dare un'occhiata a questo articolo:
Wikipedia - Confronto tra gli editor di codice sorgente basati su JavaScript .

Per di più, ecco alcuni strumenti che sembrano adattarsi alla tua richiesta:

• EditArea - Demo come FileEditor che è un'estensione Yii - ( Licenza software Apache, BSD, LGPL )

  Ecco EditArea, un editor javascript gratuito per il codice sorgente. Permette di scrivere codice sorgente ben formattato con numerazione di riga, supporto per schede, ricerca e sostituzione (con regexp) ed evidenziazione della sintassi live (personalizzabile).

• CodePress - Demo di Joomla! CodePress Plugin - ( LGPL ) - Non funziona in Chrome e sembra che lo sviluppo sia cessato.

  CodePress è un editor di codice sorgente basato sul web con l'evidenziazione della sintassi scritta in JavaScript che colora il testo in tempo reale mentre viene digitato nel browser.

• CodeMirror - Una delle tante demo - ( licenza stile MIT + supporto commerciale opzionale )

  CodeMirror è una libreria JavaScript che può essere utilizzata per creare un'interfaccia editor relativamente piacevole per contenuti simili a codici: programmi per computer, markup HTML e simili. Se è stata scritta una modalità per la lingua che stai modificando, il codice verrà colorato e l'editor ti aiuterà facoltativamente con il rientro

• Editor Ace Ajax.org Cloud9 - Demo - ( Mozilla tri-licence (MPL / GPL / LGPL) )

  Ace è un editor di codice autonomo scritto in JavaScript. Il nostro obiettivo è creare un editor di codice basato sul Web che corrisponda ed estenda le funzionalità, l'usabilità e le prestazioni degli editor nativi esistenti come TextMate, Vim o Eclipse. Può essere facilmente incorporato in qualsiasi pagina Web e applicazione JavaScript. Ace è stato sviluppato come editor principale per Cloud9 IDE e successore del progetto Mozilla Skywriter (Bespin).

CodePress fa questo, così come EditArea . Entrambi sono open source.

Consiglierei EditArea per l'editing live di un'area di testo evidenziata dalla sintassi.

Aggiornamento: Bespin è ora ACE, che è menzionato dalla risposta con il punteggio più alto qui. Utilizzare invece ACE.

Devo andare con Bespin di Mozilla. È costruito utilizzando le funzionalità HTML5 (quindi è veloce e veloce, ma non supporta i browser legacy), ma sicuramente incredibile da usare e batte tutto quello che ho incontrato - probabilmente perché Mozilla lo supporta e sviluppano Firefox così sì. .. C'è anche un plugin jQuery che contiene un'estensione per renderlo un po 'più facile da usare con jQuery.

Puoi evidenziare il testo in a <textarea>, usando un <div>posto accuratamente posizionato dietro di esso.

controlla Evidenzia testo all'interno di un'area di testo .

L'unico editor che conosco ha l'evidenziazione della sintassi e un fallback a un'area di testo è Mozilla Bespin . Google in giro per l'inclusione di Bespin per vedere come incorporare l'editor. L'unico sito che conosco che utilizza questo in questo momento è la galleria Mozilla Jetpack alfa (nella pagina di invio di un Jetpack) e potresti voler vedere come lo includono.

C'è anche un post sul blog sull'incorporazione e il riutilizzo dell'editor Bespin che potrebbe esserti utile.

Perché li stai rappresentando come textareas? Questo è il mio preferito:

http://alexgorbatchev.com/wiki/SyntaxHighlighter

Ma se stai usando un CMS, probabilmente c'è un plugin migliore. Ad esempio, wordpress ha una versione evoluta:

http://www.viper007bond.com/wordpress-plugins/syntaxhighlighter/