tinyMCE – установка, настройка и использование.

Сегодня речь пойдет об использовании tinyMCE – одного из лучших JavaScript редакторов. На сегодняшний день подобных редакторов воз и маленькая тележка и, конечно, идеального не существует. Кстати, раньше я рассказывал об одном из них (Подключаем FCKeditor к CodeIgniter).
Но у tinyMCE есть несколько преимуществ, которые выделяют его из общей массы.
1) Предельно простое подключение.
2) В дистрибутив входит тема с минимальным количеством элементов управления.
3) Есть готовые скрипты для сжатия редактора.
4) Есть пакет для русификации.
Второй пункт я хочу пояснить отдельно. Большинство редакторов имеют очень много возможностей. Во всяком случае по количеству кнопок в меню они напоминают офисные пакеты вроде Word’а. Но в большинстве случаев эти возможности просто не нужны.
Более того, они увеличивают время загрузки редактора и усложняют работу с ним (дольше приходится искать нужные кнопки).
Конечно, возможность настройки панелей есть во всех редакторах. Но в tinyMCE настраивать ничего не нужно. Достаточно просто указать тему «simple». В результате вы получите панель с девятью кнопками, которыми пользоваться приходится чаще всего.
Теперь рассмотрим подключение редактора.
Как я и говорил, все предельно просто. Нужно вставить в страницу два блока script.
<script type="text/javascript" src="http://sitename.domen/js/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
mode:"textareas",
theme:"simple",
language:"ru"
});
</script>
Тут предполагается, что вы распаковали архив с редактором в папку js/tiny_mce. И кроме того, установили пакет с русскими переводами. Архив с этими переводами нужно просто распаковать поверх редактора.
При настройках, указанных в методе init, каждое поле textarea будет преобразовано в редактор.
Изменение размера шрифта в редакторе.
На мой взгляд, шрифт в 10 px, который используется по умолчанию, мелковат. И его нужно увеличить хотя бы до 12 px.
Для этого открываем папку используемой темы и ищем в ней файл со стилями. В данном случае нам нужен этот файл:
tiny_mce/themes/simple/skins/default/content.css
После этого нужно изменить значение параметра font-size.
body, td, pre {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
Точно также можно изменить и другие параметры отображения редактора.
Сжатие.
Это очень полезная возможность, т.к. позволяет значительно уменьшить размер редактора и соответственно время загрузки страницы.
Принцип работы. Все используемые javascript файлы собираются в один и упаковываются в zip архив. Этот архив и отправляется клиенту.
Для того, чтобы включить сжатие вам потребуется.
1) Скачать архив с соответствующими скриптами и распаковать его в папку с редактором. Я использовал PHP вариант (Compressor PHP), но есть реализации для .NET и JSP.
2) Немного изменить код подключения редактора.
<script type="text/javascript" src="http://sitename.domen/js/tiny_mce/tiny_mce_gzip.js"></script>
<script type="text/javascript">
tinyMCE_GZ.init({
themes : 'simple',
disk_cache : true,
languages:"ru",
debug : false
});
</script>
<script type="text/javascript">
tinyMCE.init({
mode:"textareas",
theme:"simple",
language:"ru"
});
</script>
Как видите, изменился основной файл редактора. Теперь подключаем tiny_mce_gzip.js вместо tiny_mce.js.
И добавился ещё один тег script, в котором мы указываем настройки сжатия.
Чтобы продемонстрировать результат я сделал два скриншота.
До включения сжатия.

После включения сжатия.

