Django 中的 Richtext 呈现错误

Question

我在 Django 2.1 上使用 wagtail 2.3，对于特定循环，包含 <a> 标签的富文本元素呈现错误。

这是使用的模板：

    <div id="interactions-table">
  {% for interaction in value.interactions %}
    <a href="javascript:;" class="interactions-table__elem combo-not-active" style="background-color: {{ interaction.interaction_type.colour }}">
      <p class="interaction-table__elem__interaction__name">{{ interaction.drug_name }}</p>
      <div class="d-none interaction-table__elem__interaction">
        <h4>{{ interaction.interaction_type }}</h4>
          {{ interaction.description | richtext }}
      </div>
    </a>
  {% endfor %}
</div>

下面的代码片段显示了正在呈现的 3 个元素。前两个在 <a> 内正确呈现，但第三个不是：

<div id="interactions-table">
  <a href="javascript:;" class="interactions-table__elem combo-not-active" style="background-color: #9BEA8B">
    <p class="interaction-table__elem__interaction__name">Paracetamol</p>
    <div class="d-none interaction-table__elem__interaction">
      <h4>Low risk and no synergy</h4>

        <div class="rich-text"><p>...</p></div>

    </div>
  </a>

  <a href="javascript:;" class="interactions-table__elem combo-not-active" style="background-color: #9BEA8B">
    <p class="interaction-table__elem__interaction__name">Ibuprofen</p>
    <div class="d-none interaction-table__elem__interaction">
      <h4>Low risk and no synergy</h4>

        <div class="rich-text"><p>content.... </p></div>

    </div>
  </a>

  <a href="javascript:;" class="interactions-table__elem combo-not-active" style="background-color: #F37A70">
    <p class="interaction-table__elem__interaction__name">Tricyclics</p>
  </a>
  <div class="d-none interaction-table__elem__interaction">
    <a href="javascript:;" class="interactions-table__elem combo-not-active" style="background-color: #F37A70">
      <h4>Dangerous</h4>
    </a>
    <div class="rich-text">
      <a href="javascript:;" class="interactions-table__elem combo-not-active" style="background-color: #F37A70"></a>
      <p>
        <a href="javascript:;" class="interactions-table__elem combo-not-active" style="background-color: #F37A70">
          beginning of content...
        </a>
        <a href="/somewhere">
          link in original content
        </a> 
        end of content 
      </p>
    </div>
  </div>
</div>

谢谢。

Answer 1

这并不是真正的 Wagtail 问题。这里 Wagtail 只是按照您的模板告诉它做的，并将一个 link 放在另一个 link 中，这是无效的 HTML。然后，您的浏览器会尝试通过在打开新浏览器之前关闭 link 来从中恢复，这就是您在（大概）开发人员工具栏中看到的内容。如果您改用浏览器的 'view source' 选项，您将看到（无效的）嵌套 links.

您需要找到一种不同的方式来实现不需要嵌套 link 的 Javascript 交互，或者通过features 关于 RichTextField / RichTextBlock 的参数。

Django 中的 Richtext 呈现错误

Richtext in Django renders wrong

django

wagtail