Skip to content
 

Решение проблемы несовместимости плагинов tinyMCE и jQuery

...до основанья, а затем...

Наверное все, кто пытались хоть раз написАть нетривиальный плагин для замечательнейшего HTML-редактора tinyMCE, в какой-то момент с удивлением обнаруживали, что почему-то не работает ни jQuery, ни любой другой фреймворк. Вернее, jQuery сам по себе конечно работает, но вот напрочь отказывается ловить события в плагинах tinyMCE.

Ну и я не стал исключением: в плагине, редактирующем карты, дошло дело до выбора цвета и прозрачности. Ну не цифирь же вводить! - конечно это должны быть слегка допиленный farbtastic и jQuery UI Slider. "А включаешь - не работает" (С) Жванецкий. Контролы отрисовались, но никакой реакции ни на мышь, ни на клавиатуру не проявляют.

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

После некоторых опытов стало понятно - да, это оно! А виновата во всем методика локализации плагинов, вынесенная в заголовок этой статьи - body.innerHTML вычитывается, в полученой строке заменяются тэги, и затем это выгружается обратно! Естественно от оригинальной DOM, к которой привязались события фреймворка, не осталось и следа - с чего бы событиям работать?!

К сожалению, авторы tinyMCE не предусмотрели "бескровных" способов получить оповещение об  этом происшествии, а предотватить его нельзя никак кроме как полным отключением локализации на уровне всего редактора. Но в России без локализации никак, так что  пришлось патчить еще и tinyMCE. Обошлось тут все одним файлом tiny_mce_popup.js, в который была добавлена единственная строчка:

if(b.features.onDomReload) b.features.onDomReload();

прямо перед закрывающей скобкой функции _onDOMLoaded

И соответственно в самом коде плагина сразу после включения скрипта tiny_mce_popup.js было добавлено

tinyMCEPopup.features.onDomReload=function(){
// и вот тут уже можно смело загружать и jQuery, и любые другие скрипты.
// конечно при такой загрузке jQuery(document).ready работать не будет, и все, что вы делали там,
//надо перенести на событие окончания загрузки скриптов. У меня получилось примерно так:

getScript([
/wp-j/jquery/jquery.js",
"/wp-p/jet-quickpress/js/mce_plugins/gmap/js/mousewheel.js",
"/wp-j/jquery/ui/jquery.ui.core.min.js",
"/wp-j/jquery/ui/jquery.ui.widget.min.js",
"/wp-p/jet-quickpress/js/mce_plugins/gmap/js/farbtastic/farbtastic.js",
"http://maps.google.com/maps/api/js?sensor=false&language=ru&callback=gmapMapScripts_callback"
],
function(a,tag){
jQuery_ready();
});
};

Как можно убедиться,  в редакторе форума/блога/етц проекта "У костра" все работает так, как и дОлжно :)

UPD. Обратите внимание - диалог загрузки файлов в Вордпресс чуть отличается от других диалогов редактора: чуть темнее поля, не меняется размер... А все потому, что создается он не через стандартный механизм TinyMCE, а "руками", через ThickBox. Потому что в нем должен работать jQuery :)

Также можно почитать:

  1. Установка мягких силиконовых пыльников

Написать отзыв