Textarea che può fare l'evidenziazione della sintassi al volo?

Question

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 un textarea o simile, pur rimanendo un semplice editor di testo (niente WYSIWYG o funzioni avanzate)?

Answer 1

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

Answer 2

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

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

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

• EditArea & # 8213; Demo come FileEditor chi è Yii Extension & # 8213; ( Licenza software Apache, BSD, LGPL )

    

  Ecco EditArea, un editor javascript gratuito per il codice sorgente. Permette di scrivere un codice sorgente ben formato con numerazione di riga, supporto per schede, ricerca & Amp; sostituisci (con regexp) e l'evidenziazione della sintassi live (personalizzabile).

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

    

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

• CodeMirror & # 8213; Una delle tante demo & # 8213; ( licenza MIT + opzionale supporto commerciale )

    

  CodeMirror è una libreria JavaScript che può essere utilizzata per creare un'interfaccia editor relativamente piacevole per contenuti simili a codice & # 8213; 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

• Ace Ajax.org Cloud9 Editor & # 8213; Demo & # 8213; ( Tri-licenza Mozilla (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 editore principale per Cloud9 IDE e il successore del progetto Mozilla Skywriter (Bespin).

Answer 3

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

Answer 4

Consiglierei EditArea per la modifica live di un'area di testo evidenziata dalla sintassi.

Answer 5

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

Devo andare con Bespin di Mozilla. È costruito utilizzando le funzionalità HTML5 (quindi è rapido 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 esso per rendilo un po 'più facile da usare con jQuery.

Answer 6

L'unico editor che conosco che 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 è proprio l'alfa Mozilla Jetpack Gallery (nella invia una pagina Jetpack) e potresti voler vedere come la includono.

C'è anche un post sul blog sull'incorporamento e il riutilizzo di Bespin editor che potrebbe esserti di aiuto.

Answer 7

Perché li rappresenti 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/

Answer 8

Puoi Evidenziare il testo in un <textarea>, usando un <div> posizionato con cura dietro di esso.

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