Как видите, во втором случае загружается два файла вместо одного. Но размер их почти в 3 раза меньше. И это эффект получен при использовании самой простой темы без плагинов.
В общем, очень полезная возможность.
В заключение хочу отметить, что при желании вы можете из очень простого редактора сделать супер навороченный. Посмотрите этот пример (и исходный код к нему). Думаю даже без чтения документации вы разберетесь как добавить или удалить кнопки на панели
Удачи!
P.S. Все вопросы и замечания пишите в комментариях, буду рад ответить
Интересные ссылки
Regent анализирует средства выборки DOM-узлов по имени класса. Функция getElementsByClassName
Аутсорсинг непрофильных бизнес-процессов. Консалтинговая фирма Логос-Аудит – услуги бухгалтерского сопровождения для тех, кто понимает.
Понравилась статья? Подписывайтесь на продолжение
!
Добавьте эту страницу в
Tweet
Опубликовано в CSS, JavaScript, Web разработка Комментарии (422) »
Вы можете оставить комментарий. Трекбеки закрыты.
-
GG
-
http://www.simplecoding.org/ Владимир
-
GG
-
http://php-velosiped.org.ua/ Валерий
-
http://www.simplecoding.org/ Владимир
-
http://php-velosiped.org.ua Валерий
-
http://kinoklon.ucoz.ru/ Ветерок
-
http://kinoklon.ucoz.ru Ветерок
-
http://php-velosiped.org.ua/ Валерий
-
http://www.simplecoding.org/ Владимир
-
http://php-velosiped.org.ua/ Валерий
-
http://www.simplecoding.org/ Владимир
-
http://php-velosiped.org.ua Валерий
-
http://php-velosiped.org.ua Валерий
-
Никита
-
http://www.simplecoding.org/ Владимир
-
Ответ Владимиру
-
http://www.simplecoding.org Владимир
-
Никита
-
Никита
-
Никита
-
http://www.webteh.zx6.ru/ dima
-
http://www.simplecoding.org/ Владимир
-
http://www.webteh.zx6.ru dima
-
Alex
-
http://www.simplecoding.org/ Владимир
-
Alex
-
hasbah
-
http://www.simplecoding.org/ Владимир
-
hasbah
-
hasbah
-
http://www.simplecoding.org/ Владимир
-
hasbah
-
Елена
-
http://www.simplecoding.org/ Владимир
-
http://www.simplecoding.org/ Владимир
-
Елена
-
Елена
-
Елена
-
Елена
-
http://www.simplecoding.org/ Владимир
-
Елена
-
hasbah
-
http://www.simplecoding.org/ Владимир
-
hasbah
-
http://neton.org.ua/ Argo
-
http://www.simplecoding.org/ Владимир
-
http://neton.org.ua Argo
-
http://zprealty.ru/ Александр
-
http://zprealty.ru/ Александр
-
http://zprealty.ru/ Александр
-
http://www.ooo-bark.ru/ Альберт
-
http://zprealty.ru/ Александр
-
http://www.ooo-bark.ru Альберт
-
Денис
-
Денис
-
Денис
-
Денис
-
Денис
-
Денис
-
http://www.simplecoding.org/ Владимир
-
Денис
-
http://www.simplecoding.org/ Владимир
-
Денис
-
Kamilla
-
http://www.simplecoding.org/ Владимир
-
Kamilla
-
Евгений
-
http://www.simplecoding.org/ Владимир
-
Евгений
-
Dachiko
-
Dachiko
-
Dachiko
-
Dachiko
-
http://www.simplecoding.org/ Владимир
-
Dachiko
-
Dachiko
-
http://pavelk.ru/ ПавелК
-
http://pavelk.ru ПавелК
-
http://pavelk.ru/ ПавелК
-
http://www.simplecoding.org/ Владимир
-
http://pavelk.ru ПавелК
-
http://www.webaliser.org/ Ярослав
-
http://www.simplecoding.org/ Владимир
-
http://www.webaliser.org/ Ярослав
-
http://www.simplecoding.org/ Владимир
-
http://www.webaliser.org Ярослав
-
http://www.webaliser.org Ярослав
-
http://www.webaliser.org/ Ярослав
-
http://www.webaliser.org Ярослав
-
gogi
-
http://www.simplecoding.org/ Владимир
-
gogi
-
http://www.thecoder.ru/ theCoder
-
http://www.simplecoding.org/ Владимир
-
http://www.thecoder.ru theCoder
-
Элла
-
http://www.simplecoding.org/ Владимир
-
Dhuck
-
http://www.simplecoding.org/ Владимир
-
Элла
-
Dhuck
-
http://khvweb.com/ Сергей
-
http://www.simplecoding.org/ Владимир
-
http://khvweb.com Сергей
-
http://barma.su/ Стас
-
http://www.simplecoding.org/ Владимир
-
Владимир
-
http://barma.su Стас
-
Владимир
-
http://www.yaflorist.com/ Kamilla
-
http://www.simplecoding.org/ Владимир
-
http://www.yaflorist.com/ Kamilla
-
http://www.simplecoding.org/ Владимир
-
http://www.yaflorist.com/ Kamilla
-
http://www.simplecoding.org/ Владимир
-
http://www.yaflorist.com Kamilla
-
http://www.yaflorist.com Kamilla
-
http://www.yaflorist.com Kamilla
-
http://www.yaflorist.com/ Kamilla
-
http://www.simplecoding.org/ Владимир
-
http://www.yaflorist.com Kamilla
-
http://www.yaflorist.com/ Kamilla
-
http://www.simplecoding.org/ Владимир
-
http://www.yaflorist.com Kamilla
-
http://exay.info/ exay
-
http://www.simplecoding.org/ Владимир
-
http://exay.info exay
-
Олег
-
http://www.simplecoding.org/ Владимир
-
Олег
-
Александр
-
http://www.simplecoding.org/ Владимир
-
Александр
-
http://wedding75.ru/ Сергей
-
http://wedding75.ru/ Сергей
-
campusboy
-
campusboy
-
http://www.simplecoding.org/ Владимир
-
campusboy
-
http://www.simplecoding.org/ Владимир
-
campusboy
-
campusboy
-
campusboy
-
Элла
-
Элла
-
Элла
-
Элла
-
Элла
-
Элла
-
Элла
-
http://www.simplecoding.org/ Владимир
-
Элла
-
Элла
-
Элла
-
Элла
-
http://www.simplecoding.org/ Владимир
-
Элла
-
Элла
-
Элла
-
Элла
-
Элла
-
Элла
-
Элла
-
Элла
-
http://www.simplecoding.org/ Владимир
-
Элла
-
Элла
-
Элла
-
Элла
-
http://www.simplecoding.org/ Владимир
-
Элла
-
JIPuBET
-
http://www.simplecoding.org/ Владимир
-
JIPuBET
-
JIPuBET
-
JIPuBET
-
JIPuBET
-
http://www.simplecoding.org/ Владимир
-
JIPuBET
-
tray1991
-
tray1991
-
tray1991
-
tray1991
-
http://www.load-portal.ru/ sva1987
-
http://www.simplecoding.org/ Владимир
-
http://www.woman-live.ru/ sva1987
-
http://www.load-portal.ru sva1987
-
http://www.woman-live.ru sva1987
-
JIPuBET
-
JIPuBET
-
JIPuBET
-
http://www.simplecoding.org/ Владимир
-
JIPuBET
-
http://womanforma.ru/ kartinka
-
http://womanforma.ru kartinka
-
Андрей
-
http://www.simplecoding.org/ Владимир
-
Андрей
-
http://www.simplecoding.org/ Владимир
-
Андрей
-
Андрей
-
Тимофей
-
http://www.simplecoding.org/ Владимир
-
Тимофей
-
Генри
-
http://www.simplecoding.org/ Владимир
-
Генри
-
Дина
-
http://www.simplecoding.org/ Владимир
-
Дина
-
Виктор
-
Виктор
-
Виктор
-
Виктор
-
Виктор
-
http://www.simplecoding.org/ Владимир
-
Виктор
-
http://blog.arseo.ru/ Arseo
-
http://www.simplecoding.org/ Владимир
-
http://blog.arseo.ru Arseo
-
Виктор
-
http://www.simplecoding.org/ Владимир
-
Виктор
-
новичек
-
http://www.simplecoding.org/ Владимир
-
новичек
-
Вячеслав
-
Вячеслав
-
Вячеслав
-
http://www.simplecoding.org/ Владимир
-
Вячеслав
-
Вячеслав
-
Вячеслав
-
Наталья
-
http://www.simplecoding.org/ Владимир
-
Наталья
-
андрей
-
андрей
-
Владимир
-
http://www.simplecoding.org/ Владимир
-
Владимир
-
Андрей
-
http://www.simplecoding.org/ Владимир
-
Андрей
-
Анара
-
http://www.simplecoding.org/ Владимир
-
Анара
-
http://www.cbr250.ru/ CBR 250
-
http://www.cbr250.ru CBR 250
-
ApatityMax
-
http://www.simplecoding.org/ Владимир
-
Серж
-
http://www.simplecoding.org/ Владимир
-
ApatityMax
-
Серж
-
iF
-
iF
-
iF
-
http://www.simplecoding.org/ Владимир
-
iF
-
Пасст
-
http://www.simplecoding.org/ Владимир
-
Пасст
-
http://www.simplecoding.org/ Владимир
-
Пасст
-
Пасст
-
http://best-symba.ru/ Денис
-
http://www.simplecoding.org/ Владимир
-
http://best-symba.ru/ Денис
-
http://best-symba.ru/ Денис
-
http://www.simplecoding.org/ Владимир
-
http://best-symba.ru Денис
-
http://best-symba.ru Денис
-
http://best-symba.ru Денис
-
http://best-symba.ru Денис
-
http://best-symba.ru/ Денис
-
http://www.web-tambov.ru/ kravru
-
http://www.simplecoding.org/ Владимир
-
http://www.web-tambov.ru kravru
-
http://best-symba.ru/ Денис
-
http://best-symba.ru Денис
-
http://www.krav.ru/ kravru
-
http://www.krav.ru/web.html kravru
-
http://www.simplecoding.org/ Владимир
-
http://www.krav.ru kravru
-
http://www.krav.ru/web.html kravru
-
http://www.krav.ru/web.html kravru
-
http://www.krav.ru/web.html kravru
-
http://www.simplecoding.org/ Владимир
-
http://www.krav.ru/web.html kravru
-
http://www.krav.ru/web.html kravru
-
http://img192.imageshack.us/img192/6682/pfw.jpg Egoritch
-
http://www.simplecoding.org Владимир
-
Dreamer
-
Dreamer
-
http://www.simplecoding.org Владимир
-
Dreamer
-
Dreamer
-
http://www.simplecoding.org Владимир
-
Dreamer
-
Dreamer
-
Dreamer
-
http://www.krav.ru kravru
-
http://www.simplecoding.org Владимир
-
http://www.krav.ru kravru
-
http://webmaster9.ru Lerneree
-
http://www.simplecoding.org Владимир
-
http://webmaster9.ru Lerneree
-
http://webmaster9.ru Lerneree
-
http://www.simplecoding.org Владимир
-
http://webmaster9.ru Lerneree
-
http://webmaster9.ru Lerneree
-
http://www.simplecoding.org Владимир
-
http://www.simplecoding.org Владимир
-
http://webmaster9.ru Lerneree
-
http://www.simplecoding.org Владимир
-
Егор
-
http://www.simplecoding.org Владимир
-
Телевизор
-
http://www.simplecoding.org Владимир
-
Alexander
-
xand
-
http://www.simplecoding.org Владимир
-
Office
-
Dog21
-
http://www.simplecoding.org Владимир
-
Almas3000
-
http://www.simplecoding.org Владимир
-
tir
-
http://www.simplecoding.org Владимир
-
tir
-
http://www.simplecoding.org Владимир
-
http://www.krav.ru tir
-
http://www.simplecoding.org Владимир
-
http://internet4runet.ru Виктор Лавренко
-
http://www.simplecoding.org Владимир
-
http://internet4runet.ru Виктор Лавренко
-
http://www.simplecoding.org Владимир
-
http://internet4runet.ru Виктор Лавренко
-
Al-natasha
-
http://www.simplecoding.org Владимир
-
http://seogang.ru/ Seohhh
-
Xkirkx
-
Xkirkx
-
http://www.simplecoding.org Владимир
-
Gogita71
-
http://www.simplecoding.org Владимир
-
Lna Off
-
http://www.simplecoding.org Владимир
-
Михаил
-
http://www.simplecoding.org Владимир






