Мое решение Tinymce lazyload

Возможно я плохо искал, но не нашел решения для Tinymce lazyload картинок.
Вот мое решение:
Редактируем файл assets/plugins/tinymce4/theme/theme.tinymce4.base.inc.php
1) Добавляем class lazyload в строчке:
$this->set('image_class_list', '[{title: "None", value: ""},{title: "LazyLoad", value: "lazyload"},{title: "Float left", value: "justifyleft lazyload"},{title: "Float right", value: <a name="cut"></a>  "justifyright lazyload"},{title: "Image Responsive",value: "img-responsive lazyload"}]', 'json' );


2) Правим функции tinymce 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');

Пытался делать без добавления скрытого блока div id=«ta_new», но лыжи не поехали.
Да еще не добавляется нормально loading=«lazy».
Плюс будут косяки если отключать\включать редактор.
C lazysizes.min.js работает нормально.

1 комментарий

avatar
В версии modx evo 1.2.1 не работает! В ней не используется actions.save().
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.