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

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

swathialeti
Level 2
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
MohitKumarK
Correct answer by
Level 4
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
bangar50
Level 7
Level 7

Hi @swathialeti ,

                             Could you please explain more and share screenshot.

Kr,

Sanjay

swathialeti
Level 2
Level 2

Hi @bangar50 ,

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.

bangar50
Level 7
Level 7

Hi @swathialeti ,

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

Regards,

Sanjay

swathialeti
Level 2
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 @bangar50 

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.

MohitKumarK
Correct answer by
Level 4
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