Визуальный редактор

Похоже, что я несколько погорячился, решив, что визуальный редактор можно оставить на потом и отладить его работу. Исходил из того, что в случае каких-то проблем, всегда можно подправить его код. Но я ошибся.

Первоначально я взял редактор FreeRTE. Всё в нем замечательно: и оформление, и настройки, но в процессе работы возникло несколько проблем. Главная из них в том, что спецсимволы, которые с лихвой присутствуют в PHP и которые я публикую, не совсем корректно обрабатываются этим редактором. Даже когда я перехожу на закладку «Код», все равно некотоыре символы неверно кодируются.

Основная проблема, как оказалось, кроется в кавычках, которыми экранируются спецсимволы. Получилась солянка: на стороне сервера я делаю правильное html-кодирование, на стороне браузера уже работает JS, со своими особенностями. Поэтому «серверные тексты» нужно отдавать редактору уже в его формате.

Ситуация значительно усложнилась из-за того, что редактор не имеет textarea-элемента. Поэтому тексты нужно передавать как одну из JS-переменных.

В общем намучавшись с кодированием туда-сюда, я решил сменить визуальный редактор.

Копнув в Инете, выяснилось, что редакторов очень много. Мне не хотелось сильно вникать и заниматься программированием js-скриптов на данном этапе, поэтому я выбирал редактор который имеет маленький размер, легко настраивается и адекватно понимает любой сложный текст.

Самым лучшим оказался tinyMCE. Но у него очень большой размер. По этой причине пришлось от него отказаться сразу. Далее была еще череда опытов, которые привели меня к WYMeditor.

Этот редактор выгодно отличается от остальных тем, что сразу генерирует практически идеальный HTML. То есть парсинг текстов, как это обычно бывает (например авторасстановка тэгов) уже не нужна. Немного поэкспериментировав с этим редактором, я решил добавить его в CMS. На первых порах все было замечательно, пока я не столкнулся с проблемой, которую так и не смог побороть.

Дело в том, что у меня есть привычка набирать тексты в блокноте, а уже потом их публиковать на сайте. И вот сам процесс вставки текста в этом редакторе сделан довольно станным способом: он напрочь не понимает текст без html-разбивки. То есть его можно вставить, после этого достаточно нажать клавишу курсора и текст превращается в сплошное месиво. Попытки исправить ситуацию ни к чему не привели. Получилось, что WYMeditor отлично подходит для непосредственного набора текстов, но для уже готовых непригоден.

Признаться, я уже был в отчаянии и готов был на всё плюнуть и делать свой редактор с нуля. Я составил список требований:

• Маленький размер. Чем меньше, тем лучше.
• Несложный js-код, который можно модернизировать.
• Возможность добавления своих кнопок.
• Можно добавлять свои кнопки со своими действиями, например добавить псевдокод или смайлик или любой другой текст.
• Текст должен добавляться в textarea. Это позволит полностью исключить проблемы с кодированием спецсимволов.
• Возможность переключаться в режим «Код».
• Корректное понимание спецсимволов: любой текст добавленный в визуальном режиме должен отображаться в том же виде.

В качестве допольнительного «бонуса» мне хотелось получить возможность задания правил для автоматической правки кода. Например, вы набираете в визуальном режиме «*Текст/*», а при переключении на код получаете «<b>Текст</b>». И обратно.

Должен сказать, что под эти требования я так ничего и не нашел. Но к наткнулся на редактор JWYSIWYG. Если быть точнее, то это даже не редактор, а плагин к jquery. Немного поиграв с ним я вдруг сделал то, что не удавалось с другими.

Как известно обычный текст мы разбиваем символами абзаца. В HTML есть два разных тэга (P и BR). И вот когда вы переключаетесь в любом визуальном редакторе на код, то видите эти тэги в результирующем коде. Причем только в IE они отображаются в новой строчке. В других браузерах вообще получается сплошное мессиво. Конечно работать с таким кодом очень сложно. И вот в JWYSIWYG я смог сделать простую замену: замену <br> тэгов на простой символ переноса строки (и обратно). То есть текст при переключении между этими режимами выглядит примерно одинаково.

Развив эту идею я смог сделать так, чтобы тэги PRE и CODE, набранные в визуальном режиме, автоматом превращались из спецсимволов в обычные, то есть для оформления исходных кодов достаточно обрамить их в эти тэги.

Понятно, что после таких открытий, я уцепился за JWYSIWYG. :) В итоге после двух дней разборов мне удалось реализовать все свои требования. Я еще буду доделывать его оформление (исходные кнопки мне не очень нравятся), но уже сейчас редактор ведет себя очень хорошо и я решил использовать именно его.

Что касается размеров, то они более чем удовлетворительны: в сумме это 48Кб, включая два css-файла, один gif и сам jquery (29Кб).