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

Je suis le stockage d'un nombre de blocs HTML à l'intérieur d'un CMS pour des raisons de maintenance plus facile. Ils sont représentés par <textarea>s.

Quelqu'un sait un Widget JavaScript, de la sorte, qui peut faire de la coloration syntaxique pour le code HTML au sein d'un textarea ou similaire, tout en restant toujours un éditeur de texte brut (pas de WYSIWYG ou fonctions avancées)?

  • Est-il possible que le W3C pourrait faire textarea plus polyvalent et extensible dans une future version de (X)HTML spécifications et normes connexes?
  • votre double lien a été supprimé.
  • Cela permettrait codepen.io/kazzkiq/stylo/xGXaKR
InformationsquelleAutor Pekka supports GoFundMonica | 2009-10-24
  1. 206

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

    Si vous êtes OK avec ça, essayez CodeMirror ou Ace (anciennement skywriter et bespin), ou Monaco (utilisé dans MS VSCode).

    De la double fil - une obligation de lien wikipédia: http://en.wikipedia.org/wiki/Comparison_of_JavaScript-based_source_code_editors

    • En fait, Bespin utilise régulièrement un textarea de secours pour ajouter le support pour les lecteurs d'écran (de sorte que les personnes handicapées puissent l'utiliser facilement en trop).
    • CodeMirror ressemble exactement à ce dont j'ai besoin. Tant qu'il se comporte comme un textarea, je suis à l'aise avec, il n'en est pas une.
    • Merci pour vous réponse. Trouvé cet après lecture de votre réponse et de son souffle mon esprit ! 🙂 github.com/securingsincity/react-ace
    • essayé de faire à la fois le travail, mais aucun n'est de travailler pour moi...
    InformationsquelleAutor Nickolay
  2. 25

    Ici est la réponse que j'ai faite à une question similaire (En Ligne De L'Éditeur De Code) sur les programmeurs:

    Tout d'abord, vous pouvez prendre un coup d'oeil à cet article:

    Wikipédia ― Comparaison de JavaScript basé sur le code source des éditeurs.

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

    • EditArea ― la Démo comme FileEditor qui est un Yii Extension ― (Apache Software License BSD, LGPL)

      Ici est EditArea, un éditeur de javascript pour le code source. Il permet d'écrire bien formaté le code source avec la ligne de numerotation, le support des onglets, recherche & remplacer (avec regexp) et de vivre la coloration syntaxique (personnalisable).

    • CodePress ― Démo de Joomla! CodePress Plugin ― (LGPL) ― Il ne fonctionne pas sous Chrome et il semble que le développement a cessé.

      CodePress est basé sur le web éditeur de code source avec coloration syntaxique écrit en JavaScript que les couleurs de texte en temps réel, alors qu'il est tapé dans le navigateur.

    • CodeMirror ― l'Un des nombreux démo ― (MIT-style licence + en option support commercial)

      CodeMirror est une bibliothèque JavaScript qui peut être utilisé pour créer une relativement agréable interface de l'éditeur de code comme le contenu des programmes d'ordinateur, des balises HTML, et similaires. Si la mode a été écrite pour la langue que vous êtes en train de modifier le code de couleur, et l'éditeur permet également de vous aider avec l'indentation

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

      Ace est autonome de l'éditeur de code écrit en JavaScript. Notre objectif est de créer un basé sur le web de l'éditeur de code qui correspond et étend les fonctionnalités, la facilité d'utilisation et la performance de l'existant natif éditeurs comme TextMate, Vim ou Eclipse. Il peut être facilement intégré dans n'importe quelle page web et JavaScript de l'application. Ace est conçu comme le principal éditeur de Cloud9 IDE et le successeur de Mozilla Skywriter (Bespin) du Projet.

    • Oh c'est donc tout à fait déprimant... 100 projets qui sont censés le faire, et absolument aucun qui fonctionnent, tout simplement.
    • Cloud9, beau travail, et CodeMirror est également très bon...
    • Ace de l'éditeur de la licence a été modifié pour BSD github.com/ajaxorg/ace/blob/master/LICENSE
    InformationsquelleAutor Pascal Qyy
  3. 18

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

    InformationsquelleAutor Anonymous
  4. 9

    Je recommanderais EditArea pour vivre à l'édition d'une mise en évidence de la syntaxe textarea.

    InformationsquelleAutor Daniel Bardi
  5. 7

    Mise à jour: Bespin est maintenant l'ACE, qui est mentionné par la plus haute cote de réponse ici. Utiliser ACE à la place.

    Dois aller avec Bespin par Mozilla. Il est construit à l'aide de fonctionnalités de HTML5 (donc c'est rapide et rapide, mais ne prend pas en charge les anciens navigateurs), mais certainement étonnant à utiliser et bat tout ce que j'ai rencontré - probablement à cause, c'est Mozilla sauvegarde, et ils développent Firefox alors oui... Il y a aussi un Plugin jQuery qui contient une extension pour elle pour le rendre un peu plus facile à utiliser avec jQuery.

    InformationsquelleAutor balupton
  6. 3

    Vous pouvez mettre en Évidence texte dans un <textarea>, à l'aide d'un <div> soigneusement placé à l'arrière.

    découvrez Mettre en surbrillance le Texte à l'Intérieur d'un Textarea.

    InformationsquelleAutor E99
  7. 2

    Le seul éditeur que je connais de la coloration syntaxique et un repli à un textarea est Mozilla Bespin. Autour de Google pour l'incorporation de Bespin pour voir comment intégrer l'éditeur. Le seul site que je connaisse qui utilise ce droit maintenant, c'est le très alpha Mozilla Jetpack Galerie (dans l'soumettre un Jetpack page) et vous pouvez voir comment ils l'incluent.

    Il y a aussi un blog sur l'intégration et la réutilisation de l'éditeur de Bespin qui peuvent vous aider.

    • As est le successeur de Mozilla Bespin projet.
    InformationsquelleAutor Eli Grey
  8. 1

    Pourquoi êtes-vous de les représenter comme des textareas? C'est ma préférée:

    http://alexgorbatchev.com/wiki/SyntaxHighlighter

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

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

    • Ces plugins ne permettent pas à la volée de la syntaxe comme dans un textarea
    • Le lien est cassé.
    InformationsquelleAutor Matrym