Textarea, который может делать подсветку синтаксиса на лету?
Я храню несколько блоков HTML внутри CMS для упрощения обслуживания. Они представлены <textarea>s.
Кто-нибудь знает какой-нибудь виджет JavaScript, который может делать подсветку синтаксиса для HTML внутри textarea или аналогичный, оставаясь при этом простым текстовым редактором (без WYSIWYG или расширенных функций)?
11 ответов
Невозможно достичь необходимого уровня контроля над представлением в обычной текстовой области.
Если вы согласны с этим, попробуйте CodeMirror или Ace (ранее Skywriter и Bespin).
Из повторяющейся темы - обязательная ссылка на Википедию: http://en.wikipedia.org/wiki/Comparison_of_JavaScript-based_source_code_editors
Вот ответ, который я сделал на аналогичный вопрос ( онлайн-редактор кода) о программистах:
Во-первых, вы можете взглянуть на эту статью:
Википедия - Сравнение редакторов исходного кода на основе 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).
Вы можете выделить текст в <textarea>, используя <div> осторожно помещенный позади этого.
проверьте выделение текста внутри текстовой области.
Я бы порекомендовал EditArea для оперативного редактирования синтаксиса подсветки текста.
Обновление: Bespin теперь ACE, о чем говорит самый высокий рейтинг ответа здесь. Вместо этого используйте ACE.
Должен пойти с Беспином от Мозиллы. Он построен с использованием функций HTML5 (поэтому он быстрый и быстрый, но не поддерживает устаревшие браузеры), но определенно удивителен в использовании и превосходит все, с чем я сталкивался - возможно, потому что это Mozilla, поддерживающая его, и они разрабатывают Firefox, так что да... Существует также плагин jQuery, который содержит расширение для упрощения использования с jQuery.
Фактически вы не можете визуализировать разметку внутри текстового поля.
Но вы можете подделать это, аккуратно разместив div за текстовым полем и добавив туда разметку выделения.
JavaScript заботится о синхронизации содержимого и позиции прокрутки.
Оригинальная ручка: https://codepen.io/lonekorean/pen/gaLEMR
Таким образом, мы можем пойти с этим:
- highlight.js
- prism.js &
- microlight.js
- Google prettyprint
Чтобы сэкономить ваше время и силы, рекомендуется продолжить исследование в этой области.
Единственный известный мне редактор с подсветкой синтаксиса и отступлением к текстовой области - это Mozilla Bespin. Google вокруг встраивания Bespin, чтобы увидеть, как встроить редактор. Единственный известный мне сайт, который использует это прямо сейчас, - это альфа- галерея Mozilla Jetpack (на странице отправки Jetpack), и вы можете захотеть посмотреть, как они ее включают.
Есть также пост в блоге о внедрении и повторном использовании редактора Bespin, который может вам помочь.
Почему вы представляете их как текстовые? Это мой любимый:
http://alexgorbatchev.com/wiki/SyntaxHighlighter
Но если вы используете CMS, возможно, есть лучший плагин. Например, WordPress имеет развитую версию:
http://www.viper007bond.com/wordpress-plugins/syntaxhighlighter/
Это можно сделать, добавив наложение
codeзаблокируйте перед текстовой областью и используйте это, чтобы применить подсветку синтаксиса, как упоминалось несколькими другими.
Однако есть некоторые крайние случаи, о которых нужно позаботиться. В этой статье подробно о них рассказывается:https://css-tricks.com/creating-an-editable-textarea-that-supports-syntax-highlighted-code .
К счастью, автор создал его как пользовательский элемент https://github.com/WebCoder49/code-input .
Пример использования https://codepen.io/WebCoder49/pen/jOypJOx
