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

SOLVED

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

Avatar

Level 5

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

1631545_pastedImage_1.png

1631586_pastedImage_3.png

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

1 Accepted Solution

Avatar

Correct answer by
Level 1

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

View solution in original post

6 Replies

Avatar

Correct answer by
Level 1

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

Avatar

Level 1

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

Avatar

Level 3

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?

1796580_pastedImage_0.png

Avatar

Level 5

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