Touch UI (Rich Text) Overlay Component does not work when included statically on the template

<div data-sly-resource="${ @path='richText' , resourceType='/apps/XXX/components/content/text'}" ></div>
Included Statically on a Template. When Tries to Edit the dialog :

I see error in console
GET http://localhost:4502/content/a/b/c/jcr:content/richText.json?_=1458055488719 404 (Not Found)

But when I drop the component statically on a template it works fine.
This is because when you include it that way, the "text" resource is technically null and not available. Since you're including it in your page component, modify the associated template and pre-set the text node. Example:

<?xml version="1.0" encoding="UTF-8"?>

<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"

          jcr:description="Page Template"

          jcr:primaryType="cq:Template"

          jcr:title="Page Template"

          allowedPaths="[/content/site/en(/.*)?]"

          ranking="{Long}100">

    <jcr:content

            jcr:primaryType="cq:PageContent"

            sling:resourceType="site/components/page/interior"

            cq:designPath="/etc/designs/site">

            <text jcr:primaryType="nt:unstructured" sling:resourceType="wcm/foundation/components/text" />

    </jcr:content>

</jcr:root>

Read More