Textarea, die Syntax-Hervorhebung on the fly tun?

Question

Ich bin eine Reihe von HTML-Blöcken innerhalb eines CMS aus Gründen der einfacheren Wartung zu speichern. Sie zeichnen sich durch <textarea>s vertreten.

Kennt jemand einen JavaScript-Widget von einer Art, die Syntax-Hervorhebung für HTML innerhalb eines textarea oder ähnliches tun kann, während immer noch ein Texteditor (keine WYSIWYG oder erweiterte Funktionen)?

Aufenthalt

Answer 1

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

Wenn Sie mit dem OK, versuchen Codemirror oder Ace (früher skywriter und Bespin ) oder Monaco (verwendet in MS VSCode).

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

Answer 2

Hier ist die Antwort, die ich auf eine ähnliche Frage getan haben (Online Code-Editor ) auf Programmierer :

Als erstes können Sie einen Blick auf diesen Artikel nehmen:
Wikipedia -. Vergleich von JavaScript-basierten Quellcode-Editoren

Für mehr, hier sind einige Tools, die mit Ihrer Anfrage zu passen scheinen:

• EditArea - Demo als FileEditor wer ein Yü Erweiterung - ( Apache Software License, BSD, LGPL )

    

  Hier ist EditArea, ein freier JavaScript-Editor für Quellcode. Es läßt mit der Linie numerotation, Registerkarte Unterstützung gut formated Quellcode schreibt, Suchen & Ersetzen (mit regexp) und Live-Syntax-Hervorhebung (anpassbar).

• Codepress - Demo von Joomla! Codepress Plugin - ( LGPL .) - Es ist nicht in Chrome arbeiten und es sieht aus wie Entwicklung aufgehört hat,

    

  Codepress ist webbasiert Quellcode-Editor mit Syntax in JavaScript geschrieben Hervorhebung, die Farben Text in Echtzeit, während es in dem Browser eingegeben hat wird.

• Codemirror - Einer der vielen Demo - ( MIT -Stil Lizenz + optional kommerzielle Unterstützung )

    

  Codemirror ist eine JavaScript-Bibliothek, die verwendet werden kann, eine relativ angenehme Editor-Schnittstelle für die Code-like Inhalte zu erstellen - Computerprogramme, HTML-Markup und ähnlichen. Wenn ein Modus für die Sprache geschrieben wurde, die Sie bearbeiten, wird der Code gefärbt, und der Editor Sie optional mit Vertiefung helfen

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

    

  Ace ist ein Standalone-Code-Editor in JavaScript geschrieben. Unser Ziel ist es, einen Web-basierte Code-Editor zu erstellen, die übereinstimmt und erweitert die Funktionen, Benutzerfreundlichkeit und Leistung der bestehenden nativen Editoren wie Textmate, Vim oder Eclipse. Es kann in jeder Web-Seite und JavaScript-Anwendung leicht eingebettet werden. Ace wird als primäre Editor für Cloud9 IDE und Nachfolger des Mozilla Skywriter (Bespin) Projekt entwickelt wurde.

Answer 3

Codepress dies tut, genau wie EditArea . Beide sind Open Source.

Answer 4

Ich würde empfehlen, EditArea zur Live-Bearbeitung einer Syntax hightlighted Textbereich.

Answer 5

Update: Bespin ist jetzt ACE, die hier von der höchsten bewerteten Antwort erwähnt wird. Verwenden ACE statt.

Gotta go mit Bespin von Mozilla. Es wird unter Verwendung von HTML5-Funktionen gebaut (so es ist schnell und schnell, aber älteren Browser jedoch nicht unterstützt), aber auf jeden Fall erstaunlich, zu verwenden und schlägt alles, was ich kenne - wahrscheinlich beacause es ist Mozilla es sichern, und sie entwickeln Firefox so yeah. .. es gibt auch eine jQuery Plugin, das eine Erweiterung enthält, die für sie macht es ein wenig einfacher, mit jQuery zu verwenden.

Answer 6

Der einzige Editor ich kenne, hat Syntax-Hervorhebung und ein Rückfall auf eine Textbox Mozilla Bespin . Google um für die Einbettung von Bespin, um zu sehen, wie der Editor einbetten. Der einzige Ort, die ich kenne, verwendet dieses Recht ist jetzt die sehr alpha Mozilla Jetpack Gallery (in der senden Sie eine Jetpack Seite) und Sie möchten, um zu sehen, wie sie es sind.

Es gibt auch einen Blog-Post rel="nofollow auf das Einbetten und Wiederverwendung der Bespin Editor dass Ihnen helfen kann.

Answer 7

Warum vertreten Sie sie als Textbereiche? Dies ist mein Favorit:

http://alexgorbatchev.com/wiki/SyntaxHighlighter

Aber wenn Sie einen CMS verwenden, gibt es wahrscheinlich eine bessere Plugin. Zum Beispiel Wordpress hat eine weiterentwickelte Version:

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

Answer 8

Sie können markiert Text in einem <textarea>, einen <div> sorgfältig platziert dahinter verwendet wird.

Besuche Text in einem Textarea Highlight.