12 апреля, 2009

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

Редактор не открывается в ИЕ, в опере все нормально. Вот какую ошибку выдает:

Сведения об ошибке на веб-странице

Агент пользователя: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB6.5; MRA 5.5 (build 02842); InfoPath.2; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
штамп времени: Mon, 5 Jul 2010 14:12:47 UTC

Сообщение: Предполагается наличие идентификатора, строки или числа
Строка: 64
Символ: 2
Код: 0
URI-код: http://www.мой-сайт.ru/admin/
Владимир

Проверьте список параметров, которые вы передаете при создании редактора.
После последнего элемента не должно быть запятой. Т.е.
tinyMCE.init({
mode:"textareas",
theme:"simple",
language:"ru"
});
но не
tinyMCE.init({
mode:"textareas",
theme:"simple",
language:"ru",
});
kravru

СПАСИБО, заработало.
Dreamer

Здравствуйте! Подскажите как сделать в Tinymce чтоб при нажатии на кнопку смайликов не открывалось новое окно, а просто становился видимым div в который предварительно были загружены смайлики?
Заранее спасибо за помощь!
Владимир

Решение отсюда вам подойдет?
Dreamer

Да спасибо, подошло. Правда пришлось немного попотеть :)
Dreamer

Здравствуйте, Владимир!
После подключения редактора возникла такая вот проблема. В строке статуса постоянно написано "Ожидание ответа от сайта". Не подскажете что это может быть? Вначале загружается страница с пустыми тегами, инициализация tinymce не вызывается. Часть с textarea загружается AJAXом. Затем вызывается функция инициализации tinymce. Всё замечательно загружается и редактор и смайлы, но в строке статуса вместо готово остаётся "ожидание ответа". Что это за запрос может выполняться? Если отключаю инициализацию то всё в норме.
Владимир

Предположительно, редактор отправляет ajax запрос и ждет ответа. Это может происходить если где-нибудь не правильно указан url скрипта к которому отправляется запрос.

В любом случае, ставьте firebug и смотрите какие запросы "висят" на вкладке "Консоль".
Dreamer

firebug стоит. Избавиться удалось. Обязательно надо initmce делать при загрузке страницы. А потом если динамически добавлять textarea, то надо ещё раз вызывать initmce. По-видимому в файле tiny_mce.js что-то инициализируется и посылает запросы, только что это непонятно. Хотелось бы вызывать один раз ток при необходимости, но видимо не получится
Dreamer

Здравствуйте! Подскажите как сделать в Tinymce чтоб при нажатии на кнопку смайликов не открывалось новое окно, а просто становился видимым div в который предварительно были загружены смайлики?
Заранее спасибо за помощь!
kravru

И еще нюанс!
ТайниМЦЕ переделывает пути в ссылках из относительных в абсолютные?
Т.е. я пишу "/files/1.doc", а он заменяет на "../files/1.doc"
kravru

"Админка" у меня находится в папке сайт.ру/adminka/
Владимир

Опция называется relative urls.
kravru

А как вставить в TinyMCE вставить тег ?
А то при нажатии "Enter" вставляет новый , а я хочу
kravru

порезал теги :)
как вставить BR
а то по нажатию Enter вставляет еще один тег P, а хочется тег BR
Владимир

Попробуйте использовать опцию
force br newlines
и отключите force p newlines
Денис

Спасибо за помощь, код протестирую и отпишу.
kravru

А можно сделать так, чтобы в кнопке "добавить/изменить ссылку" по-умолчанию стояло "открыть в новой вкладке - _blank"?
Владимир

Не уверен, но, похоже, единственный способ - изменить файл
tinymce\jscripts\tiny_mce\plugins\advlink\js\advlink.js
Нужно поменять строки 504 и 505 местами.
Денис

С третьим вопросом разобрался.
Денис

Здравствуйте!
У меня есть ряд вопросов:
1. Почему некоторые кнопки не активны? Я так понимаю, что просто нет этих плагинов и нигде не могу найти.
2. Какой файл редактировать, чтобы сделать вывод тегов не так , а так [].
3. В каком файле прописан вывод кнопок по умолчанию, если их не прописывать в коде вызова редактора.
Заранее благодарен!
Владимир

1) Какие кнопки неактивны? Мне сложно ответить не видя редактора.

2) Вы хотите заменить угловые скобки на квадратные? Если да, то в какой момент? При отправке данных на сервер? Это можно сделать с помощью обработчика события onSaveContent
Денис

