Textarea, що може робити підсвічування синтаксису на льоту?

203

Я зберігаю ряд HTML-блоків всередині CMS з метою легшого обслуговування. Вони представлені <textarea>s.

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

javascript  html  richtextbox  widget  highlighting 
— Пекка
джерело
1
Чи можливо, що W3C може зробити textareaбільш універсальним та розширюваним у майбутній версії специфікації (X) HTML та пов'язаних із ними стандартів?
— Джеймс Хей
3
@ FabienMénager ваш дублікат посилання видалено.
— Патрік Робертс
3
Це допоможе codepen.io/kazzkiq/pen/xGXaKR
— Shan Eapen Koshy

Відповіді:

217

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

Якщо все в порядку з цим, спробуйте CodeMirror або Ace (раніше Skywriter і Bespin ) або Монако (використовується в MS VSCode).

Із дублікату - обов’язкове посилання на вікіпедію: http://en.wikipedia.org/wiki/Comppare_of_JavaScript-based_source_code_editors

— Миколай
джерело
3
Власне, Bespin використовує звичайну резервну програму textarea для додавання підтримки для читачів екранів (тому люди з обмеженими можливостями також можуть легко використовувати її).
— Елі Грей
2
CodeMirror виглядає точно як те, що мені потрібно. Поки він поводиться як текстовий район, мені комфортно, якщо він не є одним.
— Pekka
1
Дякую за відповідь Виявив це після прочитання вашої відповіді та її душі! :) github.com/securingsincity/react-ace
— Кейсі
27

Ось відповідь, яку я зробив на подібне запитання ( Інтернет-редактор коду ) щодо програмістів :

Спочатку ви можете поглянути на цю статтю:
Вікіпедія - Порівняння редакторів вихідного коду на основі JavaScript .

Докладніше, ось кілька інструментів, які, здається, відповідають вашому запиту:

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

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

  • 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).

— Паскаль Qyy
джерело
1
О, це настільки гнітюче ... 100 проектів, які повинні зробити це, і абсолютно жоден, який просто працює.
— RobinJ
Ліцензію редактора Ace було змінено на BSD github.com/ajaxorg/ace/blob/master/LICENSE
— S.Krishna
7

Оновлення: Беспін зараз ACE, на що тут згадується найвища відповідь. Замість цього використовуйте ACE.

Треба їхати з Беспіном від Mozilla. Він побудований за допомогою функцій HTML5 (тому він швидкий і швидкий, але не підтримує застарілі браузери), але, безумовно, дивовижний у використанні і перемагає все, що я натрапив - напевно, тому, що Mozilla підтримує це, і вони розробляють Firefox так. .. Також є плагін jQuery, який містить розширення для нього, щоб зробити його легше у використанні з jQuery.

— балуптон
джерело
2

Єдиний мені редактор, який має підкреслення синтаксису та запас текстової області, - Мозіла Беспін . Google навколо для вставки Беспіна, щоб побачити, як вставити редактор. Єдиний мені відомий сайт, який зараз використовує це, - це сама альфа- галерея Mozilla Jetpack (на сторінці подання Jetpack), і ви можете побачити, як вони її включають.

Також є повідомлення в блозі про вбудовування та повторне використання редактора Bespin, яке може вам допомогти.

— Елі Грей
джерело
Ейс - наступник проекту Mozilla Bespin.
— Захарі Кінер
1

Чому ви представляєте їх як текстові області? Це мій улюблений:

http://alexgorbatchev.com/wiki/SyntaxHighlighter

Але якщо ви використовуєте CMS, можливо, кращий плагін. Наприклад, wordpress має розвинуту версію:

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

— Матрим
джерело
15
Ці плагіни не дозволяють підсвічувати синтаксис під час льоту, як у
— текстовій області
1
Посилання розірвано.
— наслідує
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.