JavaScript WYSIWYG-редакторы для сайта

Любой ВЕБ-программист в своей работе, рано или поздно сталкивается с необходимостью использования в своем проекте какого-нибудь WYSIWYG-редактора. Не стал исключением и Ваш покорный слуга, то есть я сам.
Но вслед за осознанием сего факта, как правило, следует вопрос: а какой же редактор выбрать?

Для справки: WYSIWYG — это аббревиатура, происходящая от сокращения английской фразы «What You See Is What You Get» , т.е «что видим, то и получаем». Другими словами это принцип, когда некая утилита позволяет работать е с исходным кодом некоего конечного продукта, а с его визуальным представлением, иначе — видом, который этот продукт приобретет в результате наших действий.

К семейству таких программ можно отнести известный каждому, кто пользуется компьютером, текстовый редактор Word от компании Microsoft. Он позволяет видеть на экране документ в том виде, в котором Вы получите его на распечатке. Существует также множество HTML-редакторов, рабтающих по принципу WYSIWYG, например широкоизвестный в свое время FrontPage от тех же Мелкомягких или мой любимый HomeSite, когда он еще не принадлежал компании Macromedia. Но оба они уже, увы, канули в лету.

Ну и еще одной разновидностью WYSIWYG-редакторов являются JavaScript утилиты, позволяющие удобно работать с HTML-формами для ввода текста. Например статей, описаний к товарам и пр. С их помощью пользователи, абсолютно не знакомые с HTML, могут оформлять вводимый текст, устанавливая шрифт, цвет, размер текста, вставлять в текст изображения, видео, аудио, таблицы и много чего другого.

Ну а теперь подробнее о них. Когда я только столкнулся с такой необходимостью, первым, который пришел мне в голову был редактор TinyMCE, используемый в широкоизвестном «движке» Joomla. Отличный редактор, имеет все нужные для пользователя инструменты, возможность гибкой настройки интерфейса и легкий в подключении. Вот как он выглядит:

Как видно на скриншоте (по крайней мере, как видно из количества кнопочек-пиктограмм), этот редактор обладает внушительным перечнем инструментов: начертание, шрифт, размер, цвет, выравнивание текста; формирование отступов, списков, вставка таблиц, линий, произвольных символов, изображений и пр. и пр.

Альтернативой ему может выступать другой WYSIWYG-редактор — FCKeditor. По функционалу фактически то же самое. По внешнему виду… Судите сами:

Как бы ничего нового, но и ничего лишнего, да и все необходимое наличествует.

И все было бы хорошо, если бы не обратили менеджеры мое внимание на тот факт, что в некоторых случаях размер шрифта, оформленного в этих редакторах, сильно отличается от браузера к браузеру. Посмотрев на ситуацию так и эдак, определил, что виной тому установка менеджерами в этих редакторах размера шрифта. В них (редакторах), этот размер устанавливается в относительных значениях, т.е. от xx-small до xx-large, через medium. А вот размер этого самого medium у каждого браузера, по ходу, разные.

Встал вопрос поиска и использования редактора, позволяющего устанавливать размер шрифта в абсолютных значениях, т.е. пикселах, пунктах и пр. (кому как удобнее). И такой редактор нашелся. И имя ему, смешно, но CKeditor. Отличная разработка, на поверку оказалась продолжением проекта FCKeditor, которая утратила первую букву начиная с версии 3.0. Поговаривают, что его создатель — бразилец Frederico Caldeira Knabben, усмотрел в своих инициалах, которые присвоил созданному им JavaScript WYSIWYG-редактору FCKeditor, намек на некое английское ругательство (подразумевалось, естественно слово «фак», по-английски писать не буду, дабы не портить матерщиной, хоть и аглицкой, свой блог).

Так вот он, как раз и позволяет устанавливать размер шрифта в абсолютных значениях. В остальном вполне адекватная замена. Внешний вид извольте лицезреть на скриншоте:

Конечно, список JavaScript WYSIWYG-редакторов не ограничивается тремя (хотя по правде сказать, то двумя) приведенными здесь. Но я не ставил себе задачей дать в этой статье обзор редакторов, на такой случай в Интернете можно найти сотни ссылок на десятки редакторов, а просто описал те, с которыми довелось поработать. Так что, узнав из моей статьи какие неочевидные трудности могут поджидать при решении вопроса «какой редактор использовать», Вы просто будете немножко более подготовленным, окунаясь в море описаний и ссылок на них. А для ленивых могу дать пару таких ссылок. Например статья «Top4 бесплатных WYSIWYG редакторов текста на Javascript» или «Обзор бесплатных WYSIWYG редакторов«. Это вот вам для затравки.