0

凯我真的坚持这个:/ 到目前为止,如标题和 DOMDocument 中提到的那样尝试了 SimpleHTMLDom .. $html 将来自我的 Processwire 驱动页面中的 CKEditor,我制作了一个 textformatter 来自动对输出进行后处理。

所以这是测试数据

<?php
$html = <<<_DATA
    <p><img src="http://placehold.it/100x100"><img src="http://placehold.it/130x100">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
_DATA;

所以这是我的 SimpleHTMLDom 尝试

<?php
$dom = str_get_html($html);
$imgs = $dom->find('img');

foreach ($imgs as $img) {
    $i = $img->outertext;
    $img->outertext = '';
    $img->parent()->outertext = $i . $img->parent()->outertext;
}
echo $dom->save();
$dom->clear();

上面的 $html 中只有一个 img 并且一切都按预期工作,但是这两个(或更多)返回重复项。

  1. 问题,它改变了排序顺序,所以 130x100 的图像将是第一个。我知道我在预先设置,但我不知道如何更改它。试图将所有图像填充到一个变量中,以便它们保持有序,但是我不知道如何将它添加到段落中。

  2. 实际上更重要的问题是关于重复的,奇怪的是,它正确地添加了所有图像,但它只是删除了段落中的第一个 img 并且对于任何其他图像都是如此,所以使用 3 它将保留最后两个(正如我所说, 1 可以正常工作)

我究竟做错了什么?

这在一个单独的问题中可能会更好,但我想表明我也尝试过 DOMDocument 但无法让 insertBefore 工作(根本)我尝试了不同的变体(在下面的代码中未注释)

<?php
include_once "./classes/SmartDOMDocument.class.php";
$dom = new SmartDOMDocument();
$dom->loadHTML($html);

$imgs = $dom->getElementsByTagName('img');

foreach ($imgs as $img) {
    $i = $dom->createElement('img');
    $i->src = $img->getAttribute('src');
    $img->parentNode->insertBefore($i, $img->parentNode);
    // $img->insertBefore($i, $img->parentNode);
    // $dom->insertBefore($i, $img->parentNode);
    $img->parentNode->removeChild($img);
}

echo $dom->saveHTMLExact();

如果某些内容记录得不够好或被问到,请随时发表评论,我会尽力解释得更好:)

编辑: html(来自上面提到的所见即所得)有时会在段落的中间或结尾保存图像,可能包含单个或多个图像(未定义的数字),并且该 html 中会有多个段落

编辑:应该包括我希望输出的方式

所以这是输入

<p>
    <img src="http://placehold.it/100x100">
    <img src="http://placehold.it/130x100">
    <img src="http://placehold.it/160x100">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
</p>

这应该是结果

<div class="inlineGallery">
    <figure><img src="http://placehold.it/100x100"></figure>
    <figure><img src="http://placehold.it/130x100"></figure>
    <figure><img src="http://placehold.it/160x100"></figure>
</div>
<p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
</p>

很抱歉没有提到这些图像应该被包装在数字中,然后在一个容器中..单个图像不需要额外的容器,但这实际上并不重要..我用完整的代码进行了测试..在图中包装图像,添加figcaption 在适用的情况下并将多个图形包装在一个 div 中,所有内容都适用于只有单个图像的文章,然后我在另一篇文章中遇到了一些类似于上面测试数据的 html,导致提到的重复..所以我剥离了代码看看问题出在哪里没有运气..这就是为什么我只是在问题中添加了这个简单的代码,因为我认为一旦这个工作正常,另一个也可以工作;-)

希望现在更清楚?!

4

2 回答 2

0

所以这是完成所质疑工作的基本代码

// turn double linebreaks into paragraphs <br><br> to </p><p>
$value = preg_replace('#(?:<br\s*/?>\s*?){2,}#', '</p><p>', $value);

$dom = str_get_html($value);

/* first getting all <p> */
$paragraphs = $dom->find('p');

foreach ($paragraphs as $p) {
    $imgs = $p->find('img');

    /* init gallery container */
    $gallery = "<div class='gallery'>";
    foreach  ($imgs as $img) {
        /* get the current image */
        $i = $img->outertext;
        /* wrap in link */
        $i = "<a href='Link'>$i</a>";
        /* append to gallery */
        $gallery .= $i;
        /* remove original image from paragraph */
        $img->outertext = '';
    }
    /* close new gallery */
    $gallery .= "</div>";
    /* remove unnecessary <br> */
    $newParagraph = trim(preg_replace( '#^\s*(?:<br\s?\/?>)*\s*|(?:<br\s?\/?>)*\s*$#', '', trim($p->innertext)));
    /* wrap tidied text into <p> */
    $newParagraph = "<p>$newParagraph</p>";
    /* replace old paragraph by gallery and new paragraph */
    $p->outertext = $gallery . $newParagraph;
}
// save dom to $value
$value = $dom->save();
// clear dom
$dom->clear();

但是谁对我使用它的完整计划感兴趣应该看看 Processwire 论坛https://processwire.com/talk/topic/13471-better-ckeditor-image-insertion-at-least-for-me /

于 2016-06-05T18:43:10.030 回答
-1

更新示例:-)

<?php
    $html = "asdasd <p><img class=\"wrap\" src=\"http://placehold.it/100x100\">    <img class=\"wrap\" src=\"http://placehold.it/130x100\">  <img class=\"wrap\" src=\"http://placehold.it/160x100\">    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p> asdasd    ";

    $pattern = '/(<p>)((<img [^>]+>\s*)+)(.+?)(<\/p>)/i';

    $replacement = '<div class="inlineGallery">${2}</div> ${1} ${4}${5}';
    $html2 = preg_replace($pattern, $replacement, $html);

    $pattern2 = '/(<img class=\"wrap\" [^>]+>)/i';
    $replacement2 = '<figure>${1}</figure>';
    echo preg_replace($pattern2, $replacement2, $html2);
?>

它可能可以在一个正则表达式中完成,但这是我的解决方案。您必须对这些图像进行一些识别才能进行第二次运行。

于 2016-05-31T06:00:36.757 回答