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

203

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)?

javascript html richtextbox widget highlighting Pekka
quelle
1
Ist es möglich, dass das W3C textareain einer zukünftigen Version der (X) HTML-Spezifikation und verwandter Standards vielseitiger und erweiterbarer wird?
James Haigh
3
@ FabienMénager Ihr doppelter Link wurde entfernt.
Patrick Roberts
3
Dies würde helfen, codepen.io/kazzkiq/pen/xGXaKR
Shan Eapen Koshy

Antworten:

217

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

Nickolay
quelle
3
Tatsächlich verwendet Bespin einen regulären Textbereich-Fallback, um Unterstützung für Bildschirmleser hinzuzufügen (sodass behinderte Menschen ihn auch problemlos verwenden können).
Eli Gray
2
CodeMirror sieht genau so aus, wie ich es brauche. Solange es sich wie ein Textbereich verhält, fühle ich mich wohl, wenn es keiner ist.
Pekka
1
Danke für deine Antwort. Fand dies nach dem Lesen Ihrer Antwort und es hat mich umgehauen! :) github.com/securingsincity/react-ace
Casey
27

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.

Pascal Qyy
quelle
1
Oh, das ist so deprimierend ... 100 Projekte, die das tun sollen, und absolut keine, die einfach funktionieren.
RobinJ
Ace - Editor-Lizenz hat BSD geändert github.com/ajaxorg/ace/blob/master/LICENSE
S.Krishna
9

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

Daniel Bardi
quelle
7

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.

Balupton
quelle
2

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.

Eli Gray
quelle
Ace ist der Nachfolger des Mozilla Bespin-Projekts.
Zachary Keener
1

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/

Matrym
quelle
15
Diese Plugins erlauben keine sofortige Syntaxhervorhebung wie in einem Textbereich
Fabien Ménager
1
Link ist unterbrochen.
imitieren