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

203

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

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

— Пекка
источник

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

— С.Кришна,

18

CodePress делает это, как и EditArea . Оба с открытым исходным кодом.

— анонимное
источник

9

Я бы порекомендовал EditArea для оперативного редактирования синтаксиса подсветки текста.

— Даниэль Барди
источник

7

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

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

— balupton
источник

6

Вы можете выделить текст в <textarea>, используя <div>аккуратно расположенную за ним.

проверьте выделение текста внутри текстовой области .

— E99
источник

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

Ссылка не работает.

— подражать