Extension point
This example extends to extension point rte
to add custom button to RTE toolbar in the Content Fragment Editor.
AEM UI extended | Extension point |
---|---|
Content Fragment Editor | Rich Text Editor Toolbar |
Example extension
The following example creates an Add Tip custom button in the RTE toolbar. The click action inserts the placeholder text at the current caret position in the RTE.
The code shows how to add the custom button with an icon and register the click handler function.
Extension registration
ExtensionRegistration.js
, mapped to the index.html route, is the entry point for the AEM extension and defines:
- The RTE toolbar button’s definition in
getCustomButtons()
function withid, tooltip and icon
attributes. - The click handler for the button, in the
onClick()
function. - The click handler function receives the
state
object as an argument to get the RTE’s content in HTML or text format. However in this example it’s not used. - The click handler function returns an instructions array. This array has an object with
type
andvalue
attributes. To insert the content, thevalue
attributes HTML code snippet, thetype
attribute uses theinsertContent
. If there is a use case to replace the content, use case thereplaceContent
instruction type.
The insertContent
value is a HTML string, <div class=\"cmp-contentfragment__element-tip\"><div>TIP</div><div>Add your tip text here...</div></div>
. The CSS classes cmp-contentfragment__element-tip
used to display the value are not defined in the widget, but rather implemented on the web experience this Content Fragment field is displayed on.
src/aem-cf-editor-1/web-src/src/components/ExtensionRegistration.js
import React from "react";
import { Text } from "@adobe/react-spectrum";
import { register } from "@adobe/uix-guest";
import { extensionId } from "./Constants";
// This function is called when the extension is registered with the host and runs in an iframe in the Content Fragment Editor browser window.
function ExtensionRegistration() {
const init = async () => {
const guestConnection = await register({
id: extensionId,
methods: {
rte: {
// RTE Toolbar custom button
getCustomButtons: () => [
{
id: "wknd-cf-tip", // Provide a unique ID for the custom button
tooltip: "Add Tip", // Provide a label for the custom button
icon: "Note", // Provide an icon for the button (see https://spectrum.adobe.com/page/icons/ for a list of available icons)
onClick: (state) => {
// Provide a click handler function that returns the instructions array with type and value. This example inserts the HTML snippet for TIP content.
return [
{
type: "insertContent",
value:
'<div class="cmp-contentfragment__element-tip"><div>TIP</div><div>Add your tip text here...</div></div>',
},
];
},
},
],
},
},
});
};
init().catch(console.error);
return <Text>IFrame for integration with Host (AEM)...</Text>;
}
export default ExtensionRegistration;
Experience Manager
- Panoramica
- Playlist
- Introduzione ad AEM as a Cloud Service
- Integrazioni Experience Cloud
- Tecnologia sottostante
- Edge Delivery Services
- Cloud Manager
- Impostazione ambiente di sviluppo locale
- Sviluppo di
- Debug di AEM
- API AEM
- Consegna dei contenuti
- Memorizzazione in cache
- Accesso a AEM
- Autenticazione
- Rete avanzata
- Sicurezza
- Evento AEM
- Migrazione
- Frammenti di contenuto
- Forms
- Estendibilità Asset compute
- Tutorials con più passaggi
- Risorse esperti