Wrapping and with rearranges DOM

CM1 Bugs
1

I’m trying to wrap an image and text below it with an anchor tag. I input this into a Rich Text widget Source Code:

 ```
 <figure class="newsletter"> <br>
   <a href="about-trees.html"> <br>
       <img src="trees.jpg" alt="Trees"> <br>
       <figcaption>These are trees</figcaption> <br>
   </a> <br> </figure> 
```

and after I click OK, CM1 rearranges the code to this:

 ```
 <figure class="newsletter"> <br>
   <a href="about-trees.html"> <br>
       <img src="trees.jpg" alt="Trees"> <br>
   </a> <br>
   <figcaption>These are trees</figcaption> <br> </figure> 
```
2

Hi Kevin,

This may be a bug. I will investigate this issue for you.

Sorry for the inconvenience.

3

Hi Armani,

Thanks for checking in on this.

4

Hi Kevin,

So it appears that you can not place <figcaption></figcaption> within anchor tags. the richtext widget will strip the anchor tags or in you scenario place the <figcaption></figcaption> outside the anchor tags.

This may be a bug so I will speak with our production team about this.

Again sorry for the inconvenience.

5

Kevin,

I just thought about this and it works. so what you could do instead is place anchor tags inside instead of around the <figcaption></figcaption>

Like this

<figure class="newsletter"><a href="about-trees.html"><img alt="Trees" src="trees.jpg"></a> <figcaption><a href="about-trees.html">These are trees</a></figcaption></figure>
6

That’s what I ended up doing, but I don’t like it. When the user hovers over the image and the figcaption, they highlight independently as if they link to two different pages. What should happen is both the image and figcaption should highlight when the user hovers over any of them.

7

Kevin, This is actually a shortcoming of TinyMCE, the component we use for Rich Text. We will log an issue with them and keep this open as a bug. However, we won’t know when this issue will be addressed.