Zone de texte pouvant mettre en évidence la syntaxe à la volée?

Question

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

Est-ce que quelqu'un connaît un widget JavaScript capable de mettre en évidence la syntaxe HTML dans une textarea ou similaire, tout en restant un éditeur de texte brut (pas de WYSIWYG ni de fonctions avancées)?

Answer 1

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

Si cela vous convient, essayez CodeMirror ou Ace (anciennement skywriter bespin ) , ou Monaco (utilisé dans MS VSCode).

Extrait du fil de discussion - lien wikipedia obligatoire: http://en.wikipedia.org / wiki / Comparison_of_JavaScript-based_source_code_editors

Answer 2

Voici la réponse que j'ai donnée à une question similaire ( Editeur de code en ligne ) sur programmeurs :

Tout d'abord, vous pouvez consulter cet article:
Wikipedia - Comparaison d'é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 un Extension Yii - ( Licence de logiciel Apache, BSD, LGPL )

    

  Voici EditArea, un éditeur javascript gratuit pour le code source. Il permet d’écrire du code source bien formaté avec une numérotation de ligne, un support d’onglet, une recherche remplacer (avec regexp) et la coloration syntaxique dynamique (personnalisable).

• CodePress - Démo de Joomla! CodePress Plugin - ( 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 en surbrillance écrite en JavaScript pour colorier le texte en temps réel lors de sa saisie dans le navigateur.

• CodeMirror - L'une des nombreuses démos - ( MIT sous licence + assistance commerciale )

    

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

• Ace Ajax.org éditeur Cloud9 - démonstration - ( Licence triple Mozilla (MPL / GPL / LGPL) )

    

  Ace est un éditeur de code autonome écrit en JavaScript. Notre objectif est de créer un éditeur de code Web qui corresponde 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é à n’importe quelle page Web et application JavaScript. Ace est développé en tant qu'éditeur principal du Cloud9 IDE et du successeur du projet Mozilla Skywriter (Bespin).

Answer 3

CodePress le fait, comme le fait EditArea . Les deux sont open source.

Answer 4

Je recommanderais EditArea de modifier en temps réel une zone de texte à la syntaxe élevée.

Answer 5

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

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

Answer 6

Le seul éditeur que je connaisse qui présente 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 l'utilise actuellement est la très alpha Galerie Mozilla Jetpack (dans le soumettre une page Jetpack) et vous voudrez peut-être voir comment ils l’incluent.

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

Answer 7

Pourquoi les représentez-vous sous forme de zones de texte? Ceci est mon préféré:

http://alexgorbatchev.com/wiki/SyntaxHighlighter

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

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

Answer 8

Vous pouvez mettre en surbrillance le texte d'un < textarea > , en utilisant un < div > soigneusement placé derrière.

consultez Surligner du texte dans une zone de texte .