Textarea qui peut faire de la coloration syntaxique à la volée ?

Question

Je stocke un certain nombre de blocs HTML dans un CMS pour des raisons de facilité de maintenance. Ils sont représentés par <textarea> s.

Quelqu'un connaît-il une sorte de widget JavaScript qui permet de mettre en évidence la syntaxe du langage HTML dans une page Web ? textarea ou similaire, tout en restant un éditeur de texte simple (pas de WYSIWYG ou de fonctions avancées) ?

Answer 1

Il n'est pas possible d'atteindre le niveau de contrôle requis sur la présentation dans un système régulier. textarea .

Si vous êtes d'accord avec ça, essayez CodeMirror o Ace ou Monaco (utilisé dans MS VSCode).

Depuis le fil de discussion dupliqué - un lien wikipedia obligatoire : Comparaison des éditeurs de code source basés sur JavaScript

Answer 2

Voici la réponse que j'ai faite à une question similaire ( Éditeur de code en ligne ) sur programmeurs :

Tout d'abord, vous pouvez jeter un coup d'œil à cet article :
Wikipedia - Comparaison des éditeurs de code source basés sur JavaScript .

Pour en savoir plus, voici quelques outils qui semblent correspondre à votre demande :

• EditArea Démonstration comme FileEditor qui est un Extension Yii ( Licence logicielle Apache, BSD, LGPL )

  Voici EditArea, un éditeur javascript gratuit pour le code source. Il permet d'écrire du code source bien formaté avec la numérotation des lignes, le support des tabulations, la recherche et le remplacement (avec regexp) et la coloration syntaxique en direct (personnalisable).

• CodePress Démonstration du plugin CodePress de Joomla ! ( LGPL ) Il ne fonctionne pas dans Chrome et il semble que le développement ait cessé.

  CodePress est un éditeur de code source en ligne avec coloration syntaxique écrit en JavaScript qui colore le texte en temps réel pendant qu'il est tapé dans le navigateur.

• CodeMirror L'une des nombreuses démos ( Style MIT licence + optionnel soutien commercial )

  CodeMirror est une bibliothèque JavaScript qui peut être utilisée pour créer une interface d'édition relativement agréable pour les programmes informatiques à contenu de type code, les balises HTML et autres éléments similaires. Si un mode a été écrit pour le langage que vous éditez, le code sera coloré, et l'éditeur vous aidera optionnellement avec l'indentation

• Éditeur Ace Ajax.org Cloud9 Démo ( Mozilla tri-licence (MPL/GPL/LGPL) )

  Ace est un éditeur de code autonome écrit en JavaScript. Notre objectif est de créer un éditeur de code basé sur le web qui correspond et étend les fonctionnalités, la convivialité et les performances des éditeurs natifs existants tels que TextMate, Vim ou Eclipse. Il peut être facilement intégré dans n'importe quelle page web et application JavaScript. Ace est développé comme l'éditeur principal pour IDE Cloud9 et le successeur du projet Mozilla Skywriter (Bespin).

Answer 3

CodePress fait cela, tout comme EditArea . Les deux sont des sources ouvertes.

Answer 4

Je recommande EditArea pour l'édition en direct d'une zone de texte en surbrillance syntaxique.

Answer 5

Mise à jour : Bespin est maintenant ACE, ce qui est mentionné par la réponse la mieux notée ici. Utilisez plutôt ACE.

Je dois aller avec Bespin par Mozilla. Il est construit à l'aide de fonctionnalités HTML5 (il est donc rapide, mais ne prend pas en charge les anciens navigateurs), mais il est vraiment étonnant à utiliser et bat tout ce que j'ai rencontré - probablement parce qu'il est soutenu par Mozilla, qui développe Firefox, donc oui... Il y a aussi un Plugin jQuery qui contient une extension pour celui-ci pour le rendre un peu plus facile à utiliser avec jQuery.