it-swarm.com.de

Textbereich für Syntax-Hervorhebungen im laufenden Betrieb?

Ich speichere aus Gründen der einfacheren Wartung eine Reihe von HTML-Blöcken in einem CMS. Sie werden durch <textarea>s dargestellt.

Kennt jemand ein JavaScript-Widget, das Syntax für HTML in einer textarea oder ähnlichem hervorhebt und dabei einen reinen Texteditor verwendet (keine WYSIWYG- oder erweiterten Funktionen)?

185
Pekka 웃

Es ist nicht möglich, die erforderliche Kontrolle über die Darstellung in einem normalen Textbereich zu erreichen.

Wenn Sie damit einverstanden sind, versuchen Sie CodeMirror oder Ace (früher skywriter und bespin ).

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

198
Nickolay

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

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

Hier sind einige Tools, die zu Ihrer Anfrage passen:

  • EditArea - Demo als FileEditor wer ist eine Yii-Erweiterung - (Apache-Softwarelizenz, BSD, LGPL)

    Hier ist EditArea, ein kostenloser Javascript-Editor für Quellcode. Es ermöglicht das Schreiben von gut formatiertem Quellcode mit Zeilennotierung, Tabulatorunterstützung, Suchen und Ersetzen (mit Regex) und Live-Syntax-Hervorhebung (anpassbar).

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

    CodePress ist ein webbasierter Quellcode-Editor mit Syntax-Hervorhebung in JavaScript, der den Text in Echtzeit färbt, während er im Browser eingegeben wird.

  • CodeMirror - Eine der vielen Demoversionen - (MIT-style license + optional kommerzielle Unterstützung)

    CodeMirror ist eine JavaScript-Bibliothek, mit der eine relativ angenehme Editorschnittstelle für Code-ähnliche Inhalte erstellt werden kann - Computerprogramme, HTML-Markup und ähnliches. Wenn für die von Ihnen bearbeitete Sprache ein Modus geschrieben wurde, wird der Code farbig dargestellt, und der Editor hilft Ihnen optional beim Einzug

  • 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 die Funktionen, die Benutzerfreundlichkeit und die Leistung vorhandener nativer Editoren wie TextMate, Vim oder Eclipse anpasst und erweitert. Es kann leicht 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.

22
Pascal Qyy

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

17
Anonymous

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

9
Daniel Bardi

Update: Bespin ist jetzt ACE, was hier mit der am besten bewerteten Antwort 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 bedienen und übertrifft alles, was ich gefunden habe. Wahrscheinlich, weil Mozilla es unterstützt, und sie entwickeln Firefox so. Es gibt auch ein jQuery Plugin, das eine Erweiterung enthält , um die Verwendung von jQuery etwas einfacher zu machen.

6
balupton

Der einzige Editor, den ich kenne, hat Syntaxhervorhebung und einen Fallback für einen Textbereich ist Mozilla Bespin . Google für die Einbettung von Bespin, um zu sehen, wie der Editor eingebettet wird. Die einzige Site, von der ich weiß, dass sie dies jetzt verwendet, ist die Alpha Mozilla Jetpack Gallery (in der Jetpack-Seite senden), und Sie möchten vielleicht sehen, wie sie diese enthält.

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

2
Eli Grey

Warum repräsentierst du sie als Textareas? Das ist mein Lieblings:

http://alexgorbatchev.com/wiki/SyntaxHighlighter

Wenn Sie jedoch ein CMS verwenden, gibt es wahrscheinlich ein besseres Plugin. Wordpress hat beispielsweise eine weiterentwickelte Version:

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

1
Matrym

Sie können Highlight Text in einem <textarea> verwenden, wobei ein <div> sorgfältig dahinter platziert wird.

auschecken Text in einer Textfläche hervorheben .

0
E99