Можите сразу скачать файл theme.tinymce4.base.inc.php (Предупреждаю! не работает в версии modx evo 1.2.1.)
Файл лежит в assets/plugins/tinymce4/theme/
При проверки скорости загрузки сайта гуглом я заметил что некоторые сайты которые раньше спокойно проходили тест (пусть не совсем на отлично, баллов 80-95 для мобильной версии), теперь проходили эти же тесты значительно хуже, баллов на 50-60. Гугл очень рекомендовал использовать СОВРЕМЕННЫЕ ФОРМАТЫ файлов - JPEG 2000, JPEG XR, and WebP, плюс отложенную загрузку файлов. С современными форматами дело понятное, по мне так лучше дождаться интеграции в систему. Да и что бы все интернет обозреватели поддерживали. А вот ленивую загрузку картинок решил сделать.
В системе управления сайтом MODX EVO модифицировать код под соответсвие ленивой загрузке картинок не так сложно, ессли дело касается типа данных - Image. Просто редактируешь чанк (кусо html кода) так как тебе удобно. Но вот с wyswyg редактором не так всё гладко. По умолчанию предлогаетя редактор TINYMCE 4. Самый простой способ, он же самый не удобный для людей не владеющих знаниями по html тегам (а они и не должны) это отключить wyswyg редактор. И тогда html код будет виден и можно править как угодно (желательно в рамках стандарта).
Но такой способ не удобен людям заполняющим сайты, редакторы очень сильно упращают им работу. И я решил подредатировать код TINYMCE4 что бы можно использовать преимущества lazyload картинок. Сначало хотел написать плагин который бы изменял код вывода html при запросе документа. Мне даже эта идея нравилась, что проще пробежаться регулярным вырожением по коду и заменить во всех тегах img аттрибут src на data-src. Но в таком случаи возможно у кого-то возникли проблемы в будущем. Суть проблемы в следующем - пользователь написал одно, а в коде выводится не много другое. Конечно это не всем это будет мешать, но всё-же.
Решил править код TINYMCE4, но правильней сделать правки не в коде сомого редактора, а в файлах настроек. Что-бы при обновлении по возможности ничего не сломалось. Да и авторы tinymce многое предусмотрели, что бы без надобности не лезть в ядро их кода.
У себя в проектах я использую javascript lazysizes.min.js (https://github.com/aFarkas/lazysizes.git). Для её функционирования надо картинкам добавить класс lazyload.
Находим строчу $this->set('image_class_list'... и правим по своему усмотрению. У меня вот такая:
$this->set('image_class_list', '[{title: "None", value: ""},{title: "LazyLoad", value: "lazyload"},{title: "Float left", value: "justifyleft lazyload"},{title: "Float right", value: "justifyright lazyload"},{title: "Image Responsive",value: "img-responsive lazyload"}]', 'json' );
Видно что я ко всем классам добавляю lazyload.
Дальше правим код $this->set('setup'...
$this->set('setup', 'function(ed) {
ed.on("init", function(e) { if(ed.id === "ta") {
jQuery("#ta").after("<div id=\'ta_new\' style=\'display:none\'></div>");
jQuery("#ta_new").append(ed.getContent());
jQuery("#ta_new img.lazyload").each(function() { jQuery(this).attr("src", jQuery(this).data("src") )});
ed.setContent(jQuery("#ta_new").html());
jQuery("#ta_new").html("");
if (typeof actions.save == "function" ) {
let oldAS = actions.save;
actions.save = function () {
jQuery("#ta_new").append(ed.getContent());
tinymce.remove("#ta");
oldAS();
}
}
}
} );
ed.on("remove", function(e) {
if(ed.id === "ta") {
jQuery("#ta_new img.lazyload").each(function() { jQuery(this).attr("src", "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" ) }); //console.log(jQuery("#ta_new").html());
jQuery("#ta").val(jQuery("#ta_new").html());
}
});
ed.on("NodeChange", function(e) { if(ed.id === "ta") { if(e.element.tagName === "IMG"){ const elem=e.element; const newIMG=elem.currentSrc; if(newIMG != "") {elem.setAttribute("data-src", newIMG);} } } });
ed.on("change", function(e) { documentDirty=true; }); }',
'object');
Это конечно заготовка требующея доработки, но заготовка рабочая.