Да, вы правильно поняли при отправки данных на сервер.
Извините, но я не очень понимаю JavaScript, если не трудно помогите.
Владимир
Насчет кнопок я так и не понял. В примере на оф. сайте действительно часть кнопок неактивна, но это кнопки, которые работают только при определенных условиях. Например, кнопка "Undo" (Отменить действие) не будет активна до тех пор, пока вы не начнете изменять текст. Точно также кнопка создания ссылки начнет работать только после того, как вы выделите текст.

Замена скобок будет выглядеть примерно так
```
tinyMCE.init({
   ...
   setup : function(ed) {
      ed.onSaveContent.add(function(ed, o) {
          o.content = o.content.split('<').join('[');
          o.content = o.content.split('>').join(']');
      });
   }
});
```
Код я не тестировал, но, надеюсь, идея ясна ;)
Денис

На счет кнопок. Даже если посмотреть примеры на офф. сайте, там видно какие кнопки.
Спасибо за ответы!
Пасст

Хороший редактор. Но вот при включении картинок надо подключить любой файл-менеджер (или имедж-менеджер). На самом деле он нужен только для того, что-бы не ручками задавать путь к закачиваему файлу, а путем поиска-указания.
Такие программулины есть на офицальном сайте, но - за деньги :-(. А кто знает что-нибудь бесплатное, что можно использовать для указанной цели?
Владимир

Специально не искал. Такие менеджеры обычно встраиваются в CMS и во всех распространённых (например, том же WP) они есть.
Пасст

Да, спасибо, наверное встраивают. Но не прикручивать-же к маленькому сайтику CMS только ради такой фичи :-).
Хотелось бы найти небольшой скриптик или плагин для этого.
Владимир

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

Вот, еще немного покоцал.
$().ready(function() { $('textarea.tinymce').tinymce({ // Location of TinyMCE script script_url : 'ajax/tiny_mce/tiny_mce.js', language : "ru", // General options theme : "advanced", plugins : "pagebreak,style,layer,table,save,advhr,advimage, advlink,emotions,iespell,inlinepopups,insertdatetime, preview,media,searchreplace,print,contextmenu,paste, directionality,fullscreen,noneditable,visualchars, nonbreaking,xhtmlxtras,template,advlist", // Theme options theme_advanced_buttons1 : "tablecontrols", theme_advanced_buttons2 : "pasteword,|,bullist,numlist,|,outdent,indent,|,undo,redo,| ,preview,fullscreen", theme_advanced_buttons3 : "bold,italic,underline,|,forecolor,|,justifyleft, justifycenter,justifyright,justifyfull,|,sub,sup,|, formatselect,fontselect,fontsizeselect", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_statusbar_location : "bottom", theme_advanced_resizing : true, }); });
Владимир

К сожалению, тут я помочь не могу. Обычно делаю в обратном порядке. Беру минимальный пример и наращиваю функционал.
iF

Ребят, установил tinymce 3.3.2 все гуманно работает =))
Остался один вопрос, какие плагины из стандартных следует убрать?
Я в общем с офф. сайта взял код с расширенного примера и убрал лишние кнопки, которые мне не нужны.
А вот с плагинами запоролся =)) не хочется грузить что не нужно =))
Кто может помочь, буду благодарен!!!!

Р.S. могу кинуть скриншот с моим набором кнопок, думаю так будет проще разобраться.
Спасибо!!!
ApatityMax

Подскажите пожалуйста, как в этом редакторе сменить цвет фона. Дело в том, на сайте используется тёмный фон с блыми буквами, а окно редактора в админке (джумла) белое и писать белым шрифтом как-то неудобно :-). Уже недели 2 ковыряюсь...
Владимир

Попробуйте изменить стиль

.mceEditorArea {
background: #FFFFFF;
}

в файле editor_ui.css
Серж

Попробуйте изменить стиль

.mceEditorArea {
background: #FFFFFF;
}

в файле editor_ui.css

во первых нет такого файлаeditor_ui.css

во вторых вставлял этот код в разные места основного файла, после инициализации редактора, и в

