Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

RTE plugin for tooltip

Avatar

Level 6

Im using the package from the below link :

https://experience-aem.blogspot.com/2019/04/aem-65-touch-ui-rte-rich-text-editor-structured-content-...

but the only issue I'm seeing is that every time I update the value of the tooltip, the new value gets appended to the previous value instead of replacing it. I'm unable to find out the solution. Please suggest!

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @Shaheena_Sheikh,

Based on the approach shared in one of the comments in that blog post, below works fine in my local 6.5.0. 

It won't work on the already applied text as we don't have an explicit feature for removal as part of this custom plugin (like we have unlink in case of Link Plugin)

We might have to explicitly remove from JCR.

For local testing, you can try applying tooltip to a fresh text and then amend on top of it. 

 

Replace the existing if logic for submit action with the below

if(action === "submit"){
            var ek = $eaemStructuredModal.eaemModalPlugin.editorKernel,
                editContext = ek.getEditContext(),
                selectedText = CUI.rte.Selection.createProcessingSelection(editContext),
                startNode = selectedText.startNode,
                tooltipHtml = getHtmlFromContent(window.getSelection().toString(), message.data);

            if(startNode.parentNode.nodeName == "SPAN" && startNode.parentNode.className == "eaem-dotted-underline"){
                startNode.parentNode.setAttribute("title", message.data.title + " : " + message.data.description);
                startNode.parentNode.setAttribute("data-content", JSON.stringify(message.data));
            }
            else {
                ek.execCmd('inserthtml', tooltipHtml);
            }

           // ek.execCmd('inserthtml', tooltipHtml);

            ek.focus();
        }

View solution in original post

5 Replies

Avatar

Community Advisor

@Shaheena_Sheikh 

 

Can you please provide more information like what is the AEM version that you are trying to use here?

Also do you see any console error when you are trying to open the dialog and the value is getting appended instead of replacing the value?

 

Once you provide the above information we can check the issue and see if it's reproducible or anything is missing.

 

Thanks!

Avatar

Level 6

I am using AEM 6.5.

I installed the package that i got from the link and it works just fine. But I noticed it keeps appending the modified data. For eg this was the value after 3 edits:

 

<p><i>Lorem ipsum</i>&nbsp;is <span title="tooltip title1 : asdasfas" class="eaem-dotted-underline" data-content="{&quot;title&quot;:&quot;tooltip title1&quot;,&quot;description&quot;:&quot;asdasfas&quot;}"><span title="tooltip title1 saasas : asdasfas asfasf asfsDFASD SADASDF ASDFASDF" class="eaem-dotted-underline" data-content="{&quot;title&quot;:&quot;tooltip title1 saasas&quot;,&quot;description&quot;:&quot;asdasfas asfasf asfsDFASD SADASDF ASDFASDF&quot;}">placeholder </span></span>text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>

 

the above when u check closely has appended value :

  • 1st data to tolltip: <span title="tooltip title1 : asdasfas" class="eaem-dotted-underline" data-content="{&quot;title&quot;:&quot;tooltip title1&quot;,&quot;description&quot;:&quot;asdasfas&quot;}">
  • 2nd edit to tooltip : <span title="tooltip title1 saasas : asdasfas asfasf asfsDFASD SADASDF ASDFASDF" class="eaem-dotted-underline" data-content="{&quot;title&quot;:&quot;tooltip title1 saasas&quot;,&quot;description&quot;:&quot;asdasfas asfasf asfsDFASD SADASDF ASDFASDF&quot;}">placeholder </span>
  • 3rd edit to tooltip : </span>text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>

Avatar

Correct answer by
Community Advisor

Hi @Shaheena_Sheikh,

Based on the approach shared in one of the comments in that blog post, below works fine in my local 6.5.0. 

It won't work on the already applied text as we don't have an explicit feature for removal as part of this custom plugin (like we have unlink in case of Link Plugin)

We might have to explicitly remove from JCR.

For local testing, you can try applying tooltip to a fresh text and then amend on top of it. 

 

Replace the existing if logic for submit action with the below

if(action === "submit"){
            var ek = $eaemStructuredModal.eaemModalPlugin.editorKernel,
                editContext = ek.getEditContext(),
                selectedText = CUI.rte.Selection.createProcessingSelection(editContext),
                startNode = selectedText.startNode,
                tooltipHtml = getHtmlFromContent(window.getSelection().toString(), message.data);

            if(startNode.parentNode.nodeName == "SPAN" && startNode.parentNode.className == "eaem-dotted-underline"){
                startNode.parentNode.setAttribute("title", message.data.title + " : " + message.data.description);
                startNode.parentNode.setAttribute("data-content", JSON.stringify(message.data));
            }
            else {
                ek.execCmd('inserthtml', tooltipHtml);
            }

           // ek.execCmd('inserthtml', tooltipHtml);

            ek.focus();
        }

Avatar

Level 6

The code fix present in the comment section of the blog didn't work for me. The problem was :

On clicking the Create Tooltip button, another dialog opens to create tooltip.

But, the code modified code fix which you provided does work for me. Thanks!