Issue with Div tag inside an anchor tag

[Shashi]

Hello,

Currently we are using the below Telerik editor and we have a Div tag inside an anchor tag and noticed the when we switch from html to design it completely changes the html structure. Does Telerik have a fix for this issue since this is a valid html

https://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx

Expected HTML
<div class="image-container"><a href="~/media/9e240848ab264358a85b71a5ef739fbb.ashx?w=900" data-lightbox="9E240848-AB26-4358-A85B-71A5EF739FBB" name="AD7175-2-PR_9E240848-AB26-4358-A85B-71A5EF739FBB"></a><div class="icon-zoom"><a href="~/media/9e240848ab264358a85b71a5ef739fbb.ashx?w=900" data-lightbox="9E240848-AB26-4358-A85B-71A5EF739FBB" name="AD7175-2-PR_9E240848-AB26-4358-A85B-71A5EF739FBB"> test</a></div></div>

Telerik is change it to , as you notice it adds additional anchor tags

<div class="image-container"><a href="~/media/9e240848ab264358a85b71a5ef739fbb.ashx?w=900" data-lightbox="9E240848-AB26-4358-A85B-71A5EF739FBB" name="AD7175-2-PR_9E240848-AB26-4358-A85B-71A5EF739FBB">
</a>
<div class="icon-zoom"><a href="~/media/9e240848ab264358a85b71a5ef739fbb.ashx?w=900" data-lightbox="9E240848-AB26-4358-A85B-71A5EF739FBB" name="AD7175-2-PR_9E240848-AB26-4358-A85B-71A5EF739FBB"> test</a></div>
</div>

Please advise how this can be fixed.

[Rumen]

Hi Shashi,

I examined the provided markup and noticed that the original and the resulted markup are identical, after excluding the new lines.

Nevertheless, can you please disable the ConvertToXhtml filter and test the scenario once again?

Update: You can also replace the div element with span element for the font icons. The problem does not happen with span elements:

<div class="image-container">
<a href="~/media/9e240848ab264358a85b71a5ef739fbb.ashx?w=900" data-lightbox="9E240848-AB26-4358-A85B-71A5EF739FBB" name="AD7175-2-PR_9E240848-AB26-4358-A85B-71A5EF739FBB">
<span class="icon-zoom"></span>
test</a>
</div>

Best Regards,
Rumen
Progress Telerik

[Shashi]

Sorry you are right :

Below is the intended HTML

<div class="image-container">
<a href="~/media/9e240848ab264358a85b71a5ef739fbb.ashx?w=900" data-lightbox="9E240848-AB26-4358-A85B-71A5EF739FBB" name="AD7175-2-PR_9E240848-AB26-4358-A85B-71A5EF739FBB">
<div class="icon-zoom"></div>
test</a>
</div>

Telerik is change it to , as you notice it adds additional anchor tags

<div class="image-container"><a href="~/media/9e240848ab264358a85b71a5ef739fbb.ashx?w=900" data-lightbox="9E240848-AB26-4358-A85B-71A5EF739FBB" name="AD7175-2-PR_9E240848-AB26-4358-A85B-71A5EF739FBB">
</a>
<div class="icon-zoom"><a href="~/media/9e240848ab264358a85b71a5ef739fbb.ashx?w=900" data-lightbox="9E240848-AB26-4358-A85B-71A5EF739FBB" name="AD7175-2-PR_9E240848-AB26-4358-A85B-71A5EF739FBB"> test</a></div>
</div>

 

We are using Sitecore and Span will work for new items but for existing items if they edit any existing item the problem will resurface. 

disable the ConvertToXhtml filter  worked, if we disable ConvertToXhtml filter   what will be the impact and functionality we will lose. 

[Rumen]

Hi Sashi,

The ConvertToXhtml filter converts the HTML from the editor content area to XHTML. When this filter is disabled the editor leaves the browser to validate the content. The rich text editing engine of the modern browsers does the validation well.

The other solution is to replace the inner div with the font icon class with a span element:

 

<div class="image-container">
<a href="~/media/9e240848ab264358a85b71a5ef739fbb.ashx?w=900" data-lightbox="9E240848-AB26-4358-A85B-71A5EF739FBB" name="AD7175-2-PR_9E240848-AB26-4358-A85B-71A5EF739FBB">
<span class="icon-zoom"></span>
test</a>
</div>

 

Regards,
Rumen
Progress Telerik