Textarea, который может делать подсветку синтаксиса на лету?

203

Я храню несколько блоков HTML внутри CMS для упрощения обслуживания. Они представлены<textarea> с.

Кто-нибудь знает какой-нибудь виджет JavaScript, который может выполнять подсветку синтаксиса для HTML внутри textareaили аналогично, при этом оставаясь простым текстовым редактором (без WYSIWYG или расширенных функций)?

javascript html richtextbox widget highlighting Пекка
источник
1
Возможно ли, что W3C станет textareaболее универсальным и расширяемым в будущей версии спецификации (X) HTML и соответствующих стандартов?
Джеймс Хей
3
@ FabienMénager Ваша дублирующаяся ссылка была удалена.
Патрик Робертс
3
Это помогло бы codepen.io/kazzkiq/pen/xGXaKR
Шань Иапен Коши

Ответы:

217

Невозможно достичь необходимого уровня контроля над представлением в обычной текстовой области.

Если вы согласны с этим, попробуйте CodeMirror или Ace (ранее skywriter и bespin ) или Monaco (используется в MS VSCode).

Из дублирующего потока - обязательная ссылка на Википедию: http://en.wikipedia.org/wiki/Comparison_of_JavaScript-based_source_code_editors

Nickolay
источник
3
Фактически, Bespin использует обычный запасной текстовый поток для добавления поддержки программ для чтения с экрана (так что люди с ограниченными возможностями также могут легко использовать это).
Эли Грей
2
CodeMirror выглядит именно так, как мне нужно. Пока он ведет себя как текстовая область, мне комфортно, что он не один.
Пекка
1
Спасибо за ответ. Нашел это после прочтения твоего ответа и его поразительно! :) github.com/securingsincity/react-ace
Кейси,
27

Вот ответ, который я сделал на аналогичный вопрос ( онлайн-редактор кода ) о программистах :

Во-первых, вы можете взглянуть на эту статью:
Wikipedia - Сравнение редакторов исходного кода на основе JavaScript .

Более того, вот некоторые инструменты, которые подходят для вашего запроса:

  • EditArea - демонстрация в качестве FileEditor с расширением Yii - ( лицензия на программное обеспечение Apache, BSD, LGPL )

    Вот EditArea, бесплатный редактор JavaScript для исходного кода. Это позволяет писать хорошо отформатированный исходный код с нумерацией строк, поддержкой вкладок, поиском и заменой (с регулярным выражением) и живой подсветкой синтаксиса (настраиваемый).

  • CodePress - демоверсия Joomla! CodePress Plugin - ( LGPL ) - он не работает в Chrome, и похоже, что разработка прекращена.

    CodePress - это веб-редактор исходного кода с подсветкой синтаксиса, написанный на JavaScript, который окрашивает текст в реальном времени, пока он печатается в браузере.

  • CodeMirror - одна из множества демонстраций - ( лицензия в стиле MIT + дополнительная коммерческая поддержка )

    CodeMirror - это библиотека JavaScript, которую можно использовать для создания относительно приятного интерфейса редактора для контента, подобного коду - компьютерных программ, разметки HTML и т. П. Если режим был написан для языка, который вы редактируете, код будет окрашен, и редактор при необходимости поможет вам с отступом

  • Ace Ajax.org Cloud9 Editor - Demo - ( три-лицензия Mozilla (MPL / GPL / LGPL) )

    Ace - это автономный редактор кода, написанный на JavaScript. Наша цель - создать веб-редактор кода, который бы соответствовал и расширял возможности, удобство использования и производительность существующих встроенных редакторов, таких как TextMate, Vim или Eclipse. Он может быть легко встроен в любую веб-страницу и приложение JavaScript. Ace разработан в качестве основного редактора для Cloud9 IDE и преемника проекта Mozilla Skywriter (Bespin).

Паскаль Куй
источник
1
О, это так сильно удручает ... 100 проектов, которые должны это делать, и абсолютно ни один, который просто работает.
RobinJ
Лицензия редактора Ace была изменена на BSD github.com/ajaxorg/ace/blob/master/LICENSE
С.Кришна,
7

Обновление: Bespin теперь ACE, о чем говорит самый высокий рейтинг ответа здесь. Вместо этого используйте ACE.

Должен пойти с Беспином от Мозиллы. Он построен с использованием функций HTML5 (поэтому он быстрый и быстрый, но не поддерживает устаревшие браузеры), но определенно удивителен в использовании и превосходит все, с чем я сталкивался - возможно, потому что это Mozilla, поддерживающая его, и они разрабатывают Firefox, так что да. .. Есть также плагин jQuery, который содержит расширение для упрощения использования с jQuery.

balupton
источник
2

Единственный известный мне редактор с подсветкой синтаксиса и отступлением к текстовой области - это Mozilla Bespin . Google вокруг встраивания Беспина, чтобы увидеть, как встроить редактор. Единственный сайт, о котором я знаю, который использует это прямо сейчас, - это альфа- галерея Mozilla Jetpack (на странице отправки Jetpack), и вы можете захотеть посмотреть, как они ее включают.

Есть также пост в блоге о встраивании и повторном использовании редактора Bespin, который может вам помочь.

Эли Грей
источник
Ace является преемником проекта Mozilla Bespin.
Захари Кинер
1

Почему вы представляете их как текстовые? Это моя любимая:

http://alexgorbatchev.com/wiki/SyntaxHighlighter

Но если вы используете CMS, возможно, есть лучший плагин. Например, WordPress имеет развитую версию:

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

Matrym
источник
15
Эти плагины не позволяют подсветку синтаксиса «на лету», как в текстовой области
Fabien Ménager
1
Ссылка не работает.
подражать