Django中的Richtext呈现错误

时间:2018-11-08 18:57:27

标签: django wagtail

我在Django 2.1上使用了wagtail 2.3,对于特定的循环,包含<a>标记的RTF元素被渲染为错误。

这是使用的模板:

    <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>

谢谢。

1 个答案:

答案 0 :(得分:3)

这实际上不是Wa问题。 Wagtail只是在做您的模板告诉它的操作,然后将一个链接放在另一个无效的HTML链接内。然后,您的浏览器尝试通过在打开新链接之前关闭链接来恢复该链接,这是您在开发人员工具栏中所看到的。如果改用浏览器的“查看源代码”选项,则会看到(无效的)嵌套链接。

您需要找到一种不需要嵌套链接的实现Javascript交互的不同方法,或者通过features / {{ 1}}。