Textarea, который может сделать подсветку синтаксиса на лету?
Я храню ряд HTML-блоков внутри CMS по причинам более легкого обслуживания. Они представлены <textarea> s.
кто-нибудь знает виджет JavaScript какого-то рода, который может делать подсветку синтаксиса для HTML в пределах textarea или аналогичный, все еще оставаясь простым текстовым редактором (без WYSIWYG или расширенных функций)?
8 ответов:
невозможно достичь необходимого уровня контроля над презентацией в обычной текстовой области.
Если вы в порядке с этим, попробуйте CodeMirror или Ace (ранее skywriter и Беспин).
из дублирующего потока-обязательная ссылка Википедии: http://en.wikipedia.org/wiki/Comparison_of_JavaScript-based_source_code_editors
здесь ответ, который я сделал на аналогичный вопрос (Онлайн Редактор Кода) on программисты:
во-первых, вы можете взглянуть на эту статью:
Википедия-сравнение редакторов исходного кода на основе JavaScript.для большего, вот некоторые инструменты, которые, кажется, подходят с вашим запросом:
EditArea -демо как FileEditor кто такой Расширение Yii - (лицензия на программное обеспечение Apache, BSD, LGPL)
вот EditArea, бесплатный редактор javascript для исходного кода. Это позволяет писать хорошо сформированный исходный код с нумерацией строк, поддержкой вкладок, поиском и заменой (с регулярным выражением) и подсветкой синтаксиса в реальном времени (настраиваемый).
CodePress -демо Joomla! Плагин CodePress ― ( LGPL) - он не работает в Chrome, и похоже, что разработка прекратилась.
CodePress-это веб-редактор исходного кода с подсветкой синтаксиса, написанный на JavaScript, который окрашивает текст в реальном времени во время его ввода в браузере.
CodeMirror -один из многих демо - (MIT-style лицензия + дополнительно коммерческие поддержка)
CodeMirror-это библиотека JavaScript, которая может быть использована для создания относительно приятного интерфейса редактора для кодового контента-компьютерных программ, разметки HTML и тому подобного. Если режим был написан для языка, который вы редактируете, код будет окрашен, и редактор дополнительно поможет вам с отступом
Ace Ajax.org Редактор Cloud9 ― демо - (Mozilla tri-license (MPL/GPL/LGPL))
Ace-это автономный редактор кода, написанный на JavaScript. Наша цель-создать веб-редактор кода, который соответствует и расширяет возможности, удобство использования и производительность существующих собственных редакторов, таких как TextMate, Vim или Eclipse. Он может быть легко встроен в любую веб-страницу и JavaScript-приложение. Ace разработан в качестве основного редактора для Cloud9 IDE и преемник проекта Mozilla Skywriter (Беспин).
Я бы порекомендовал EditArea для живого редактирования синтаксиса, выделенное текстовое поле.
обновление: Беспин теперь туз, который упоминается самым высоким рейтингом ответа здесь. Вместо этого используйте ACE.
надо идти с Беспин от Mozilla. Он построен с использованием функций HTML5 (так что это быстро и быстро, но не поддерживает устаревшие браузеры), но определенно удивительно использовать и бить все, с чем я столкнулся - вероятно, потому что это Mozilla поддерживает его, и они разрабатывают Firefox так да... Там также есть jQuery плагин, который содержит расширение для него чтобы сделать его немного проще в использовании с jQuery.
единственный редактор, который я знаю, имеет подсветку синтаксиса и резервную копию текстового поля Mozilla Bespin. Google вокруг для встраивания Беспин, чтобы увидеть, как встроить редактор. Единственный сайт, который я знаю, что использует это прямо сейчас-это сама Альфа Mozilla Jetpack Gallery (на странице отправить реактивный ранец), и вы можете увидеть, как они включают его.
есть еще сообщение в блоге о внедрении и повторном использовании редактора Bespin что может помочь вы.
Почему вы представляете их как текстовые области? Это мой любимый:
http://alexgorbatchev.com/wiki/SyntaxHighlighter
но если вы используете CMS, вероятно, есть лучший плагин. Например, wordpress имеет развитую версию:
http://www.viper007bond.com/wordpress-plugins/syntaxhighlighter/
Вы можете выделить текст
<textarea>, с помощью<div>осторожно помещается за ним.проверить Выделите текст внутри текстового поля.
Comments