Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.

Custom attributes added are not prepopulated in RTE link widget

Avatar

Level 1

I have added two custom attributes to RTE link widget by modifying richtext/coralui3/js/RTE.CQLinkBaseDialog.js. I have added disableXSSFiltering property to my dialog so that these attributes are not stripped off when I reopen the dialog. Everything works fine till now. Now if I open the link widget authored attributes aren't prepopulated.

image.png

Authored values are prepopulated if I open the link widget without closing the dialog after authoring.

image.png

However I see the attributes if I check the source.

image.png

RTE.CQLinkBaseDialog.js -> 

 

 

 

 

;(function($) {

    CUI.rte.ui.cui.CQLinkBaseDialog = new Class({

        extend: CUI.rte.ui.cui.LinkBaseDialog,

        toString: "CQLinkBaseDialog",

        hbTemplate: (function anonymous(data_0) {
            var frag = document.createDocumentFragment();
            var el0 = document.createElement("div");
            el0.className += " rte-dialog-columnContainer";
            var el1 = document.createTextNode("\n    ");
            el0.appendChild(el1);
            var el2 = document.createElement("div");
            el2.className += " rte-dialog-column";
            var el3 = document.createTextNode("\n      ");
            el2.appendChild(el3);
            var el4 = document.createElement("foundation-autocomplete");
            el4.setAttribute("pickersrc", data_0["pickerSrc"]);
            el4.setAttribute("placeholder", CUI["rte"]["Utils"]["i18n"]('dialog.link.path'));
            el4.setAttribute("name", "href");
            var el5 = document.createTextNode("\n        ");
            el4.appendChild(el5);
            var el6 = document.createElement("coral-overlay");
            el6.className += " foundation-autocomplete-value foundation-picker-buttonlist";
            el6.setAttribute("data-foundation-picker-buttonlist-src", data_0["suggestionSrc"]);
            el4.appendChild(el6);
            var el7 = document.createTextNode("\n        ");
            el4.appendChild(el7);
            var el8 = document.createElement("coral-taglist");
            el8.setAttribute("foundation-autocomplete-value", "");
            el8.setAttribute("name", "href");
            el4.appendChild(el8);
            var el9 = document.createTextNode("\n      ");
            el4.appendChild(el9);
            el2.appendChild(el4);
            var el10 = document.createTextNode("\n    ");
            el2.appendChild(el10);
            el0.appendChild(el2);
            var el11 = document.createTextNode("\n");
            el0.appendChild(el11);
            frag.appendChild(el0);
            var el12 = document.createTextNode("\n");
            frag.appendChild(el12);
            
			var el13 = document.createElement("div");
            el13.className += " rte-dialog-columnContainer";
            var el14 = document.createTextNode("\n    ");
            el13.appendChild(el14);
            var el15 = document.createElement("div");
            el15.className += " rte-dialog-column";
            var el16 = document.createElement("label");
            var el17 = document.createTextNode(" ");
            el16.appendChild(el17);
            var el18 = document.createElement("input","coral-textfield");
            el18.setAttribute("is", "coral-textfield");
            el18.setAttribute("data-type", "title");
            el18.setAttribute("placeholder", CUI["rte"]["Utils"]["i18n"]('dialog.link.titleFieldPlaceHolder'));
            el16.appendChild(el18);
            var el19 = document.createTextNode(" ");
            el16.appendChild(el19);
            el15.appendChild(el16);
            var el20 = document.createTextNode(" ");
            el15.appendChild(el20);
            el13.appendChild(el15);
            var el21 = document.createTextNode("\n");
            el13.appendChild(el21);
            frag.appendChild(el13);
            var el22 = document.createTextNode("\n");
            frag.appendChild(el22);
			
			var e152 = document.createElement("div");
            e152.className += " rte-dialog-columnContainer";
            var el53 = document.createTextNode("\n    ");
            e152.appendChild(el53);
			var el54 = document.createElement("div");
            el54.className += " rte-dialog-column";
			var el55 = document.createElement("label");
            var el56 = document.createTextNode(" ");
            el55.appendChild(el56);
            var el57 = document.createElement("input","coral-textfield");
            el57.setAttribute("is", "coral-textfield");
            el57.setAttribute("data-type", "data-bactmln");
            el57.setAttribute("placeholder", "Tracking Tag");
            el55.appendChild(el57);
            var el58 = document.createTextNode(" ");
            el55.appendChild(el58);
            el54.appendChild(el55);
            var el59 = document.createTextNode(" ");
            el54.appendChild(el59);
            e152.appendChild(el54);
            var el60 = document.createTextNode("\n");
            e152.appendChild(el60);
            frag.appendChild(e152);
			var e170 = document.createTextNode("\n");
            frag.appendChild(e170);

            var e161 = document.createElement("div");
            e161.className += " rte-dialog-columnContainer";
            var el62 = document.createTextNode("\n    ");
            e161.appendChild(el62);
			var el63 = document.createElement("div");
            el63.className += " rte-dialog-column";
			var el64 = document.createElement("label");
            var el65 = document.createTextNode(" ");
            el64.appendChild(el65);
            var el66 = document.createElement("input","coral-textfield");
            el66.setAttribute("is", "coral-textfield");
            el66.setAttribute("data-type", "id");
            el66.setAttribute("placeholder", "ID");
            el64.appendChild(el66);
            var el67 = document.createTextNode(" ");
            el64.appendChild(el67);
            el63.appendChild(el64);
            var el68 = document.createTextNode(" ");
            el63.appendChild(el68);
            e161.appendChild(el63);
            var el60 = document.createTextNode("\n");
            e161.appendChild(el60);
            frag.appendChild(e161);
			var e171 = document.createTextNode("\n");
            frag.appendChild(e171);
            
			var el23 = document.createElement("div");
            el23.className += " rte-dialog-columnContainer";
            var el24 = document.createTextNode("\n    ");
            el23.appendChild(el24);
			var el25 = document.createElement("div");
            el25.className += " rte-dialog-column";
            var el26 = document.createTextNode("\n        ");
            el25.appendChild(el26);
            var el27 = this["targetSelect"] = document.createElement("coral-select");
            el27.setAttribute("handle", "targetSelect");
            var el28 = document.createTextNode("\n            ");
            el27.appendChild(el28);
            var el29 = document.createElement("coral-select-item");
            el29.setAttribute("value", "");
            el29.textContent = CUI["rte"]["Utils"]["i18n"]('dialog.link.target');
            el27.appendChild(el29);
            var el30 = document.createTextNode("\n            ");
            el27.appendChild(el30);
            var el31 = document.createElement("coral-select-item");
            el31.setAttribute("value", "_self");
            el31.textContent = CUI["rte"]["Utils"]["i18n"]('dialog.link.same_tab');
            el27.appendChild(el31);
            var el32 = document.createTextNode("\n            ");
            el27.appendChild(el32);
            var el33 = document.createElement("coral-select-item");
            el33.setAttribute("value", "_blank");
            el33.textContent = CUI["rte"]["Utils"]["i18n"]('dialog.link.new_tab');
            el27.appendChild(el33);
            var el34 = document.createTextNode("\n            ");
            el27.appendChild(el34);
            var el35 = document.createElement("coral-select-item");
            el35.setAttribute("value", "_parent");
            el35.textContent = CUI["rte"]["Utils"]["i18n"]('dialog.link.parent_frame');
            el27.appendChild(el35);
            var el36 = document.createTextNode("\n            ");
            el27.appendChild(el36);
            var el37 = document.createElement("coral-select-item");
            el37.setAttribute("value", "_top");
            el37.textContent = CUI["rte"]["Utils"]["i18n"]('dialog.link.top_frame');
            el27.appendChild(el37);
            var enhance = document.createElement("coral-select-item");
            enhance.setAttribute("value", "modal");
            enhance.textContent = CUI["rte"]["Utils"]["i18n"]('Modal');
            el27.appendChild(enhance);
            var el38 = document.createTextNode("\n        ");
            el27.appendChild(el38);
            el25.appendChild(el27);
            var el39 = document.createTextNode("\n    ");
            el25.appendChild(el39);
            el23.appendChild(el25);
            var el40 = document.createTextNode("\n");
            el23.appendChild(el40);
            frag.appendChild(el23);
            var el41 = document.createTextNode("\n");
            frag.appendChild(el41);
			
            var el42 = document.createElement("div");
            el42.className += " rte-dialog-columnContainer";
            var el43 = document.createTextNode("\n    ");
            el42.appendChild(el43);
            var el44 = document.createElement("div");
            el44.className += " rte-dialog-column rte-dialog-column--rightAligned";
            var el45 = document.createTextNode("\n        ");
            el44.appendChild(el45);
            var el46 = document.createElement("button","coral-button");
            el46.setAttribute("is", "coral-button");
            el46.setAttribute("icon", "close");
            el46.setAttribute("title", CUI["rte"]["Utils"]["i18n"]('dialog.cancel'));
            el46.setAttribute("aria-label", CUI["rte"]["Utils"]["i18n"]('dialog.cancel'));
            el46.setAttribute("iconsize", "S");
            el46.setAttribute("type", "button");
            el46.setAttribute("data-type", "cancel");
            el46.setAttribute("tabindex", "-1");
            el44.appendChild(el46);
            var el47 = document.createTextNode("\n        ");
            el44.appendChild(el47);
            var el48 = document.createElement("button","coral-button");
            el48.setAttribute("is", "coral-button");
            el48.setAttribute("icon", "check");
            el48.setAttribute("title", CUI["rte"]["Utils"]["i18n"]('dialog.apply'));
            el48.setAttribute("aria-label", CUI["rte"]["Utils"]["i18n"]('dialog.apply'));
            el48.setAttribute("iconsize", "S");
            el48.setAttribute("variant", "primary");
            el48.setAttribute("type", "button");
            el48.setAttribute("data-type", "apply");
            el48.setAttribute("tabindex", "-1");
            el44.appendChild(el48);
            var el49 = document.createTextNode("\n    ");
            el44.appendChild(el49);
            el42.appendChild(el44);
            var el50 = document.createTextNode("\n");
            el42.appendChild(el50);
            frag.appendChild(el42);
            var el51 = document.createTextNode("\n");
            frag.appendChild(el51);

            return frag;
        }),

        initialize: function (config) {
            this.inherited(arguments);
            this.hrefField = this.$dialog.find('foundation-autocomplete')[0];
        },

        construct: function() {
            window["Coral"]["templates"]["RichTextEditor"]["dlg_" + this.getDataType()] = this.hbTemplate;
        },

        dlgToModel: function() {
            this.inherited(arguments);
            if (this.objToEdit) {
                
                var trackingTag =  this.getFieldByType('data-bactmln').val();
                var trackingId =  this.getFieldByType('id').val();
                if (trackingTag) {
                	this.objToEdit.attributes['data-bactmln'] = trackingTag;
                }
                if (trackingId) {
                	this.objToEdit.attributes['id'] = trackingId;
                }

                // Convert to a proper URL using URITemplate. Granite.URITemplate acts like a silver bullet.
                // It converts a path to a url, however if path is already a url, it will not double encode it.
                // Refer CQ-4206768
                var href = this.objToEdit.href;
                href = Granite.URITemplate.expand("{+path}", {"path" : href});
                // CQ Antisamy rules remove href with single quote characters
                // Hence, we need to url-encode them as a special case. See CQ-4223011
                href = href.replace(/'/g, '%27');
                this.objToEdit.href = href;
            }
        },

        getDataType: function() {
            return "link";
        }

    });

})(window.jQuery);

 

 

 

Please let me what am I missing here.

0 Replies