Компонент помогает преобразовать уже сформированный и готовый к выводу HTML код, модифицируя его «на лету». Работа основана на плагине срабатывающем на событие OnWebPagePrerender.

Для удобства работы с HTML подключена библиотека simple_html_dom

Пример работы (плагин (а точнее заготовка) уже есть в комплекте)

switch ($modx->event->name) {
    // Стартуем плагин
    case 'OnWebPagePrerender':
        // Получаю доступ к  DOM дереву
        $output = &$modx->resource->_output;
        // Здесь доступны все поля ресурса. 
        // Определяю с каким шаблоном имею дело. 
        $template = $modx->resource->template;

        
        //Подключаю библиотеку
        include_once MODX_CORE_PATH . 'components/simple_html_dom/vendor/simple_html_dom.php';

        if (class_exists('simple_html_dom')) {
            $html = new simple_html_dom;
            $html->load($output);
            switch ($template) {                
                case 17:
            // Внутри конкретного шаблона Ищу все изображения внутри div.content
            foreach ($html->find('.content img') as $img) {
                /**
                 * @var simple_html_dom_node $img
                 */
                // Хочу активировать Lazy load для этого 
                // Сохраняю ссылку на изображение
                $src = $img->src;
                if ($src) {      
                    // Удаляю атрибут src              
                    $img->src = null;
                    // Добавляю атрибут data-src
                    $img->{'data-src'} = $src;                    
                   // Добавляю класс lazy
                    $img->class = 'lazy';
                //  Далее картинки с нужным классом и дата атрибутом подхватит js плагин lazy load и сайт прилично ускорит свою работу
                }
            }

             break;
            }
            $output = $html->save();
            $html->clear();
            unset($html);
            $output = preg_replace('|\s+|', ' ', $output);
        }
        break;
}

Еще несколько примеров использования:

Очищаем контент от лишнего мусора в атрибутах

foreach ($html->find('.product_page table') as $table) {
                $table->border = null;
                $table->cellpadding = null;
                $table->cellspacing = null;
                $table->style = null;
                $table->width = null;
                $table->class = 'table table-responsive';
            }

            foreach ($html->find('.product_page table tr') as $tr) {
                $tr->style = null;
            }

Добавляем обертку noindex для всех фреймов

foreach ($html->find('iframe') as $iframe) {
                $iframe->outertext = '<!--noindex-->' . $iframe->outertext . '<!--/noindex-->';
            }

Добавляем обертку noindex для внешних ссылок

foreach ($html->find('link') as $link) {
                if (is_external_url($link->href) && stripos($link->href, $site_url) !== 0) {
                    $link->outertext = '<!--noindex-->' . $link->outertext . '<!--/noindex-->';
                }
            }

Добавляем rel=nofollow и target=_blank для внешних ссылок

foreach ($html->find('link') as $link) {
                if (is_external_url($link->href) && stripos($link->href, $site_url) !== 0) {
                    $link->rel = 'nofollow';
                    $link->target = '_blank';
                }
            }

В общем как вы видите — довольно простыми манипуляциями можно как угодно модифицировать html разметку страницы без вмешательства в исходных код шаблонов и текста в текстовом редакторе.

Более подробно о работе компонента можно почитать в нашем сообществе