“a”标签内的块元素（htmlpurifier）答案

【问题标题】：Block elements inside "a" tag (htmlpurifier)“a”标签内的块元素（htmlpurifier）
【发布时间】：2015-07-29 12:15:44
【问题描述】：

如何防止 HTMLPURIFIER 破坏此代码：

<a target="_blank" href="http://www.example" class="link_normal opacity">
<blockquote url="http://www.example" class="big">
    <div class="center">
        <div class="table_cell"><img src="/images/imagenes_urls/4241.jpg" class="img_url"></div>
    </div>
    <p style="color:#3b5998" class="b">Desde los 80 hasta 2015, así ha sido la impresionante evolución de los móviles</p>
    <p>¿Cómo olvidarse de aquellos enormes objetos a los que llamábamos teléfonos móviles? Muchos de vosotros los recordar...</p>
    <span class="dominio">andro4all.com</span>
</blockquote></a>

当我使用它时，它会变成这样：

<blockquote class="big">
<a class="link_normal opacity" href="http://www.example"></a>
<div class="center">
    <a class="link_normal opacity" href="http://www.example"></a>
    <div class="table_cell">
        <a class="link_normal opacity" href="http://www.example">
        <img alt="4241.jpg" class="img_url" src="/images/imagenes_urls/4241.jpg">
        </a>
    </div>
    <a class="link_normal opacity" href="http://www.example"></a>
</div>
<a class="link_normal opacity" href="http://www.example"></a>
<p class="b" style="color:#3b5998;">
<a class="link_normal opacity" href="http://www.example">Desde los 80 hasta 2015, asÃ ha sido la impresionante evoluciÃ³n de los mÃ³viles</a>
</p></blockquote>

【问题讨论】：

阅读：stackoverflow.com/questions/3379392/…
我不知道/使用 htmlpurifier，但我认为它并没有破坏它，它使其符合 HTML4 标准，其中没有块级元素可以包含在内联级中锚标记。 HTML 5 引入了这种可能性（返回？），因为这确实是一种常见用法，并且保持它非标准意味着开发一些 javascript，这些 javascript 在大多数情况下会比这个相当干净的解决方案更不实用或更易于访问。 this answer总结的很好
另见stackoverflow.com/questions/5667857/…

标签： php htmlpurifier

【解决方案1】：

你可以使用一个技巧，比如将 JavaScript 添加到你的主标签中：

onclick="document.location='http://www.example'"

你可以给光标添加指针样式，让它看起来像一个普通的链接：

style="cursor:pointer"

那将是这样的：

<blockquote url="http://www.example" class="big" onclick="document.location='http://www.example'" style="cursor:pointer">
    <div class="center">
        <div class="table_cell"><img src="/images/imagenes_urls/4241.jpg" class="img_url"></div>
    </div>
    <p style="color:#3b5998" class="b">Desde los 80 hasta 2015, así ha sido la impresionante evolución de los móviles</p>
    <p>¿Cómo olvidarse de aquellos enormes objetos a los que llamábamos teléfonos móviles? Muchos de vosotros los recordar...</p>
    <span class="dominio">andro4all.com</span>
</blockquote>

【讨论】：

【解决方案2】：

在 HTML4 中用内联标签包装分组标签块引用是无效的。

你也可以在这里找到关于这个标签http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-blockquote-element的好信息

【讨论】：

【解决方案3】：

经过实验，我刚刚发现了这个特定问题的巧妙答案。您可以自定义 HTMLPurifier 的行为，如 http://htmlpurifier.org/docs/enduser-customize.html 所述。

具体来说，您可以通过重新定义元素来覆盖“a”锚元素的默认行为，如下所示：

include_once('HTMLPurifier.auto.php');
$config = HTMLPurifier_Config::createDefault();
$def = $config->getHTMLDefinition(true);

// here is the magic method that overwrites the default anchor definition
$def->addElement(
  'a', // element name
  'Inline', // the type of element: 'Block','Inline', or false, if it's a special case
  'Flow', // what type of child elements are permitted: 'Empty', 'Inline', or 'Flow', which includes block elements like div
  'Common' // permitted attributes
);

$purifier = new HTMLPurifier($config);

// $dirty_html is the html you want cleaned
echo $purifier->purify($dirty_html);

现在您可以按照 HTML5 规范 (http://dev.w3.org/html5/markup/a.html) 的规定在锚标记中包含块元素。

对于更强大的 HTML5 解决方案，Christoffer Bubach 提供了详细的 HTMLPurifier 配置以允许更新的 HTML5 标记，尽管它没有重新定义锚标记以允许其中的块元素。查看他对这个 SO 问题的回答：HTML filter that is HTML5 compliant

【讨论】：