RTE plugin for tooltip | Community
Skip to main content
S
Shaheena_Sheikh
September 9, 2021
Solved

RTE plugin for tooltip

  • September 9, 2021
  • 2 replies
  • 3396 views

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-plugin-creating-tooltips.html

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!

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Vijayalakshmi_S

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();
        }

2 replies

Asutosh_Jena_
Community Advisor
Asutosh_Jena_Community Advisor
Community Advisor
September 9, 2021

@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!

    S
    Shaheena_SheikhAuthor
    September 10, 2021

    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>
      Vijayalakshmi_S
      Vijayalakshmi_SAccepted solution
      September 10, 2021

      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();
        }
        S
        Shaheena_SheikhAuthor
        September 13, 2021

        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!

          Terms & ConditionsAccessibility statement

          Loading footer...