Aangepaste knop toevoegen aan Rich Text Editor (RTE)-werkbalk

Leer hoe u een aangepaste knop toevoegt aan de Rich Text Editor (RTE)-werkbalk in de AEM Content Fragment Editor.

De knopen van de douane kunnen aan de toolbar van RTE in de Redacteur van het Fragment van de Inhoud worden toegevoegd gebruikend het rte uitbreidingspunt. Dit voorbeeld toont hoe te om een douaneknoop toe te voegen genoemd Uiteinde aan de toolbar van RTE en de inhoud binnen RTE te wijzigen.

Het gebruiken van getCustomButtons() methode van het 0} uitbreidingspunt van de uitbreiding één of vele douaneknopen kan aan de toolbar van RTE worden toegevoegd. rte Het is ook mogelijk om standaardRTE knopen zoals Kopiëren, Deeg, Vet, en Cursief toe te voegen of te verwijderen gebruikend getCoreButtons() en removeButtons) methodes respectievelijk.

Dit voorbeeld toont hoe te om een benadrukte nota of uiteinde op te nemen gebruikend douane voeg de toolbarknoop van het Uiteinde toe. Voor de gemarkeerde notitie of de inhoud van het uiteinde wordt een speciale opmaak toegepast via HTML-elementen en de bijbehorende CSS-klassen. De inhoud en de HTML-code van de plaatsaanduiding worden ingevoegd met de callbackmethode onClick() van de getCustomButtons() .

Extensiepunt

Dit voorbeeld breidt zich tot uitbreidingspunt rte uit om douaneknoop aan RTE toolbar in de Redacteur van het Fragment van de Inhoud toe te voegen.

Voorbeeldextensie

Het volgende voorbeeld leidt tot voegt de douaneknoop van het Uiteinde in RTE toolbar toe. De klikactie neemt de placeholder tekst bij de huidige inlasteken positie in RTE op.

De code toont hoe te om de douaneknoop met een pictogram toe te voegen en de functie van de klikmanager te registreren.

Registratie van extensies

ExtensionRegistration.js , toegewezen aan de route index.html, is het ingangspunt voor de AEM uitbreiding en bepaalt:

De insertContent -waarde is een HTML-tekenreeks, <div class=\"cmp-contentfragment__element-tip\"><div>TIP</div><div>Add your tip text here...</div></div> . De CSS-klassen cmp-contentfragment__element-tip die worden gebruikt om de waarde weer te geven, zijn niet gedefinieerd in de widget, maar geïmplementeerd op het web. Dit veld Inhoudsfragment wordt weergegeven.

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;