Дуже часто в web-проектах треба використовувати візуальний редактор коду (richtext code editor), схожий на існуючі IDE, з номерами рядків і підсвічуванням коду. Найбільш часто він використовується в редагуванні вихідного коду статті або шаблонів в адмінці. У цій статті я перерахую існуючі скрипти за аналогією до списку WYSIWYG-редакторів.
Практично всі існуючі візуальні редактори створюють iframe і генерують всередині сторінку у відповідності з даними javascript-об'єкта, що займаються всіма завданнями по генерації коду і обробці клавіш.
Засновані на iframe:
- EditArea - найбільш популярний редактор завдяки табуляції, gzip, сумісність простору імен з іншими бібліотеками
- CodePress - парсит SQL, Perl, C #, XSL, ASP, VBscript. Окремі рушії для різних браузерів (gecko = firefox, ie, opera). Створюється iframe з внутрішнім CodePress'об'єктом з обігом через Відразу всередині скрипту йде пошук textarea-елементів по класу, так що з динамічними ajax-редакторами доведеться змінювати скрипт. Крім того, нумерація (до 1500) рядків зроблена за допомогою однієї картинки
- CodeMirror - парсит JS, HTML, CSS
Нагадаю, що iframe не відповідає XHTML специфікації, а з використання
запропонований тег object з не сильно вийде, через обмеження на
доступ внутрішніх dom-елементів (поправте якщо я неправий).
Засновані на div'ax
- MDK-editor - найбільш нормальний редактор, є контекстне меню. У мінуси можна віднести негарний скін, невелику гальмованість і невідому ліцензію на використання.
- Helene - замість iframe використовується фоновий div і динамічно позиціонована textarea поверх. Оскільки змінюється лише один ряд, неможливо виділити декілька рядків відразу
- 9ne - схожий на консоль, але немає можливості виділення всього рядка Shift + End. Емулює каретку миготливим div'ом.
PS. Аннонсирую что в скором времени выйдет блог-движок моего производства...
Оригінал
