2009-08-05 9 views
22

Sto cercando un plug-in jQuery che visualizzerà un'area di testo per la modifica HTML &.Plugin jQuery per editor HTML con colorazione della sintassi

Le cose che sto cercando:

  1. deve supportare l'authoring HTML, non è una rappresentazione WYSIWYG
  2. Deve colorare il codice HTML durante la digitazione di qualsiasi IDE rich client avrebbe fatto.
  3. Dovrebbe essere jQuery, ma anche il JS nativo andrebbe bene.

Ho suonato con MarkItUp che mi ottiene il 90% ma non offre la colorazione della sintassi. E WYMeditor, per quanto posso dire, non ha alcuna opzione per "visualizzazione codice" ed è invece solo una vista WYSIWYG.

Qualcuno là fuori ha fatto qualcosa del genere in passato?

risposta

44

Utilizzare CodeMirror. È l'evidenziatore utilizzato da Google per lo their API playground.

ho provato e funziona bene, e secondo il loro sito funziona nei seguenti browser:

  • Firefox 1.5 o superiore
  • Internet Explorer 6 o superiore
  • Safari 3 o superiore
  • Opera 9.52 o superiore
  • Chrome

Non capisco perché menzioni jQuery in questo caso, poiché jQuery non ha nulla di rilevante per ciò che devi fare, oltre al suo motore di selezione che potrebbe essere usato per trovare la casella di testo che vuoi abilitare l'evidenziazione della sintassi per (anche se tu inserire È meglio andare con una libreria autonoma appositamente progettata per risolvere l'attività in corso (che è CodeMirror). Si otterrà un id. le massime prestazioni e sarà molto più gestibile dagli sviluppatori, garantendo una migliore qualità del codice.

+14

+1 per CodeMirror e un +1 virtuale per aver menzionato che jQuery non è la soluzione a tutti i problemi. – Boldewyn

+6

Concordo sul fatto che jQuery non sia la soluzione a tutti i problemi, ma la richiesta di una soluzione jQuery potrebbe implicare 1) il dev "sa" jQuery, quindi se devono personalizzarlo, si sentiranno più a loro agio. 2) da zero a minima configurazione 3) jQuery astrae le differenze tra browser, quindi come sviluppatore potresti sentirti più "sicuro" del fatto che il plug-in sia supportato da browser più completo rispetto a una soluzione nativa pura. –

5

si dovrebbe anche dare un'occhiata a EditArea

Non usa jQuery, ma non sarà in conflitto con esso sia.

5

Ho anche utilizzato Codemirror al kodingen.com ora è koding.com, Codemirror è scritto molto bene, è possibile ottenere il codice sorgente e modificarlo in base alle proprie esigenze.

Ma è anche possibile controllare lo amyeditor è anche molto avanzato e supporta più lingue rispetto a codemirror. Puoi anche ottenere il codice sorgente da github.

Speranza che aiuta ...

1

Devo andare con Bespin da Mozilla. E 'costruito usando le funzionalità HTML5 (quindi è veloce e veloce, ma non supporta i browser legacy), ma sicuramente sorprendente da usare e batte tutto quello che ho incontrato - probabilmente perché Mozilla lo supporta e sviluppano Firefox quindi sì. ..C'è anche un jQuery Plugin which contains a extension for it per renderlo un po 'più facile da usare con jQuery.

+0

[Bespin è ora chiamato Skywriter] (https://mozillalabs.com/en-US/skywriter/) – aggsol

+0

@CodeClown e Skywriter è ora chiamato Ace (stesso link sorgente come il tuo ...) - strana correzione da fare. .. – balupton

4

Dai uno sguardo a Ace, in cui Mozilla ha unito le sue azioni Skywriter/Bespin. Supporta oltre 60 lingue con l'evidenziazione della sintassi del codice lato client. Il codice sorgente è aperto e disponibile su github.

Problemi correlati