php - 如何通过 PHP 的 DOMDocument 将内联图像正确替换为样式化的 float div？

Question

我遇到了以下问题，想知道您是否有建议。

所见即所得的编辑器允许用户上传和嵌入图像。然而，我的用户大多是科学家，但对如何使用 HTML 甚至如何为网页正确调整图像大小一无所知。这就是为什么我在服务器端自动将图像调整为缩略图和完整 View 大小的原因。单击缩略图将打开一个包含完整图像的灯箱。

所见即所得编辑器将图像扔进<p>标签就像这样(见最后一段):

<p>Intro Text</p>
<ul>
   <li>List point 1</li>
   <li>List point 2</li>
</ul>
<p>Some text before an image. 
   <img alt="Slide 1" src="/files/slide1.png" /> 
   Maybe some text in between, nobody knows what the scientists are up to. 
   <img alt="Slide 2" src="/files/slide2.png" /> 
   And even more text right after that.
</p>

我想做的是从 <p> 中获取图像标记并将它们添加到 float 中的相应段落之前 <div>小号:

<p>Intro Text</p>
<ul>
   <li>List point 1</li>
   <li>List point 2</li>
</ul>
<div class="custom">
   <a href="/files/fullview/slide1.png" rel="lightbox[group][Slide 1]">
      <img src="/files/thumbs/files/slide1.png" />
   </a>
</div>
<div class="custom">
   <a href="/files/fullview/slide2.png" rel="lightbox[group][Slide 2]">
      <img src="/files/thumbs/files/slide2.png" />
   </a>
</div>
<p>Some text before an image. 
   Maybe some text in between, nobody knows what the scientists are up to. 
   And even more text right after that.
</p>

所以我需要做的是获取编辑器生成的html的所有图像节点，处理它们，插入div并移除图像节点。在阅读了很多类似的问题之后，我遗漏了一些东西并且无法让它发挥作用。可能我仍然误解了 DOM 操作背后的整个概念。这是我到目前为止的想法:

// create DOMDocument
$doc = new DOMDocument();
// load WYSIWYG html into DOMDocument
$doc->loadHTML($html_from_editor);
// create DOMXpath
$xpath = new DOMXpath($doc);
// create list of all first level DOMNodes (these are p's or ul's in most cases)
$children = $xpath->query("/");
foreach ( $children AS $child ) {
    // now get all images
    $cpath = new DOMXpath($child);
    $images = $cpath->query('//img');
    foreach ( $images AS $img ) {
        // get attributes
        $atts = $img->attributes;
        // create replacement
        $lb_div = $doc->createElement('div');
        $lb_a = $doc->createElement('a');
        $lb_img = $doc->createElement('img');
        $lb_img->setAttribute("src", '/files/thumbs'.$atts->src);
        $lb_a->setAttribute("href", '/files/fullview'.$atts->src);
        $lb_a->setAttribute("rel", "lightbox[slide][".$atts->alt."]");
        $lb_a->appendChild($lb_img);
        $lb_div->setAttribute("class", "custom");
        $lb_div->appendChild($lb_a);
        $child->insertBefore($lb_div);
        // remove original node
        $child->removeChild($img);
    }
}

我遇到的问题:

1. `$atts` 未填充值。它确实包含正确的属性名称，但缺少值。
2. 如果我理解正确的话，应该在子节点的父节点上调用 `insertBefore`。因此，它应该是 `$child->parentNode->insertBefore($lb_div, $child);` 但父节点未定义。
3. 删除原始 img 标签不起作用。

对于我遗漏的任何建议，我将不胜感激。我走在正确的轨道上还是应该完全不同？

比提前，保罗

Answer 1

应该这样做(demo):

$dom = new DOMDocument;
$dom->preserveWhiteSpace = false;
$dom->loadXML("<div>$xhtml</div>"); // we need the div as root element

// find all img elements in paragraphs in the partial body
$xp = new DOMXPath($dom);
foreach ($xp->query('/div/p/img') as $img) {

    $parentNode = $img->parentNode; // store for later
    $parentNode->removeChild($img); // unlink all found img elements

    // create a element
    $a = $dom->createElement('a');
    $a->setAttribute('href', '/files/fullview/' . basename($img->getAttribute('src')));
    $a->setAttribute('rel', sprintf('lightbox[group][%s]', $img->getAttribute('alt')));
    $a->appendChild($img);

    // prepend img src with path to thumbs and remove alt attribute
    $img->setAttribute('href', '/files/thumbs' . $img->getAttribute('src'));
    $img->removeAttribute('alt'); // imo you should keep it for accessibility though

    // create the holding div
    $div = $dom->createElement('div');
    $div->setAttribute('class', 'custom');
    $div->appendChild($a);

    // insert the holding div
    $parentNode->parentNode->insertBefore($div, $parentNode);
}

$dom->formatOutput = true;
echo $dom->saveXml($dom->documentElement);