Jeremy Davis
Sitecore, C# and web development
So while battling the jetlag that hit me pretty hard getting back from Sitecore Symposium, this issue came popped up in my bug queue last week. QA reported that a certain component on a test page was not allowing one field to be edited. It had worked in the past, but the behaviour suddenly changed so that one field no longer got the "you can edit this" overlay in Experience Editor. It took me longer than it should have to work out why...
Turning on "show controls" in Experience Editor showed the following:
The page's other fields are all editable, but the "This bit of text..." field isn't. And oddly an empty edit control has appeared above it. Looking at the view behind the control there are two editable fields:
But in the markup you can see in the browser, there seems to be an editable field with nothing in it, followed by the text for our field, followed by an empty element:
What's going on there?
Well the answer is pretty simple really:
<p/>
elements have rules about what they're allowed to contain. The rules say you can put "phrasing content" inside a paragraph. And those rules exclude other
<p/>
elements, or
<div/>s.
The content for the broken field was rich text, and looking at the HTML it contained:
There was another
<p/>
in the markup...
So that's what was breaking the editing behaviour. The Glass editing control was within a
<p/>, but the field contained a
<p/>. So the browser was seeing invalid HTML, and closing the first (view)
<p/>
before it started on the
<p/>
from the field's content. That meant Sitecore's Experience Editor markup was being applied to the first (empty) element, and not to the second one that the browser created – which had the field's text in it...
The key thing to remember is: When you're doing the HTML for your views, don't put
<p/>
element around a rich text field, unless you're doing something to restict the rich text to elements that are valid inside a
<p/>...
