Monday, November 19, 2012

Sitecore Page Editor - RTE field cant be edited

To ensure Page Editor works well in Sitecore, components will need to be coded using Sitecore controls such as 

<sc:text field='text' runat='server'>

So for example if my components html code as such below 

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="StoryResources.ascx.cs"
    Inherits="Sitecore.Web.layouts.StoryResources" %>

    <p>
<sc:text field='text' runat='server'>
    </p>


I would expect that my RTE field called 'Text' will be editable in Page Editor. Surprise surprise, it is not editable. In fact when I look at the Firebug console, there is js error. 

Thinking hard plus trial and error, found out the issue was because of the nested P tag. This is introduce when wrapping my sc:text with a P tag. Now of course being a RTE editor chances of having a P tag in it is high. This resulted into nested P. 

Further to that, I googled nested P tag to found out what happened when you nest a P tag and I found an interesting article. Below is the link 

http://cksource.com/forums/viewtopic.php?f=6&t=11870

In the article, it mentions that nested P tag will transform into unnested P tag. This transformation or invalid html cause the Page Editor to break. So to resolve this, I wrapped the sc:text with a div instead.