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

[varuns46785756]

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

        <items jcr:primaryType="nt:unstructured">

            <tabs

                jcr:primaryType="nt:unstructured"

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

                maximized="{Boolean}true">

                <items jcr:primaryType="nt:unstructured">

                    <headingSection

                        jcr:primaryType="nt:unstructured"

                        jcr:title="Heading Section"

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

                        margin="{Boolean}false">

                        <items jcr:primaryType="nt:unstructured">

                            <column

                                jcr:primaryType="nt:unstructured"

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

                                <items jcr:primaryType="nt:unstructured">

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

                        <items jcr:primaryType="nt:unstructured">

                            <column

                                jcr:primaryType="nt:unstructured"

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

                                <items jcr:primaryType="nt:unstructured">

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

                                            <items jcr:primaryType="nt:unstructured">

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

                                                    <rtePlugins jcr:primaryType="nt:unstructured">

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

                                                    <uiSettings jcr:primaryType="nt:unstructured">

                                                        <cui jcr:primaryType="nt:unstructured">

                                                            <inline

                                                                jcr:primaryType="nt:unstructured"

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

                                                                <popovers jcr:primaryType="nt:unstructured">

                                                                    <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]">

                                                                <popovers jcr:primaryType="nt:unstructured">

                                                                    <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

[varuns46785756]

Hi All,

Any suggestion?

Regards,

[huyp24302004 · Accepted solution]

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

[varuns46785756]

thanks huyp24302004

[vaishalil402340]

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

[alissonxavier01]

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?

[varuns46785756]

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.$);