Sitecore rich text field in page editor is not editable when it contains HTML formatting

Question

I have a number of fields that are editable in Page Editor. One of them is a rich text field. This is the html:

@foreach (var speaker in Model.Speakers)
{
    <div class="speaker__item" id="@speaker.Id">
        <div class="speaker__media">
            @RenderImage(speaker, x => x.Speaker_Image, isEditable: true)
        </div>
        <div class="speaker__info">
            @if (IsInEditingMode || !string.IsNullOrEmpty(speaker.Speaker_Name))
            {
                <h4 class="speaker__name">@Editable(speaker, x => x.Speaker_Name)</h4>
            }

            @if (IsInEditingMode || !string.IsNullOrEmpty(speaker.Speaker_Title))
            {
                <p class="speaker__title">@Editable(speaker, x => x.Speaker_Title)</p>
            }

            @if (IsInEditingMode || !string.IsNullOrEmpty(speaker.Speaker_Description))
            {
                <div class="speaker__bio">
                    <p>@Editable(speaker, x => x.Speaker_Description)</p>
                </div>
            }

            @RenderLink(speaker, x => x.Speaker_Bio, attributes: new { @class = "speaker__link" }, isEditable: true)
        </div>
    </div>
}

The rich text field is Speaker_Description. When there is no HTML in the field (i.e. just plain text), it renders correctly and is editable in page editor. When the field does contain html, such as being wrapped in a  tag or including line breaks, it renders correctly, but is not editable on the page. I can still edit the field in Sitecore, but the area is unclickable in Page Editor.

Try removing `
` tag which is areound the @Editable. I think this might be related to the html tags which are not allowed inside a `
` tag and which cause that browser close `
` tag and breaks the functionality of ediable rich text. — Marek Musielak, Dec 21 '17 at 18:41
Yes I am ;) And I'm glad I could help. I converted my comment into an answer. — Marek Musielak, Dec 21 '17 at 20:43

score 8 · Accepted Answer · answered Dec 21 '17 at 20:42

This is a known issue when you put an editable rich text inside a  tag.

There are plenty of html tags which are not allowed inside a  tag. That why your browser closes  tag and break the functionality of editable rich text.

Remove  tag which is around the @Editable.

score 0 · Answer 2 · answered Dec 28 '17 at 02:22

0

This is a known issue, but the quickest way to find out which p tag is causing the problem (most likely the around the @editable), open dev tools and look at console for errors. Hope this helps

answered Dec 28 '17 at 02:22

snit80

623
7
13

Sitecore rich text field in page editor is not editable when it contains HTML formatting

2 Answers2