Rich text editor is throwing error in AEM 6.4 when you make it part of any component

[Former Community Member]

Hi,

RTE in AEM 6.4 is throwing an error when I make the component configurable by adding a checkbox for users in the dialog for authors to use the RTE in any custom component. However, after I select the checkbox and add content to it and click on 'ok' checkmark, it throws an error initially but if I refresh the page, the component is throwing content in RTE correctly. If I again update the content in the same page and click on 'ok' checkmark, it's throwing the error again until I refresh the page.

Error message - Uncaught (in promise) TypeError: Cannot read properties of null (reading 'data')  - http://localhost:4502/libs/cq/gui/components/authoring/editors/clientlibs/core.894e3547679632b5f44a9...

The code for adding RTE in the component looks like this: <div data-category="${properties.tiletype}" data-sly-test="${properties.includedes}" data-sly-resource="${'something' @ resourceType='/apps/foldername/components/content/genericrichtext'}"></div>

If I use the RTE component all by itself and not as part of a different component then it's working fine. 

What could be causing this issue? 

[BrianKasingli]

Can you share the TouchUI Dialogue .content.xml please; 

[Former Community Member]

Hi Brian,

The .content.xml for this is pretty straightforward:

<?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" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="nt:unstructured"
jcr:title="Hero Component"
sling:resourceType="cq/gui/components/authoring/dialog">
<content
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/container">
<layout
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/layouts/tabs"
type="nav"/>
<items jcr:primaryType="nt:unstructured">
<general
jcr:primaryType="nt:unstructured"
jcr:title="general"
sling:resourceType="granite/ui/components/foundation/section">
<layout
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"
margin="{Boolean}false"/>
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/container">
<items jcr:primaryType="nt:unstructured">
<image
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/fileupload"
allowUpload="{Boolean}false"
autoStart="{Boolean}false"
class="cq-droptarget"
fieldLabel="Desktop Image"
fileNameParameter="./imgdesktopfile"
fileReferenceParameter="./imgherolist"
mimeTypes="[image]"
multiple="{Boolean}false"
name="./imgdesktopname"
title="Upload Image Asset"
uploadUrl="${suffix.path}"
useHTML5="{Boolean}true"/>
<imgalttext
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/textfield"
fieldLabel="Image Alt Text"
name="./imgalttext"/>
<imagepath
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/pathbrowser"
fieldLabel="Image Link"
name="./imglink"
rootPath="/content/"/>
<checkbox
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/checkbox"
name="./includedes"
text="Include RTE for Description"
type="checkbox"
value="{Boolean}true"/>
</items>
</column>
</items>
</general>
</items>
</content>
</jcr:root>

[Former Community Member]

Also, here's the RTE component code - 

<p data-sly-use.text="text.js" data-sly-unwrap="${text.context == text.CONST.CONTEXT_HTML}" class="${text.cssClass}">${text.text @ context=text.context && 'unsafe'}</p>

text.js:

"use strict";
use(function() {

var properties = granite.properties,
colWidths = properties.viewgrid ? properties.viewgrid.split(',') : [6,6],
col1 = colWidths[0],
col2 = colWidths[1];

return {
"col1" : col1,
"col2" : col2
};
$document.on("dialog-success", function() {

window.location.reload();

})
});

[Former Community Member]

Here's the content.xml for RTE itself:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="cq:EditConfig">
<cq:inplaceEditing
jcr:primaryType="cq:InplaceEditingConfig"
active="{Boolean}true"
editorType="text">
<config jcr:primaryType="nt:unstructured">
<rtePlugins jcr:primaryType="nt:unstructured">
<links jcr:primaryType="nt:unstructured">
<linkDialogConfig
jcr:primaryType="nt:unstructured"
height="{Long}316">
<linkAttributes jcr:primaryType="cq:WidgetCollection">
<linkAdvanced
jcr:primaryType="cq:Widget"
collapsed="{Boolean}true"
collapsible="{Boolean}true"
inputValue="advanced"
name="./linkdialog/cq:adhocLinkTrackingTab"
title="Link tracking"
xtype="dialogfieldset">
<items jcr:primaryType="cq:WidgetCollection">
<enable
jcr:primaryType="nt:unstructured"
attribute="enabletracking"
fieldDescription="override analytics framework settings"
fieldLabel="Custom link tracking"
name="./linkdialog/cq:adhocLinkTrackingEnableTracking"
xtype="checkbox">
<listeners
jcr:primaryType="nt:unstructured"
check="function(component){var dlg=component.findParentByType('rtelinkdialog');dlg.enableSCFields(component.checked);}"/>
</enable>
<events
jcr:primaryType="nt:unstructured"
attribute="adhocevents"
fieldDescription="e.g.: event2, event7"
fieldLabel="Include SiteCatalyst events"
name="./linkdialog/cq:adhocLinkTrackingEvents"
xtype="textfield"/>
<evars
jcr:primaryType="nt:unstructured"
attribute="adhocevars"
fieldDescription="e.g.: eVar1: pagedata.url, prop4: 'const'"
fieldLabel="Include SiteCatalyst variables"
name="./linkdialog/cq:adhocLinkTrackingEvars"
xtype="textfield"/>
</items>
</linkAdvanced>
</linkAttributes>
</linkDialogConfig>
</links>
</rtePlugins>
</config>
</cq:inplaceEditing>
</jcr:root>