Замена WYSIWYG-редактору
В одном проекте, над которым работаю, существует возможность добавления пользователем на сайт некоторого описания. Как и многие другие, я начал думать в сторону wysiwyg-редакторов. От монстров типа TinyMCE и FCKeditor отказался сразу, далее начал пробовать jquery-плагины и в итоге остановился на jwysiwyg.
Задачи для редактора у меня были следующие:
- Форматирование жирным
- Форматирование курсивом
- Добавление маркированного списка
- Добавление таблицы
- Ограничение количества введенных символов в поле
Все эти пункты jwysiwyg успешно (в какой-то степени) решал, кроме возможности ограничить кол-во символов.На решение этой последней задачи я убил дня 3.
Во-первых нужно было отслеживать множество событий на редакторе: keydown, keyup, keypress и повесить на них проверку кол-ва символов… а разные браузеры совершенно по своему эти события поддерживали.
Во-вторых, перед каждой проверкой нужно было из текста вырезать все теги (чтобы учитывать в объеме текста только реальные «видимые» символы).
Ну и в третьих, что оказалось самым сложным — это отследить вставку из буфера обмена. Если с сочетаниями клавиш Ctrl+V проблем не было, то с контекстным меню вышла вообще беда… метод onpaste совершенно не кроссбраузерный.
После всех этих ковыряний, в сухом остатке получался негативный осадок от того, что я совершенно не могу контролировать все, что пользователь набирает в редакторе. К тому же wysiwyg выдавал «мусорный» код… и выглядело все это гадко.
Решение проблемы
Решение «в лоб»: отказываемся от wysiwyg и разбиваем процесс добавления описания на несколько «виртуальных шагов». Выглядит это примерно так:
При «разворачивании» выглядит так:
На готовом проекте страничка выглядит так:
Что думаете о такой организации интерфейса?