CODEWITHSUNDEEP
djangowagtail
higab85
higab85

Reputation: 72

Richtext in Django renders wrong

I'm using wagtail 2.3 on Django 2.1, and for a specific loop, the richtext elements which contain an <a>tag are rendered wrong.

This is the template used:

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

The snippet below shows 3 elements being rendered. The first two are rendered correctly inside their <a>, however the third one isn't:

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

Thanks.

Upvotes: 1

Views: 415

Answers (1)

gasman
gasman

Reputation: 25227

This isn't really a Wagtail issue. Here Wagtail is simply doing what your template is telling it to do, and placing a link inside another link, which isn't valid HTML. Your browser is then trying to recover from that by closing the link before opening the new one, which is what you're seeing in (presumably) the developer toolbar. If you use the browser's 'view source' option instead, you'll see the (invalid) nested links.

You'll need to either find a different way of implementing your Javascript interaction that doesn't require nesting links, or disallow links in that field via the features argument on the RichTextField / RichTextBlock.

Upvotes: 3

Related Questions