New Participant

Solved

RTE issue in Multifield in AEM6.4 with SP6.4.2

Forum|Forum|7 years ago
November 27, 2018
6 replies
5919 views

Hi All,

I am using AEM6.4 and I have created multifield with RTE but I am not able to save the values .I am getting below error when I am submitting the box: when I am clicking on add button getting "sourceEditMode" error and if am trying to click save button ,its not working and getting " fieldAPI.getName" error.If I am removing RTE field(node) from dialog then its working fine.

NOTE: I am using SP6.4.2, if I am uninstalling this SP then I am able to save the value and not getting the second error but still getting the first error(sourceEditMode).

As suggested in different solutions, I have updated the sling:resurceType from Granite form components to Coral UI 3 (granite/ui/components/coral/foundation/form/*) but still its not working.Please check my dialog.xml:

<?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="Products"

sling:resourceType="cq/gui/components/authoring/dialog">

<content

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/container">

<tabs

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/tabs"

maximized="{Boolean}true">

<headingSection

jcr:primaryType="nt:unstructured"

jcr:title="Heading Section"

sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"

margin="{Boolean}false">

<column

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/container">

<heading

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/form/textfield"

fieldDescription="Heading of Product section"

fieldLabel="Heading"

name="./heading"/>

<showSelectButton

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"

fieldDescription="Show or Hide Select button based on selection"

name="./showSelectButton"

text="Show Select Button"

uncheckedValue="false"

value="true"/>

<selectButtonLink

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/form/pathbrowser"

fieldDescription="Link of Select button"

fieldLabel="Link of Select Button"

name="./selectButtonLink"

rootPath="/content/velobank"/>

<selectButtonText

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/form/textfield"

fieldDescription="Text on Select button"

fieldLabel="Select Button Text"

name="./selectButtonText"/>

<selectButtonTitle

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/form/textfield"

fieldDescription="Title of Select Button"

fieldLabel="Title of Select Button"

name="./selectButtonTitle"/>

</items>

</column>

</items>

</headingSection>

<productsDetail

jcr:primaryType="nt:unstructured"

jcr:title="Product Detail"

sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"

margin="{Boolean}false">

<column

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/container">

<multifieldcollection

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/form/multifield"

composite="{Boolean}true"

fieldDescription="Click on Add button to add a new product"

fieldLabel="Product Detail"

name="./productsDetailCollection">

<field

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/container"

name="./productsDetail">

<productImage

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/form/pathbrowser"

fieldDescription="Product Image"

fieldLabel="Product Image"

name="./productImage"

rootPath="/content/dam/velobank"/>

<altText

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/form/textfield"

fieldDescription="Alternate Text of Product Image"

fieldLabel="Alternate Text"

name="./altText"/>

<productHeading

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/form/textfield"

fieldDescription="Product Heading"

fieldLabel="Product Heading"

name="./productHeading"/>

<productDescription

jcr:primaryType="nt:unstructured"

sling:resourceType="cq/gui/components/authoring/dialog/richtext"

fieldDescription="Product Description"

fieldLabel="Product Description"

name="./productDescription"

useFixedInlineToolbar="{Boolean}true">

<format

jcr:primaryType="nt:unstructured"

features="*"/>

<justify

jcr:primaryType="nt:unstructured"

features="*"/>

<lists

jcr:primaryType="nt:unstructured"

features="*"/>

<paraformat

jcr:primaryType="nt:unstructured"

features="*"/>

<links

jcr:primaryType="nt:unstructured"

features="*"/>

<table

jcr:primaryType="nt:unstructured"

features="-">

<hiddenHeaderConfig

jcr:primaryType="nt:unstructured"

hiddenHeaderClassName="cq-wcm-foundation-aria-visuallyhidden"

hiddenHeaderEditingCSS="coral-RichText-hiddenHeader--editing"/>

</table>

</rtePlugins>

<inline

jcr:primaryType="nt:unstructured"

toolbar="[format#bold,format#italic,format#underline,#justify,#lists,links#modifylink,links#unlink,#paraformat]">

<justify

jcr:primaryType="nt:unstructured"

items="[justify#justifyleft,justify#justifycenter,justify#justifyright]"

ref="justify"/>

<lists

jcr:primaryType="nt:unstructured"

items="[lists#unordered,lists#ordered,lists#outdent,lists#indent]"

ref="lists"/>

<paraformat

jcr:primaryType="nt:unstructured"

items="paraformat:getFormats:paraformat-pulldown"

ref="paraformat"/>

</popovers>

</inline>

<dialogFullScreen

jcr:primaryType="nt:unstructured"

toolbar="[format#bold,format#italic,format#underline,justify#justifyleft,justify#justifycenter,justify#justifyright,lists#unordered,lists#ordered,lists#outdent,lists#indent,links#modifylink,links#unlink,table#createoredit,#paraformat,image#imageProps]">

<paraformat

jcr:primaryType="nt:unstructured"

items="paraformat:getFormats:paraformat-pulldown"

ref="paraformat"/>

</popovers>

</dialogFullScreen>

<tableEditOptions

jcr:primaryType="nt:unstructured"

toolbar="[table#insertcolumn-before,table#insertcolumn-after,table#removecolumn,-,table#insertrow-before,table#insertrow-after,table#removerow,-,table#mergecells-right,table#mergecells-down,table#mergecells,table#splitcell-horizontal,table#splitcell-vertical,-,table#selectrow,table#selectcolumn,-,table#ensureparagraph,-,table#modifytableandcell,table#removetable,-,undo#undo,undo#redo,-,table#exitTableEditing,-]"/>

</cui>

</uiSettings>

</productDescription>

</items>

</field>

</multifieldcollection>

</items>

</column>

</items>

</productsDetail>

</items>

</tabs>

</items>

</content>

</jcr:root>

thanks

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by huyp24302004

I got the same issue when installing services pack 2 of AEM 6.4.2. It was a bug. To resolve it, we need to create a custom adapter for rich text like below

varuns46785756Author

New Participant

HI alissonxavier0105,

I am using SP 6.4.2 and I was getting different console error. I have installed hotfix( validation.js) file and my error got resolved.

Please check the file:

(function(window, document, $) {

"use strict";

var DATA_RTE_INSTANCE = "rteinstance";

var INVALID_ATTR = "invalid";

var ARIA_REQUIRED_ATTR = "aria-required";

var RICH_TEXT_SELECTOR = ".cq-RichText";

var RICH_TEXT_EDITABLE_SELECTOR = ".cq-RichText-editable";

var requiredString;

function getRequiredString() {

if (!requiredString) {

requiredString = Granite.I18n.get("Please fill out this field.");

}

return requiredString;

}

function handleValidation(el) {

var api = el.adaptTo("foundation-validation");

if (api) {

api.checkValidity();

api.updateUI();

}

var registry = $(window).adaptTo("foundation-registry");

registry.register("foundation.adapters", {

type: "foundation-field",

selector: RICH_TEXT_SELECTOR + "," + RICH_TEXT_EDITABLE_SELECTOR,

adapter: function(container) {

var editor = container.querySelector(RICH_TEXT_EDITABLE_SELECTOR);

if (editor) {

return {

isInvalid: function() {

return editor.hasAttribute(INVALID_ATTR);

},

setInvalid: function(invalid) {

if (invalid) {

editor.setAttribute(INVALID_ATTR, "");

} else {

editor.removeAttribute(INVALID_ATTR);

}

},

getName: function() {

return editor.getAttribute('name');

},

setName: function(value) {

container.querySelector("input[type='hidden'][data-cq-richtext-input='true']").name = value;

editor.setAttribute('name', value);

}

};

}

});

// Selector for Richtext-editor

registry.register("foundation.validation.selector", {

submittable: RICH_TEXT_SELECTOR + "," + RICH_TEXT_EDITABLE_SELECTOR,

candidate: RICH_TEXT_SELECTOR + "," + RICH_TEXT_EDITABLE_SELECTOR

});

// Validator required for Richtext-editor

registry.register("foundation.validation.validator", {

selector: RICH_TEXT_SELECTOR + "," + RICH_TEXT_EDITABLE_SELECTOR,

validate: function(element) {

// Get the inner element

var $el = $(element).find(RICH_TEXT_EDITABLE_SELECTOR).addBack(RICH_TEXT_EDITABLE_SELECTOR);

var html;

if ($el.data(DATA_RTE_INSTANCE).sourceEditMode) {

return Granite.I18n.get("Please exit Source-edit mode before saving the changes");

}

if ($el.attr(ARIA_REQUIRED_ATTR) === "true") {

var rteInstance = $el.data(DATA_RTE_INSTANCE);

if (rteInstance) {

html = $el.data(DATA_RTE_INSTANCE).getContent();

}

if (html === undefined) {

html = $el.html();

}

if (html.length === 0) {

return getRequiredString();

}

});

$(document).on("foundation-contentloaded", function(e) {

var $richTextDiv = $(e.target).find(RICH_TEXT_EDITABLE_SELECTOR);

$richTextDiv.each(function() {

$(this).on("editing-start", function() {

var $this = $(this);

var rte = $this.data(DATA_RTE_INSTANCE);

var ek = rte.editorKernel;

// RTE UI Listeners are called in the order they are registered.

// So, this handler will be called after the handler RTE registers on this event, in which

// RTE would set 'rte.sourceEditMode' to true

ek.addUIListener("disablesourceedit", function () {

handleValidation($this);

});

// Driver for Richtext-editor

$(document).on("change", RICH_TEXT_EDITABLE_SELECTOR, function(e) {

handleValidation($(this));

});

})(window, document, Granite.$);

A

alissonxavier01

New Participant

Hi varuns46785756,

Did you resolve your problem?

I have updated my AEM to SP 6.4.5 and it is showing this problem bellow.

Does anyone have solutions about that?

vaishalil402340

New Participant

Does this work for AEM 6.3 as well ? Please Confirm. Thanks in advance.

varuns46785756Author

New Participant

thanks huyp24302004

H

huyp24302004Accepted solution

New Participant

I got the same issue when installing services pack 2 of AEM 6.4.2. It was a bug. To resolve it, we need to create a custom adapter for rich text like below

varuns46785756Author

New Participant

Hi All,

Any suggestion?

Regards,

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded