Textbereich, der Syntaxhervorhebungen im laufenden Betrieb durchführen kann?

Ich speichere eine Reihe von HTML-Blöcken in einem CMS, um die Wartung zu vereinfachen. Sie werden durch <textarea>s dargestellt.

Kennt jemand ein JavaScript-Widget, das Syntaxhervorhebungen für HTML innerhalb eines textareaoder eines ähnlichen Textes durchführen kann, während es weiterhin ein Nur-Text-Editor bleibt (kein WYSIWYG oder erweiterte Funktionen)?

Es ist nicht möglich, das erforderliche Maß an Kontrolle über die Präsentation in einem regulären Textbereich zu erreichen.

Wenn Sie damit einverstanden sind , versuchen Sie es mit CodeMirror oder Ace (ehemals Skywriter und Bespin ) oder Monaco (in MS VSCode verwendet).

Aus dem doppelten Thread - ein obligatorischer Wikipedia-Link: http://en.wikipedia.org/wiki/Comparison_of_JavaScript-based_source_code_editors

Hier ist die Antwort, die ich auf eine ähnliche Frage ( Online Code Editor ) zu Programmierern gegeben habe :

Zunächst können Sie sich diesen Artikel ansehen:
Wikipedia - Vergleich von JavaScript-basierten Quellcode-Editoren .

Im Folgenden finden Sie einige Tools, die anscheinend zu Ihrer Anfrage passen:

• EditArea - Demo als FileEditor, der eine Yii-Erweiterung ist - ( Apache Software License, BSD, LGPL )

  Hier ist EditArea, ein kostenloser Javascript-Editor für Quellcode. Es ermöglicht das Schreiben von gut formatiertem Quellcode mit Zeilennummerierung, Tabulatorunterstützung, Suchen und Ersetzen (mit regulärem Ausdruck) und Hervorheben der Live-Syntax (anpassbar).

• CodePress - Demo von Joomla! CodePress Plugin - ( LGPL ) - Es funktioniert nicht in Chrome und es sieht so aus, als ob die Entwicklung eingestellt wurde.

  CodePress ist ein webbasierter Quellcode-Editor mit in JavaScript geschriebener Syntaxhervorhebung, die Text in Echtzeit färbt, während er im Browser eingegeben wird.

• CodeMirror - Eine der vielen Demos - ( MIT- Lizenz + optionaler kommerzieller Support )

  CodeMirror ist eine JavaScript-Bibliothek, mit der eine relativ angenehme Editoroberfläche für codeähnliche Inhalte erstellt werden kann - Computerprogramme, HTML-Markup und ähnliches. Wenn für die Sprache, die Sie bearbeiten, ein Modus geschrieben wurde, wird der Code farbig dargestellt, und der Editor hilft Ihnen optional beim Einrücken

• Ace Ajax.org Cloud9 Editor - Demo - ( Mozilla Tri-Lizenz (MPL / GPL / LGPL) )

  Ace ist ein eigenständiger Code-Editor, der in JavaScript geschrieben ist. Unser Ziel ist es, einen webbasierten Code-Editor zu erstellen, der den Funktionen, der Benutzerfreundlichkeit und der Leistung vorhandener nativer Editoren wie TextMate, Vim oder Eclipse entspricht und diese erweitert. Es kann einfach in jede Webseite und JavaScript-Anwendung eingebettet werden. Ace wurde als primärer Editor für Cloud9 IDE und als Nachfolger des Mozilla Skywriter (Bespin) -Projekts entwickelt.

CodePress tut dies ebenso wie EditArea . Beide sind Open Source.

Ich würde EditArea für die Live-Bearbeitung eines Textbereichs mit hervorgehobener Syntax empfehlen.

Update: Bespin ist jetzt ACE, was in der am höchsten bewerteten Antwort hier erwähnt wird. Verwenden Sie stattdessen ACE.

Ich muss mit Bespin von Mozilla gehen. Es wurde mit HTML5-Funktionen erstellt (es ist also schnell und schnell, unterstützt jedoch keine älteren Browser), aber es ist auf jeden Fall erstaunlich zu verwenden und übertrifft alles, was mir begegnet ist - wahrscheinlich, weil Mozilla es unterstützt und sie Firefox entwickeln, also ja. Es gibt auch ein jQuery-Plugin, das eine Erweiterung enthält , um die Verwendung mit jQuery zu vereinfachen.

Sie können Text in a hervorheben<textarea> , indem Sie einen <div>sorgfältig dahinter platzierten Text verwenden .

Schauen Sie sich Text in einem Textbereich hervorheben an .

Der einzige mir bekannte Editor mit Syntaxhervorhebung und einem Fallback auf einen Textbereich ist Mozilla Bespin . Google herum zum Einbetten von Bespin, um zu sehen, wie der Editor eingebettet wird. Die einzige Website, von der ich weiß, dass sie dies derzeit verwendet, ist die Mozilla Jetpack-Galerie (auf der Seite zum Senden eines Jetpacks). Vielleicht möchten Sie sehen, wie sie diese enthält.

Es gibt auch einen Blog-Beitrag zum Einbetten und Wiederverwenden des Bespin-Editors , der Ihnen helfen kann.

Warum repräsentieren Sie sie als Textbereiche? Das ist mein Lieblings:

http://alexgorbatchev.com/wiki/SyntaxHighlighter

Wenn Sie jedoch ein CMS verwenden, gibt es wahrscheinlich ein besseres Plugin. Zum Beispiel hat WordPress eine weiterentwickelte Version:

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