I’ll Have A P Please Bob

This week we’re going to break some fields on the Experience Editor with 3 characters. As you can imagine, I’m rather pleased with this one.

Worth noting however – I’m a big fan of the Experience Editor (and the Page Editor before it). Since Sitecore 8.x was released this part of the system has been getting better and better. Us developers do have to be careful with it though – it needs a light touch and especially on early versions of Sitecore it can be a little fragile.

So, we’ve got a fresh install of Sitecore 8.1. We’re going to add a field to the sample template (an image field) like so:

Then we’re going to add it to the example Xsl rendering (yuck – Xsl makes me feel dirty and not in a good way!)

Now we’re ready to break shit.

Let’s add an unclosed

tag to that Text field. That’s the sort of thing our users would do on a Friday afternoon to make us happy right?

Now we’ll go in to the Experience Editor and see what that does… Ah, our good friend the sample page in the Experience Editor. Lets set an image shall we? Wait? What! That’s not where I added it…

This slideshow requires JavaScript.

How can we stop this happening?

The problem really is because there’s no container element separating the HTML of the Rich Text field from the HTML of the Image field. So when we open the

tag – that makes the DOM think that the image is part of the RTE field and so everything gets confused.

Its worth noting that if you try to add the

tag in the Experience Editor – the system attempts to self close the tag and all is dandy (you can only make this go wonky if you make the change in the Content Editor).

The simplest way to ensure this doesn’t happen is to separate fields in to more defined container elements. For example:

You’ll have to tell those pesky FED developers.

We could probably augment the Content Editor RTE process to close open tags (like the Experience Editor attempts to) but I think that might be overkill in this case. Just beat on the FEDs.