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

Unable to edit the custom dependent editable input field for RTE.

Avatar

Level 2

Created a new RTE plugin and added the dependent Input field to it, when tried to edit the field then it is not adding the inputted text to it and at the same time it is getting closed the dependent fields div .

 

I'm unable to add the text to it. Need help.

 

@arunpatidar26  @Anudeep_Garnepudi @Ratna_Kumar @Feike_Visser1 @Veena_Vikram @Vijayalakshmi_S 

1 Accepted Solution

Avatar

Correct answer by
Level 4

Hi @swathialeti ,

 

You can create a cq:dialog on what field you required to be shown in RTE plugin and then a js has to be written to handle showing of dialog in plugin, reading presaved values and saving values. This js has to be added to "cq.authoring.dialog.all" for it to load in RTE.

 

Refer to http://experience-aem.blogspot.com/2019/04/aem-65-touch-ui-rte-rich-text-editor-structured-content-p... on steps to create a custom RTE plugin.

 

Thanks!

View solution in original post

6 Replies

Avatar

Community Advisor

Hi @swathialeti ,

                             Could you please explain more and share screenshot.

Kr,

Sanjay

Avatar

Level 2

Hi @Sanjay_Bangar ,

swathialeti_0-1633534209388.png

 

Screenshot is added please check, in the input field when i click on it, the custom dependent field is getting closed . It is not allowing me to put the text/input because it is getting closed.

Avatar

Community Advisor

Hi @swathialeti ,

                          You need to add some custom CSS class for that properties to enable it.

Regards,

Sanjay

Avatar

Level 2
  window["Coral"]["templates"]["RichTextEditor"]["emailInput"] = (function anonymous(data_0
  /**/) {
       var frag = document.createDocumentFragment();
         var data = data_0;            
         var el13 = document.createElement("div");
         el13.style.display = "table-cell";
         el13.style.vertical_align = "middle"; 
         el13.style.padding = "0.25rem";
         el13.style.line_height = "2.375rem"; 
            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");
            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 el43 = document.createTextNode("\n    ");
            el13.appendChild(el43);
            var el44 = document.createElement("div");
            el44.style.display = "table-cell";
            el44.style.vertical_align = "middle"; 
            el44.style.padding = "0.25rem";
            el44.style.line_height = "2.375rem";    
            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", "0");
            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", "0");
            el44.appendChild(el48);
            var el49 = document.createTextNode("\n    ");
            el44.appendChild(el49);
            el13.appendChild(el44);
            var el50 = document.createTextNode("\n");
            el13.appendChild(el50);
            frag.appendChild(el13);
            var el51 = document.createTextNode("\n");
            frag.appendChild(el51);
            return frag;
});

Hi @Sanjay_Bangar 

This is the code for the dependent editable field(Input) of a new plugin. Did i missed anything for a Input field lines of code, It seems fine for buttons. If the custom css properties is needed then what could be applicable for it.

Avatar

Correct answer by
Level 4

Hi @swathialeti ,

 

You can create a cq:dialog on what field you required to be shown in RTE plugin and then a js has to be written to handle showing of dialog in plugin, reading presaved values and saving values. This js has to be added to "cq.authoring.dialog.all" for it to load in RTE.

 

Refer to http://experience-aem.blogspot.com/2019/04/aem-65-touch-ui-rte-rich-text-editor-structured-content-p... on steps to create a custom RTE plugin.

 

Thanks!