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 <p> 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.

Answer 1

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

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

Remove <p> tag which is around the @Editable.