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

Question

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

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

Answer 1

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

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

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

Answer 2

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

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

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

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

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

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

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

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

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

• Ace Ajax.org Cloud9 Editor - Демонстрация - ( Три-лицензия Mozilla (MPL / GPL / LGPL) )

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

Answer 3

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

Answer 4

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

Answer 5

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

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

Answer 6

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

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

Answer 7

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

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

Answer 8

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

http://alexgorbatchev.com/wiki/SyntaxHighlighter

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

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