Встраиваем секси-редактор на свою страничку

Заранее прошу прощения если этот пост показался Вам скучным и неинтересным)

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

И тут мой взгляд упал на редактор поставляемый с библиотекой
DojoToolkit



Так как в рунете про эту библиотеку написано прямо скажем немного, захотелось поделиться опытом)

Сразу оговорюсь, что опыта программирования на js у меня нету, поэтому, возможно пост будет интересен таким же как я чайникам), которые живут по принципу «бороться и искать, найти и перепрятать»

Итак, для того чтобы встроить библиотеку необходимо выполнить несколько шагов:

1. Скачать и развернуть)
2. Инициализировать скрипт
3. Добавить собственно на форму

По пункту 1 — сразу пугает размер, вместе с библиотекой идет куча примеров достаточно хаотично раскиданных по папкам, но для начала сойдет и так. Просто распакуем всю папку, разберемся с тем, что нам нужно — позже.

2. С инициализацией также проблем не возникло, просто добавляем пару строк в районе хидера, прописав соответствующие пути:






3. Собственно встраиваем редактор
Вот чем эта библиотечка сексуальна изнутри, так это простотой подключения.
Достаточно заключить textarea в стиль divа и прописать параметр dojoType..:

". htmlspecialchars(($doc['body'])) ."

Готово. Осталось прикрутить к сабмиту событие onclick..:
<input type=submit onclick='console.log(dijit.byId('body').getValue().length)' value='". $lang['submit'] ."' style='width:100%'>

и всё?
Не совсем) Теперь самое интересное, отловить глючки)
К счастью их не так много) Первый глючок связан с некорректной обработкой события на onsubmit( К счастью гугл дал ответ на этот вопрос, но к сожалению мне не удалось найти его повторно) Поэтому просто приложу исправленный файлик в конце поста.
И второй, не совсем глючок вобщем-то, но при парсинге текста, некоторые символы заменяются на их html коды. Что в общем то мешает при вставке ссылки на видео с youtube, например.
Исправляется довольно просто, достаточно закомментарить строку:
//str = str.replace(/&/gm, "&").replace(/</gm, "<").replace(/>/gm, ">").replace(/"/gm, """);
в функции escapeXml в библотеке RichText.js

Ну и последнее, для того чтобы сократить количество файлов валяющихся в директории, через firebug можно отобрать только необходимые библиотеки.

Подготовленные таким образом библиотеки я выложил тут
В итоге у нас получился сравнительно небольшой (порядка 200kb) и достаточно сексуальный редактор)

Выглядит это примерно вот так:


А потыкать по редактору в деле
можно на этом сайте

Ой, совсем забыл про один момент. Чтобы ссылки, которые пользователи вставляют не через буфер, а вручную (http://, без всяких href'ов) — можно вставить какой ни-ть простенький процессинг типа этого:
function url_process($text) {
if ( strstr($text,"\"http")){
return $text;
} else{
$text = preg_replace ('/http:\/\/([^",)<>\s]*)/', "\\1", $text);
}
return $text;
}


UPD

В комментариях пользователь stark предложил также другой редактор: nicedit Объемом всего в 30! kb

В итоге на свой сайт я встроил его, прицепив иконки от dojo)

Иконки отдельно можно скачать тут