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

StackOverflow https://stackoverflow.com/questions/1619167

Вопрос

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

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

Это было полезно?

Решение

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

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

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

Другие советы

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

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

Для получения дополнительной информации, вот несколько инструментов, которые, по-видимому, соответствуют вашему запросу:

  • Область редактирования ― Демо-версия в качестве редактора файла кто такой Расширение Yii ― (Лицензия на программное обеспечение Apache, BSD, LGPL)

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

  • Кодовое нажатие ― Демо-версия Joomla!Плагин CodePress ― (LGPL) ― Это не работает в Chrome, и похоже, что разработка прекратилась.

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

  • Кодовое зеркало ― Одна из многих демо-версий ― (В стиле Массачусетского технологического института лицензия + необязательно коммерческая поддержка)

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

  • Ace Ajax.org Редактор Cloud9 ― ДЕМОНСТРАЦИЯ ― (Три-лицензия Mozilla (MPL/ GPL / LGPL))

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

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

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

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

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

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

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

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

http://alexgorbatchev.com/wiki/SyntaxHighlighter

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top