body.mceContentBody { background:#fff000; } .mceEditorArea { background: #FFF000; }

и в CSS файл

и пробывал

body.mceContentBody { background:#fff000; }

так цвет фона и не поменялся!!!!!!!!!!!!!!(((((((((((((((

а мне нужен темный цвет textarea с tiny_mce редактором!!

также во всех манипуляциях чистил кеш !!!
плиз помогите кто нибудь как изменить цвет фона tiny mce для ввода текста???
Владимир
Прошу прощения, я ошибся.
Нужно создать CSS файл со стилем
```
body.mceContentBody {
   background: #F00;
}
```
и подключить его при инициализации редактора
```
tinyMCE.init({
	content_css : "mycontent.css",
...
});
```
mycontent.css - имя файла.
Подробнее здесь
CBR 250

Тут рекомендовали niceedit.
Буквально на днях попробовал и обплевался от него.
А Tiny MCE ещё, где-то в феврале месяце, имплантировал на ломальной машине в код форума, ориентируясь на данную статью. Всё прошло успешно и сам редактор меня очень порадовал! Спасибо!
Анара

Здравствуйте, Владимир! Спасибо за статью, она очень помогла мне. Но вот уже несколько дней я бьюсь над кодировкой редактора. Дело в том, что при загрузке нового документа(используется функция формирования документа из пакета Oracle) - редактор отлично отображает русские буквы. Затем я вношу изменения в редактор и сохраняю в БД, где использую функцию clobToBlob() с использованием кодировки CL8MSWIN1251, так как в таблице поле в формате BLOB. В базу ложатся русские буквы, но когда снова загружается редактор - отображаются кракозябры: ÏËÀÍ 1
ïðîâåäåíèÿ âíåøíåãî ãîñóäàðñòâåííîãî ôèíàíñîâîãî êîíòðîëÿ

Вот этот код я использую для вызова редактора:

tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
plugins : "safari,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,imagemanager,filemanager",

// Theme options
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
language:"ru",
fullpage_default_encoding : "UTF-8",
fullpage_default_langcode : "ru",

// Example content CSS (should be your site CSS)
content_css : "../../js/tiny_mce/themes/advanced/skins/default/content.css",

// Drop lists for link/image/media/template dialogs
template_external_list_url : "js/template_list.js",
external_link_list_url : "js/link_list.js",
external_image_list_url : "js/image_list.js",
media_external_list_url : "js/media_list.js",

// Replace values for the template plugin
template_replace_values : {
username : "Some User",
staffid : "991234"
}
});
function mce_save_callback(ed) {
var mce = tinyMCE.get(active_editor_id);
mce.save();
mce.remove();
}

Что можете посоветовать в моем случае?
Владимир

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

В первую очередь я бы изменил
fullpage_default_encoding : "UTF-8"
на
fullpage_default_encoding : "windows-1251"

Потом нужно посмотреть в какой кодировке уходит отредактированный текст (post запрос).

Дальше - по ситуации. Я с oracle не работал, поэтому как изменить кодировку не подскажу.
Андрей

А у меня вылазяет ошибка tinyMCE is not defined!
Может кто-нибудь сталкивался с такой и знает ее решение?
Владимир

Скорее всего, не подключился скрипт с самим редактором (строка 1 в первом листинге). Возможно ошибка в пути к файлу.
Владимир

Добрый день. У меня следующая проблема - textarea лежит в форме, как положено. отправка идет через post - на выходе есть все значения кроме текстэрии, которая задействована под tinymce - вообще пусто. Что это может быть?
Владимир

А если вы отключите tinymce данные уйдут?
Я не сталкивался с такой проблемой и сложно что-то конкретное сказать не видя кода.
Dreamer

Я столкнулся с той же проблемой. Если без tinymce то всё в норме, а если с ним, то при просмотре javascript получается в текстареа находятся те данные которые были туда загружены ранее, а всё что вводишь с клавиатуры в текстареа не попадает. Может надо как-то извлекать из фрейма и добавлять в текстареа?
Dreamer

Нашёл решение для продвинутых и не очень
андрей

спасибо, хорошая вещь, я как и некоторые тут мучался со шрифтом, на будущее для всех чтобы изменить размер шрифта в поле нужно просто добавить span со стилем: < Ваш текст PS Извините за пред.пост
Наталья

Здравствуйте, Владимир. Скачала tinymce, распаковала, запустила примеры локально(например simple), поформатировала текст. При просмотре измененного кода в firebug'е добавляется лишний спан со стилем mce_style="text-decoration: line-through;". Посмотрела примеры online на официальном сайте - таких проблем нет. Не подскажите в чем проблема? Спасибо.
Владимир

Я сам с этой проблемой не сталкивался, но видел решение
Вячеслав

Вместо
formForText.appendChild(textPisma);
на самом деле
formForText.appendChild(textMsg);
Опечатка ))
Владимир

Похоже, код подключения редактора выполняется раньше, чем создаётся textarea.
Попробуйте использовать очереди.