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

[swathialeti]

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 

[Sanjay_Bangar]

Hi @swathialeti ,

                             Could you please explain more and share screenshot.

Kr,

Sanjay

[swathialeti]

Hi @Sanjay_Bangar ,

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.

[Sanjay_Bangar]

Hi @swathialeti ,

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

Regards,

Sanjay

[swathialeti]

  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.

[Kiran_Vedantam]

Hi @swathialeti 

Pls check this article for your use case: https://experience-aem.blogspot.com/2021/03/aem-cloud-service-css-and-color-picker-plugin-rte-rich-t...

Thanks,
Kiran Vedantam.

[MohitKumarK · Accepted solution]

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!