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



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



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

1157   8  

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 (Беспин).

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

Я бы порекомендовал 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

    Ничего не найдено.