页面编辑器中的Sitecore富文本字段包含HTML格式时不可编辑

Question

我有许多可在页面编辑器中编辑的字段。其中之一是富文本字段。这是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>
}

富文本字段为Speaker_Description。如果字段中没有HTML (即纯文本)，它将正确呈现并可在页面编辑器中编辑。当字段包含html时，例如在<p>标记中换行或包含换行符，它将正确呈现，但不能在页面上编辑。我仍然可以在Sitecore中编辑该字段，但在页面编辑器中无法单击该区域。

Answer 1

当您将可编辑的富文本放入<p>标记中时，这是一个已知的问题。

在<p>标签中有很多不被允许的html标签。这就是为什么你的浏览器关闭了<p>标签，破坏了可编辑富文本的功能。

去掉@Editable周围的<p>标签。

Answer 2

这是一个已知的问题，但最快的方法是找出是哪个p标记导致的问题(最有可能是在@editable周围)，打开dev工具并查看控制台中的错误。希望这能有所帮助