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

Владимир | | CSS, JavaScript, Web разработка.

Сегодня речь пойдет об использовании 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, в котором мы указываем настройки сжатия.

Чтобы продемонстрировать результат я сделал два скриншота.

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

uncompressed

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

compressed

Как видите, во втором случае загружается два файла вместо одного. Но размер их почти в 3 раза меньше. И это эффект получен при использовании самой простой темы без плагинов.

В общем, очень полезная возможность.

В заключение хочу отметить, что при желании вы можете из очень простого редактора сделать супер навороченный. Посмотрите этот пример (и исходный код к нему). Думаю даже без чтения документации вы разберетесь как добавить или удалить кнопки на панели 😉

Удачи!

P.S. Все вопросы и замечания пишите в комментариях, буду рад ответить 🙂

Интересные ссылки

Regent анализирует средства выборки DOM-узлов по имени класса. Функция getElementsByClassName

Аутсорсинг непрофильных бизнес-процессов. Консалтинговая фирма Логос-Аудит — услуги бухгалтерского сопровождения для тех, кто понимает.