Textarea qui peut faire la coloration syntaxique à la volée?
Je stocke un certain nombre de blocs HTML dans un CMS pour des raisons de maintenance. Ils sont représentés par <textarea>s.
Est-ce que quelqu'un connaît un widget JavaScript capable de mettre en évidence la syntaxe HTML dans une variable textarea ou similaire, tout en restant un éditeur de texte en clair (sans WYSIWYG ni fonctions avancées)?
Il n’est pas possible d’obtenir le niveau de contrôle requis sur la présentation dans une zone de texte standard.
Si cela vous convient, essayez CodeMirror ou Ace (anciennement skywriter et bespin ).
Du fil en double - un lien wikipedia obligatoire: http://en.wikipedia.org/wiki/Comparison_of_JavaScript-based_source_code_editors
Voici la réponse que j'ai donnée à une question similaire ( Editeur de code en ligne ) sur programmeurs :
Tout d'abord, vous pouvez jeter un oeil à cet article:
Wikipedia - Comparaison des éditeurs de code source basé sur JavaScript .
Pour plus, voici quelques outils qui semblent correspondre à votre demande:
EditArea - Démonstration sous FileEditor qui est une 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 une numérotation de ligne, une prise en charge des onglets, une recherche et remplacement (avec regexp) et une coloration syntaxique en direct (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 indiquant que le texte est coloré en temps réel lors de la saisie dans le navigateur.
CodeMirror - Une des nombreuses démos - (style MIT license + optional support commercial)
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 Editeur Cloud9 - Démo - (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é comme éditeur principal de Cloud9 IDE et comme successeur du projet Mozilla Skywriter (Bespin).
Je recommanderais EditArea pour l'édition en direct d'un texte surligneur de syntaxe.
Mise à jour: Bespin est maintenant ACE, 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 plugin jQuery qui contient une extension pour le rendre un peu plus facile à utiliser avec jQuery.
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 Mozilla Jetpack Gallery (dans la page d'envoi d'un jetpack) et vous voudrez peut-être voir comment elle est incluse.
Il existe également un article blog sur l'intégration et la réutilisation de l'éditeur Bespin qui peut vous aider.
Pourquoi les représentez-vous comme textareas? C'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/
Vous pouvez mettre en surbrillance le texte dans un <textarea>, en utilisant un <div> soigneusement placé derrière celui-ci.
check out Surligner le texte dans une zone de texte .