Hinzufügen benutzerdefinierter Schaltflächen zur Rich-Text-Editor(RTE)-Symbolleiste

Erfahren Sie, wie Sie im AEM-Inhaltsfragmenteditor der eine benutzerdefinierte Schaltfläche zur Rich-Text-Editor-Symbolleiste (RTE) hinzufügen.

Benutzerdefinierte Schaltflächen können der RTE-Symbolleiste im Inhaltsfragmenteditor über den Erweiterungspunkt rte hinzugefügt werden. In diesem Beispiel wird gezeigt, wie eine benutzerdefinierte Schaltfläche zum Hinzufügen eines Tipps in der RTE-Symbolleiste hinzugefügt und der Inhalt im RTE geändert wird.

Über die Methode rte des Erweiterungspunkts getCustomButtons() ist es möglich, eine oder mehrere benutzerdefinierte Schaltflächen zur RTE-Symbolleiste hinzuzufügen. Ebenfalls können standardmäßige RTE-Schaltflächen wie „Kopieren“, „Einfügen“, „Fett“ und „Kursiv“ mit der Methode getCoreButtons() bzw. removeButtons) hinzugefügt oder entfernt werden.

Dieses Beispiel zeigt, wie Sie einen hervorgehobenen Hinweis oder einen Tipp mithilfe der benutzerdefinierten Symbolleisten-Schaltfläche zum Hinzufügen eines Tipps einfügen können. Der Inhalt des hervorgehobenen Hinweises oder Tipps hat eine spezielle Formatierung, die über HTML-Elemente und die zugehörigen CSS-Klassen angewendet wird. Der Platzhalterinhalt und der HTML-Code werden mithilfe der onClick()-Callback-Methode von getCustomButtons() eingefügt.

Erweiterungspunkt

Dieses Beispiel erstreckt sich bis zum Erweiterungspunkt rte, um der RTE-Symbolleiste im Inhaltsfragmenteditor eine benutzerdefinierte Schaltfläche hinzuzufügen.

Beispielerweiterung

Im folgenden Beispiel wird eine benutzerdefinierte Schaltfläche zum Hinzufügen eines Tipps in der RTE-Symbolleiste erstellt. Die Klickaktion fügt den Platzhaltertext an der aktuellen Caret-Position im RTE ein.

Der Code zeigt, wie Sie die benutzerdefinierte Schaltfläche mit einem Symbol hinzufügen und die Klick-Handler-Funktion registrieren.

Registrierung der Erweiterung

ExtensionRegistration.js, die der Route „index.html“ zugeordnet ist, ist der Einstiegspunkt für die AEM-Erweiterung und definiert Folgendes:

Der Wert von insertContent ist eine HTML-Zeichenfolge: <div class=\"cmp-contentfragment__element-tip\"><div>TIP</div><div>Add your tip text here...</div></div>. Die zum Anzeigen des Werts verwendeten CSS-Klassen cmp-contentfragment__element-tip werden nicht im Widget definiert, sondern in dem Web-Erlebnis implementiert, in dem dieses Inhaltsfragmentfeld angezeigt wird.

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;