пятница, 28 мая 2010 г.

Веб-редакторы - метод contentEditable и jQuery

Свершилось - метод contentEditable теперь поддерживают все браузеры, начиная от IE 6 и Firefox 3 (см. Firefox 3 -has attribute ContentEditable on all HTML elements). Соответственно, создание редактируемой области на странице более не требует iframe.
Достойная внимания реализация в виде JQuery-плугина представлена здесь: In-place editing with contentEditable property and jQuery
Демонстрацию смотреть тут

Выглядит просто, а возможности очень большие. Например, можно форматировать текст с помощью клавиш: Ctrl+b, Ctrl+i, Ctrl+u. Манипуляции с блоками текста - Ctrl+c, Ctrl+x, Ctrl+v - доступны также из контекстного меню. Для гиков, скажите вы? А вот и нет - можно просто скопировать форматированный текст из MS Word или с веб-страницы и вставить в редактируемый элемент с сохранением форматирования! Конечно, следует учитывать, что таким способом пользователь может в однострочное поле вставить многострочный документ солидных размеров, но проверку вводимых пользователем данных никто не отменял.

Пример элемента приложения с подобным функционалом предлагаю посмотреть по следующему адресу:
contentEditable Plug-in Проверки вводимых данных здесь нет - первым делом я скопировал всю страницу и вставил это содержимое в элемент списка, и это сработало; но мы уж слишком много хотим от aspnet программеров - им думать некогда, "чукча писатель".

Upd.
Добавил плугин в пакет mbgserver-jquery, опробовал на сервере. Все работает. Для очистки, как обычно, прогоняем через tidy
| tidy -q --doctype omit 2>/dev/null
и забираем HTML из тэга body. Стоит отметить, что полученный результат будет именно содержимым исходного тэга, на который назначен редактор.
Если нас интересует лишь текст, можно, например, использовать вот такой фильтр:
| poisk-file-textfilter html
При этом форматирование по возможности сохранится с помощью ASCII символов и переводов строки. Утилита poisk-file-textfilter входит в комплект разработанной мной системы poisk (см. также одноименный пакет в репозитории). Если же достаточно получить однострочный текст, самым адекватным вариантом будет удаление HTML тэгов и символов разрыва строки простым регекспом.

Комментариев нет:


(C) Alexey Pechnikov aka MBG, mobigroup.ru