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