Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

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

Anonymous
Not applicable

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? 

 

ReemaAEM_3-1635877340940.png

 

ReemaAEM_0-1635876594133.pngReemaAEM_1-1635876712601.png

 

ReemaAEM_2-1635876767863.png

 

4 Replies
BrianKasingli
Community Advisor
Community Advisor

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

Anonymous
Not applicable

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>

Anonymous
Not applicable

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();

})
});

Anonymous
Not applicable

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>