Pull to refresh

Редакторы кода с помощью javascript

Reading time 2 min
Views 1.3K
Очень часто в web-проектах надо использовать визуальный редактор кода (richtext code editor), похожий на существующие IDE, с номерами строк и подсветкой кода. Наиболее часто он используется в редактировании исходного кода статьи или шаблонов в админке. В этой статье я перечислю существующие скрипты по аналогии со списком WYSIWYG-редакторов.
Практически все существующие визуальные редакторы создают iframe и генерируют внутри страницу в соответсвии с данными javascript-объекта, занимающимся всеми задачами по генерации кода и обработке клавиш.
Основанные на iframe:
  • EditArea — наиболее популярный редактор благодаря табуляции, gzip, совместимость пространства имён с другими библиотеками
  • CodePress — парсит SQL, Perl, C#, XSL, ASP, VBscript. Отдельные движки для разных браузеров (gecko=firefox, ie, opera). Создаётся iframe со внутренним CodePress'объектом с обращением через contentWindow. Сразу внутри скрипта идёт поиск textarea-элементов по классу, так что с динамическими ajax-редакторами прийдётся изменять скрипт. Кроме того нумерация (до 1500) строк сделана при помощи одной картинки
  • CodeMirror — парсит JS, HTML, CSS

Напомню что iframe не соответсвует XHTML спецификации, а с использовать
предложенный тэг object с не сильно получится, из-за ограничения на
доступ внутренних dom-элементов (поправьте если я неправ).
Основанные на div'ах
  • MDK-editor — самый нормальный редактор, есть контекстное меню. В минусы можно отнести некрасивый скин, небольшую тормознутость и неизвестную лицензию на использование.
  • Helene — вместо iframe используется фоновый div и динамически позиционируемая textarea поверх. Поскольку изменяется только один ряд, то невозможно выделить нескольких строк сразу
  • 9ne — похож на консоль, но нет возможности выделения всей строки Shift+End. Эмулирует каретку мигающим div'ом.

PS. Аннонсирую что в скором времени выйдет блог-движок моего производства…

Оригинал
Tags:
Hubs:
+15
Comments 7
Comments Comments 7

Articles