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

203

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

Quelqu'un connaît-il un widget JavaScript d'une certaine sorte qui peut faire la mise en évidence de la syntaxe pour HTML dans un textareaou similaire, tout en restant un éditeur de texte brut (pas de WYSIWYG ou de fonctions avancées)?

Pekka
la source
1
Est-il possible que le W3C puisse devenir textareaplus polyvalent et extensible dans une future version de la spécification (X) HTML et des normes associées?
James Haigh
3
@ FabienMénager votre lien en double a été supprimé.
Patrick Roberts
3
Cela aiderait codepen.io/kazzkiq/pen/xGXaKR
Shan Eapen Koshy

Réponses:

217

Il n'est pas possible d'atteindre le niveau de contrôle requis sur la présentation dans une zone de texte standard.

Si vous êtes d'accord avec cela, essayez CodeMirror ou Ace (anciennement skywriter et bespin ) , ou Monaco (utilisé dans MS VSCode).

Du fil en double - un lien wikipedia obligatoire: http://en.wikipedia.org/wiki/Comparison_of_JavaScript-based_source_code_editors

Nickolay
la source
3
En fait, Bespin utilise une solution de remplacement de zone de texte régulière pour ajouter la prise en charge des lecteurs d'écran (afin que les personnes handicapées puissent également l'utiliser facilement).
Eli Gray
2
CodeMirror ressemble exactement à ce dont j'ai besoin. Tant qu'il se comporte comme une zone de texte, je suis à l'aise avec le fait qu'il n'en soit pas un.
Pekka
1
Merci pour votre réponse. Trouvé cela après avoir lu votre réponse et son souffle dans mon esprit! :) github.com/securingsincity/react-ace
Casey
27

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

Tout d'abord, vous pouvez consulter 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émo en tant que FileEditor qui est une extension Yii - ( Apache Software License, BSD, LGPL )

    Voici EditArea, un éditeur javascript gratuit pour le code source. Il permet d'écrire du code source bien formaté avec numérotation des lignes, prise en charge des onglets, recherche et remplacement (avec regexp) et mise en évidence de la syntaxe en direct (personnalisable).

  • CodePress - Démo de Joomla! Plugin CodePress - ( LGPL ) - Cela ne fonctionne pas dans Chrome et il semble que le développement ait cessé.

    CodePress est un éditeur de code source basé sur le Web avec une coloration syntaxique écrite en JavaScript qui colore le texte en temps réel pendant sa saisie dans le navigateur.

  • CodeMirror - L'une des nombreuses démos - ( licence de style MIT + support commercial en option )

    CodeMirror est une bibliothèque JavaScript qui peut être utilisée pour créer une interface d'édition relativement agréable pour le contenu de type code - programmes informatiques, balisage HTML et similaires. Si un mode a été écrit pour la langue que vous modifiez, le code sera coloré et l'éditeur vous aidera éventuellement avec l'indentation

  • Ace Ajax.org Cloud9 Editor - Demo - ( 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é en tant qu'éditeur principal de Cloud9 IDE et successeur du projet Mozilla Skywriter (Bespin).

Pascal Qyy
la source
1
Oh, c'est tellement déprimant ... 100 projets qui sont censés faire cela, et absolument aucun qui fonctionne.
RobinJ
La licence d'éditeur Ace a été changée pour BSD github.com/ajaxorg/ace/blob/master/LICENSE
S.Krishna
9

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

Daniel Bardi
la source
7

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

Je dois y aller avec Bespin de Mozilla. Il est construit à l'aide de fonctionnalités HTML5 (il est donc rapide et rapide, mais ne prend pas en charge les navigateurs hérités), mais il est vraiment incroyable à utiliser et bat tout ce que j'ai rencontré - probablement parce que c'est Mozilla qui le soutient, et ils développent Firefox alors oui. .. Il existe également un plugin jQuery qui contient une extension pour le rendre un peu plus facile à utiliser avec jQuery.

balupton
la source
2

Le seul éditeur que je connaisse qui a une coloration syntaxique et un repli sur une zone de texte est Mozilla Bespin . Google autour pour intégrer Bespin pour voir comment intégrer l'éditeur. Le seul site que je connaisse qui utilise cela en ce moment est la très alpha Galerie Mozilla Jetpack (dans la page soumettre un Jetpack) et vous voudrez peut-être voir comment ils l'incluent.

Il existe également un article de blog sur l'intégration et la réutilisation de l'éditeur Bespin qui peut vous aider.

Eli Grey
la source
Ace est le successeur du projet Mozilla Bespin.
Zachary Keener
1

Pourquoi les représentez-vous en tant que zones de texte? C'est mon préféré:

http://alexgorbatchev.com/wiki/SyntaxHighlighter

Mais si vous utilisez un CMS, il y a probablement un meilleur plugin. Par exemple, wordpress a une version évoluée:

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

Matrym
la source
15
Ces plugins ne permettent pas de surligner la syntaxe à la volée comme dans une zone de texte
Fabien Ménager
1
Le lien est rompu.
imite le