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
Аутсорсинг непрофильных бизнес-процессов. Консалтинговая фирма Логос-Аудит – услуги бухгалтерского сопровождения для тех, кто понимает.
Понравилась статья? Подписывайтесь на продолжение
!
Опубликовано в CSS, JavaScript, Web разработка View Comments
-
kravru
-
Владимир
-
kravru
-
Dreamer
-
Владимир
-
Dreamer
-
Dreamer
-
Владимир
-
Dreamer
-
Dreamer
-
kravru
-
kravru
-
Владимир
-
kravru
-
kravru
-
Владимир
-
Денис
-
kravru
-
Владимир
-
Денис
-
Денис
-
Владимир
-
Денис
-
Владимир
-
Денис
-
Пасст
-
Владимир
-
Пасст
-
Владимир
-
iF
-
Владимир
-
iF
-
ApatityMax
-
Владимир
-
Серж
-
Владимир
-
CBR 250
-
Анара
-
Владимир
-
Андрей
-
Владимир
-
Владимир
-
Владимир
-
Dreamer
-
Dreamer
-
андрей
-
Наталья
-
Владимир
-
Вячеслав
-
Владимир








