Obszar tekstowy, który potrafi wyróżniać składnię w locie?

203

Przechowuję wiele bloków HTML w CMS ze względu na łatwiejszą konserwację. Są reprezentowani przez <textarea>s.

Czy ktoś zna jakiś widget JavaScript, który potrafi wyróżniać składnię HTML w textareapodobnym lub podobnym formacie , pozostając jednocześnie zwykłym edytorem tekstowym (bez WYSIWYG lub zaawansowanych funkcji)?

javascript html richtextbox widget highlighting Pekka
źródło
1
Czy to możliwe, że W3C może uczynić textareabardziej wszechstronnym i rozszerzalnym w przyszłej wersji specyfikacji (X) HTML i powiązanych standardów?
James Haigh
3
@ FabienMénager zduplikowany link został usunięty.
Patrick Roberts,
3
Pomogłoby to codepen.io/kazzkiq/pen/xGXaKR
Shan Eapen Koshy

Odpowiedzi:

217

Nie można osiągnąć wymaganego poziomu kontroli nad prezentacją w zwykłym obszarze tekstowym.

Jeśli nie masz nic przeciwko , spróbuj CodeMirror lub Ace (dawniej skywriter i bespin ) lub Monaco (używane w MS VSCode).

Z duplikatu wątku - obowiązkowy link do Wikipedii: http://en.wikipedia.org/wiki/Comparison_of_JavaScript-based_source_code_editors

Nickolay
źródło
3
W rzeczywistości Bespin korzysta ze zwykłego zastępczego obszaru tekstowego w celu dodania obsługi czytników ekranu (dzięki czemu osoby niepełnosprawne również mogą z niego łatwo korzystać).
Eli Gray
2
CodeMirror wygląda dokładnie tak, jak potrzebuję. Tak długo, jak zachowuje się jak obszar tekstowy, nie mam nic przeciwko temu.
Pekka
1
Dziękuję za odpowiedź. Znalazłem to po przeczytaniu twojej odpowiedzi i to oszalało! :) github.com/securingsincity/react-ace
Casey
27

Oto odpowiedź, jaką udzieliłem na podobne pytanie ( Online Code Editor ) dla programistów :

Najpierw możesz zajrzeć do tego artykułu:
Wikipedia - Porównanie edytorów kodu źródłowego opartych na JavaScript .

Aby uzyskać więcej, oto kilka narzędzi, które wydają się pasować do Twojego żądania:

  • EditArea - Demo jako FileEditor będący rozszerzeniem Yii - ( Licencja oprogramowania Apache, BSD, LGPL )

    Oto EditArea, darmowy edytor javascript dla kodu źródłowego. Pozwala pisać dobrze sformatowany kod źródłowy z numeracją linii, obsługą tabulatorów, wyszukiwaniem i zamianą (z regexp) oraz podświetlaniem składni na żywo (konfigurowalnym).

  • CodePress - Demo Joomla! CodePress Plugin - ( LGPL ) - Nie działa w Chrome i wygląda na to, że programowanie zostało zakończone.

    CodePress to internetowy edytor kodu źródłowego z podświetlaniem składni napisanym w JavaScript, który barwi tekst w czasie rzeczywistym podczas pisania w przeglądarce.

  • CodeMirror - Jedna z wielu wersji demonstracyjnych - ( licencja w stylu MIT + opcjonalne wsparcie komercyjne )

    CodeMirror to biblioteka JavaScript, której można użyć do stworzenia stosunkowo przyjemnego interfejsu edytora dla treści podobnych do kodu - programów komputerowych, znaczników HTML i podobnych. Jeśli tryb został napisany dla edytowanego języka, kod będzie pokolorowany, a edytor opcjonalnie pomoże ci z wcięciem

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

    Ace to samodzielny edytor kodu napisany w JavaScript. Naszym celem jest stworzenie internetowego edytora kodu, który pasuje i rozszerza funkcje, użyteczność i wydajność istniejących natywnych edytorów, takich jak TextMate, Vim lub Eclipse. Może być łatwo osadzony w dowolnej stronie internetowej i aplikacji JavaScript. Ace został opracowany jako główny edytor dla Cloud9 IDE i następca Projektu Mozilla Skywriter (Bespin).

Pascal Qyy
źródło
1
Och, to jest bardzo przygnębiające ... 100 projektów, które powinny to robić, i absolutnie żaden, który po prostu działa.
RobinJ
Licencja redaktora asa została zmieniona na BSD github.com/ajaxorg/ace/blob/master/LICENSE
S.Krishna
7

Aktualizacja: Bespin jest teraz ACE, o czym wspomina tutaj najwyżej oceniana odpowiedź. Zamiast tego użyj ACE.

Muszę iść z Bespin Mozilli. Został zbudowany przy użyciu funkcji HTML5 (więc jest szybki i szybki, ale nie obsługuje starszych przeglądarek), ale zdecydowanie jest niesamowity w użyciu i bije wszystko, z czym się spotkałem - prawdopodobnie dlatego, że wspiera go Mozilla, a oni rozwijają Firefoksa, więc tak. .. Istnieje również wtyczka jQuery, która zawiera rozszerzenie, dzięki czemu jest nieco łatwiejsza w użyciu z jQuery.

balupton
źródło
2

Jedyny znany mi edytor ma podświetlanie składni i powrót do obszaru tekstowego to Mozilla Bespin . Google dookoła za osadzanie Bespin, aby zobaczyć, jak osadzić edytora. Jedyną znaną mi stroną, która korzysta z tego obecnie, jest bardzo alfa Galeria Mozilla Jetpack (na stronie przesyłania Jetpack) i możesz chcieć zobaczyć, jak ją zawierają.

Jest też post na blogu na temat osadzania i ponownego użycia edytora Bespin, który może ci pomóc.

Eli Gray
źródło
Ace jest następcą projektu Mozilla Bespin.
Zachary Keener,