Pulsante personalizzato sulla barra degli strumenti dell’Editor Rich Text

Scopri come aggiungere un pulsante personalizzato alla barra degli strumenti dell’Editor Rich Text (RTE) nell’Editor frammenti di contenuto AEM.

I pulsanti personalizzati possono essere aggiunti alla barra degli strumenti Editor Rich Text nell'Editor frammenti di contenuto utilizzando il punto di estensione rte. In questo esempio viene illustrato come aggiungere un pulsante personalizzato denominato Aggiungi suggerimento alla barra degli strumenti dell'editor Rich Text e modificare il contenuto dell'editor Rich Text.

Utilizzando il metodo getCustomButtons() del punto di estensione di rte è possibile aggiungere uno o più pulsanti personalizzati alla barra degli strumenti Editor Rich Text. È inoltre possibile aggiungere o rimuovere pulsanti standard dell'editor Rich Text come Copia, Incolla, Grassetto e Corsivo utilizzando i metodi getCoreButtons() e removeButtons) rispettivamente.

In questo esempio viene illustrato come inserire una nota o un suggerimento evidenziato utilizzando il pulsante personalizzato Aggiungi suggerimento della barra degli strumenti. Il contenuto della nota o del suggerimento evidenziato presenta una formattazione speciale applicata tramite elementi HTML e le classi CSS associate. Il contenuto segnaposto e il codice HTML vengono inseriti utilizzando il metodo di callback onClick() di getCustomButtons().

Punto di estensione

Questo esempio si estende al punto di estensione rte per aggiungere un pulsante personalizzato alla barra degli strumenti dell’editor Rich Text nell’Editor frammento di contenuto.

Estensione di esempio

Nell'esempio seguente viene creato un pulsante personalizzato Aggiungi suggerimento nella barra degli strumenti dell'editor Rich Text. L’azione clic inserisce il testo segnaposto nella posizione corrente del punto di inserimento nell’editor Rich Text.

Il codice mostra come aggiungere il pulsante personalizzato con un’icona e registrare la funzione di gestione dei clic.

Registrazione dell’estensione

ExtensionRegistration.js, mappato alla route index.html, è il punto di ingresso per l'estensione AEM e definisce:

Il valore insertContent è una stringa HTML, <div class=\"cmp-contentfragment__element-tip\"><div>TIP</div><div>Add your tip text here...</div></div>. Le classi CSS cmp-contentfragment__element-tip utilizzate per visualizzare il valore non sono definite nel widget, ma implementate nell'esperienza Web in cui viene visualizzato il campo Frammento di contenuto.

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;