Визуальный редактор
Похоже, что я несколько погорячился, решив, что визуальный редактор можно оставить на потом и отладить его работу. Исходил из того, что в случае каких-то проблем, всегда можно подправить его код. Но я ошибся.
Первоначально я взял редактор 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Кб).

Комментариев: 7
Совершенно правильный выбор, JWYSIWYG — простой и удобный редактор.
А вам не кажеться что он какойто мало функциональный?
Дело в том, что у него функциональность легко добавляется. Например сейчас такие кнопки:
Жирный, курсив, зачеркнутый, подчеркнуты, влево, по центру, вправо, по формату, вставить абзац, цвет фона, цвет шрифта, преформат (pre), отступ добавить, отступ убрать, sub, sup, отмена, повтор, список нумерованный, список обычный, hr, ссылка, изображение, h1-h6, вырезать, копировать, вставить, увеличить шрифт, уменьшить, удалить форматирование, просмотр кода.
Еще будет [cut] отрезающий анонс. Да и можно добавить любые комбинации и тэги.
Достаточно?
Круто! Я просто частенько сначала говорю а потом вникаю в проблему
для меня требованием было возможность вставки/закачки картинок/файлов прямо из редактора. это сумели только (после обработки) tinyMce и FCKeditor
Вы серьезно?
JWYSIWYG уж слишком простой... точнее сказать в нем вообще ничего нет
Дело не в том, что ничего нет, а в том, что можно легко добавить.