Add custom button to Rich Text Editor (RTE) toolbar

Documentation AEM AEM Tutorials AEM as a Cloud Service Tutorials

Last update: Tue May 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

Beginner
Developer

Learn how to add a custom button to Rich Text Editor (RTE) toolbar in the AEM Content Fragment Editor.

https://video.tv.adobe.com/v/3420768?quality=12&learn=on

Transcript

Let’s learn how to enhance the AEM Content Fragment Editor by adding a custom button to the Rich Text Editor toolbar. As an example, the custom button will allow us to easily insert highlighted notes or tip into the RTE. To begin, let’s start with a demonstration of the RTE toolbar extension in action. I have already mounted the local version of the UI extension application onto my AEM as a cloud service environment. As you can see, the RTE toolbar now displays an additional button labeled Add Tip. By clicking on this custom button, we can effortlessly insert a placeholder content for our tip at the current caret position within the editor. We can also modify the content of the tip as needed. Let’s publish the content and view it on the adventure page. It’s worth noting that the styling of the tip content is achieved by applying a special CSS class, which is added to the content fragment component in the UI.FrontEnd module of the Weekend AEM project. So, by extending the Content Fragment Editor, we have made it simple to modify and style the RTE content per our requirements. Let’s dive into the technical details and explore the development steps involved. To begin, I created a project named AEM UI Extension CF Editor using the Adobe Developer Console and the App Builder Template. On my local machine, I used the AIO CLI to initialize the project. During the initialization process, I selected the AEM Content Fragment Editor Extensibility Template. You can also verify this by checking the project’s package.json file. The development process is straightforward. In the Extension Registration component, we utilize the GetCustomButtons method of the RTE extension point to add the AddTipCustomButton. The button is associated with an OnClickHandler function that returns an instructions array. For this specific use case, the instructions object uses the InsertContent type to insert the tip content at the current character position. The placeholder text, which is an HTML code snippet containing the previously mentioned special CSS class, is passed as the value attribute. In summary, the development process is simple and easy to implement. So before we wrap up, there are a few additional points worth noting. First, another RTE instruction type available is ReplaceContent, which can be used to replace the entire RTE content. Second, the OnClickHandler function receives a state object, which provides access to the complete or selected RTE content. This allows for more advanced customization and manipulation of the content. Last, in addition to adding custom buttons, you can also control the standard RTE buttons such as copy, paste, formatting, and more. This can be done using the GetCoreButtons and RemoveButtons functions available within the RTE extension points. In summary, these features provide further flexibility and control over the RTE functionality. Thank you.

Custom buttons can be added to the RTE toolbar in the Content Fragment Editor using the rte extension point. This example shows how to add a custom button called Add Tip to the RTE toolbar and modify the content within the RTE.

Using rte extension point’s getCustomButtons() method one or many custom buttons can be added to the RTE toolbar. It is also possible to add or remove standard RTE buttons like Copy, Paste, Bold, and Italic using getCoreButtons() and removeButtons) methods respectively.

This example shows how to insert a highlighted note or tip using custom Add Tip toolbar button. The highlighted note or tip content has a special formatting applied via HTML elements, and the associated CSS classes. The placeholder content and HTML code are inserted using the onClick() callback method of the getCustomButtons().

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 with id, 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 and value attributes. To insert the content, the value attributes HTML code snippet, the type attribute uses the insertContent. If there is a use case to replace the content, use case the replaceContent 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;

recommendation-more-help

4859a77c-7971-4ac9-8f5c-4260823c6f69