Lägg till anpassad knapp i verktygsfältet RTF (Rich Text Editor)

Lär dig hur du lägger till en anpassad knapp i verktygsfältet RTE (Rich Text Editor) i AEM Content Fragment Editor.

Du kan lägga till anpassade knappar i verktygsfältet RTE i Content Fragment Editor med hjälp av tilläggspunkten rte. I det här exemplet visas hur du lägger till en anpassad knapp med namnet Lägg till tips i verktygsfältet för textredigering och ändrar innehållet i textredigeraren.

Med metoden getCustomButtons() för tilläggspunkten rte kan en eller flera anpassade knappar läggas till i verktygsfältet RTE. Det går också att lägga till eller ta bort standardknappar för textredigering som Kopiera, Klistra in, Fet och Kursiv med metoderna getCoreButtons() respektive removeButtons).

I det här exemplet visas hur du infogar en markerad anteckning eller ett markerat tips med en anpassad Lägg till tips-verktygsfältsknapp. Det markerade antecknings- eller tipsinnehållet har en speciell formatering som används via elementen HTML och de associerade CSS-klasserna. Platshållarinnehållet och HTML-koden infogas med callback-metoden onClick() för getCustomButtons().

Tilläggspunkt

Det här exemplet utökas till tilläggspunkten rte för att lägga till en anpassad knapp i verktygsfältet för textredigering i redigeraren för innehållsfragment.

Exempel på tillägg

I följande exempel skapas en anpassad Lägg till tips-knapp i textredigeringsverktygsfältet. Klicka-åtgärden för att infoga platshållartexten vid den aktuella inmatningspositionen i textredigeraren.

I koden visas hur du lägger till den anpassade knappen med en ikon och registrerar klickhanterarfunktionen.

Tillägg - registrering

ExtensionRegistration.js, mappad till index.html-vägen, är startpunkten för AEM och definierar:

Värdet insertContent är en HTML-sträng, <div class=\"cmp-contentfragment__element-tip\"><div>TIP</div><div>Add your tip text here...</div></div>. CSS-klasserna cmp-contentfragment__element-tip som används för att visa värdet definieras inte i widgeten, utan implementeras i webbupplevelsen när det här fältet för innehållsfragment visas.

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;