---
title: Редакторы кода с помощью javascript
date: 2008-04-30T10:00
tags: [javascript]
---

Очень часто в web-проектах надо использовать визуальный редактор кода (**richtext code editor**), похожий на существующие IDE, с номерами строк и подсветкой кода. Наиболее часто он используется в редактировании исходного кода статьи или шаблонов в админке. В этой статье я перечислю существующие скрипты по аналогии со списком WYSIWYG-редакторов.

Практически все существующие визуальные редакторы создают iframe и генерируют внутри страницу в соответсвии с данными javascript-объекта, занимающимся всеми задачами по генерации кода и обработке клавиш.

Основанные на iframe:

- [EditArea](http://www.cdolivet.net/editarea/) — наиболее популярный редактор благодаря табуляции, gzip, совместимость пространства имён с другими библиотеками
- [CodePress](http://codepress.org/about.php) — парсит SQL, Perl, C#, XSL, ASP, VBscript. Отдельные движки для разных браузеров (gecko=firefox, ie, opera). Создаётся iframe со внутренним CodePress'объектом с обращением через contentWindow. Сразу внутри скрипта идёт поиск textarea-элементов по классу, так что с динамическими ajax-редакторами прийдётся изменять скрипт. Кроме того нумерация (до 1500) строк сделана при помощи одной картинки  
    
- [CodeMirror](http://marijn.haverbeke.nl/codemirror/jstest.html) — парсит JS, HTML, CSS

Напомню что iframe не соответсвует XHTML спецификации, а с использоватьпредложенный тэг object с не сильно получится, из-за ограничения надоступ внутренних dom-элементов (поправьте если я неправ).

Основанные на div'ах

- [Simple CodeArea](http://los.php5.cz/simple-codearea/) 0.1b - очень простой но помоему самый логичный подход использовать подсветку синтаксиса благодаря полупрозрачной textarea и div-элементу с форматированным текстом под ней. Единственная проблема - запаздывание при скролле, но в будующем я думаю это перспективный продукт
- [MDK-editor](http://www.mdk-photo.com/editor/) — относительно навороченный редактор, есть контекстное меню. В минусы можно отнести некрасивый скин, небольшую тормознутость, неизвестную лицензию на использование, перезапись window.onload, размер кода свыше 100 кб. Достаточно много классов и обычных функций, просто так не разобраться, тем более без документации.  
    
- [Helene](http://helene.muze.nl/ariadne/loader.php/helene/) — вместо iframe используется фоновый div и динамически позиционируемая textarea поверх. Поскольку изменяется только один ряд, то невозможно выделить нескольких строк сразу
- [9ne](http://robrohan.com/projects/9ne/) — похож на консоль, но нет возможности выделения всей строки Shift+End. Эмулирует каретку мигающим div'ом.

### Code highlighting

Code - специальный тэг html, который часто связывают с тэгом pre что-бы показать исходный код. Некоторые ухищраются ещё и форматировать каждую строчку внутрь списка, что-бы получить номера строчек, но помоему это слишком.

Что-бы сделать подсветку кода цветом, можно воспользоваться отечественноым [highlight.js](http://softwaremaniacs.org/soft/highlight/) , который правда у меня странно реагировал, вообще убирая код, кроме того он заточен и на pre тэг, любит когда указывается класс, согласно используемому языку.

Любители обработки кода до его показа - могут попробовать [GeSHi](http://qbnz.com/highlighter/)

Читайте также

- [Implementing a syntax-higlighting](http://marijn.haverbeke.nl/codemirror/story.html) JavaScript editor in JavaScript от создателя CodeMirror

## Related

- [Backbone.js](/ru/blog/tech/frontend/javascript/backbonejs/)
- [Excel через javascript](/ru/blog/tech/frontend/javascript/excel-cherez-javascript/)
- [JSDoc](/ru/blog/tech/frontend/javascript/jsdoc/)