AEM UI extensions - CF editor - RTE

Question

Hi all,

I'm currently working on an UI extension for the RTE in the new Content Fragment editor. I'm doing this based on the documentation provided here: Rich Text Editor Toolbar - AEM Content Fragments Editor Extensibility and also based on the examples provided here: GitHub - adobe/aem-uix-examples: List of examples for UI Extensibility of AEM.

I'm left with 2 questions:

Is it possible to get the cursor location on click? Currently we are depending on the full selection of a link + 1 character. Otherwise the state.selectedHtml does not contain the <a> tag.
Is it possible to highlight the button icon? When clicked on a link in the RTE, the link button is being highlighted, when moving the cursor away it returns to the original stage. We would like to add similar functionality to our custom button.

The goal is to have a button that can set a custom value on the target attribute of the <a> tag. It would be nice if we could add an option in the exisiting link modal, but I couldn't find any documentation on this being possible.

Thanks in advance,

Reyn

Reyn_ · Accepted Answer

@kautuk_sahni
Unfortunately there is no way currently to achieve the above.

The solution we came up with is to completely replace the RTE in the new Content fragment editor based on the example provided here: aem-uix-examples/cf-editor-custom-rte-field at main · adobe/aem-uix-examples · GitHub

This solution is definitely overkill for us and makes all the UI extensions points for the RTE more or less useless.

Karishma_begumSh · Answer

Hi @reyn_

1.You can’t get the exact cursor position via the RTE API, but you can detect if the cursor is inside a link using:

const sel = window.getSelection();
const anchor = sel?.anchorNode?.closest?.('a');
if (anchor) {
  // Cursor is inside a link
}

Works if the RTE isn't in a shadow DOM or iframe.

state.selectedHtml only helps when a link is fully or partially selected.

2.Yes, you can highlight your custom button by setting isActive:

isActive: () => {
  const sel = window.getSelection();
  return sel?.anchorNode?.closest?.('a');
}

You can't extend the default link modal in AEM RTE.

Instead, open your modal in execute()

execute: () => {
  const sel = window.getSelection();
  const anchor = sel?.anchorNode?.closest?.('a');
  if (anchor) {
    anchor.setAttribute('target', '_custom');
  }
}

Hope this helpful:)

Regards,

Karishma.

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded