How to add Custom Styles to the Latest content Fragment RTE (TipTap)

Hi ​@SujanSiddarthGo,

The new Content Fragment Editor RTE (TipTap) is not configurable via the legacy rtePlugins/StyledTextEditor.js pattern, that applies to AEM 6.5’s CF editor only. For AEMaaCS with the TipTap editor, custom toolbar additions are done via AEM UI Extensibility (App Builder).

The correct approach, AEM CF Editor RTE Toolbar Extension:

1. Set up an App Builder project via Adobe Developer Console, selecting the AEM Content Fragment Editor Extensibility template
2. In ExtensionRegistration.js, register a custom toolbar button using getCustomButtons:

rte: {

  getCustomButtons: () => ([{

    id: "my-vendor-custom-style",

    tooltip: "Apply Custom Style",

    icon: "TextStyle", // from @spectrum-icons

    onClick: (state) => {

      return [{

        type: "replaceContent",

        value: state.html + '<span class="my-custom-style">styled text</span>'

      }]

    }

  }])

}

3. Deploy the App Builder app and register it against your AEM Cloud environment

What this gives you: a toolbar button that manipulates the RTE HTML via the replaceContent / insertContent instruction types. You can wrap selected content in a custom <span> with a CSS class, effectively a custom styles dropdown pattern.

Important caveat: a true dropdown (like the classic Styles pulldown) isn’t a single-button primitive in the current API, you’d need to open a modal (openModal) and return the chosen style as an instruction. The RTE Widgets API (triggered via {) is an alternative if the use case fits an inline picker.

Adobe’s official docs and working sample are here: experienceleague.adobe.com/en/docs/experience-manager-learn/cloud-service/developing/extensibility/ui/content-fragments/examples/editor-rte-toolbar

Have you tried or implemented that anytime in your CF RTE. If so please share the screenshot of you custom buttons in your CF RTE. 

Thanks,
Sujan Siddarth Gowdru Karibasappa
 

Hi ​@SujanSiddarthGo 

I am trying to check for the tiptap based for cf rte editor. Tried adobe support, it’s in progress and they are also confirming that the latest version is yet to be publicly available.

Existing extension points are deprecated and it’s of no use.

Please let me know if we found any reference to customize the cf rte editor.

Thanks,
Sai.