Agregar un botón personalizado a la barra de herramientas del Editor de texto enriquecido (RTE)

AEM Aprenda a añadir un botón personalizado a la barra de herramientas del Editor de texto enriquecido (RTE) en el Editor de fragmentos de contenido de la.

Se pueden agregar botones personalizados a la barra de herramientas RTE en el Editor de fragmentos de contenido usando el punto de extensión rte. Este ejemplo muestra cómo agregar un botón personalizado denominado Agregar sugerencia a la barra de herramientas de RTE y modificar el contenido dentro de RTE.

Utilizando el método getCustomButtons() del punto de extensión rte, se pueden agregar uno o varios botones personalizados a la barra de herramientas RTE. También es posible agregar o quitar botones RTE estándar como Copiar, Pegar, Negrita y Cursiva utilizando los métodos getCoreButtons() y removeButtons) respectivamente.

Este ejemplo muestra cómo insertar una nota o sugerencia resaltada mediante el botón personalizado Agregar sugerencia de la barra de herramientas. El contenido de la nota o sugerencia resaltado tiene un formato especial aplicado mediante elementos HTML y las clases CSS asociadas. El contenido del marcador de posición y el código del HTML se insertan mediante el método de devolución de llamada onClick() de getCustomButtons().

Punto de extensión

Este ejemplo se extiende al punto de extensión rte para agregar un botón personalizado a la barra de herramientas RTE del Editor de fragmentos de contenido.

Extensión de ejemplo

En el siguiente ejemplo se crea un botón personalizado Agregar sugerencia en la barra de herramientas RTE. La acción de hacer clic inserta el texto del marcador de posición en la posición del símbolo de intercalación actual en RTE.

El código muestra cómo añadir el botón personalizado con un icono y registrar la función del controlador de clics.

Registro de extensiones

AEM ExtensionRegistration.js, asignado a la ruta index.html, es el punto de entrada para la extensión de la y define:

El valor insertContent es una cadena de HTML, <div class=\"cmp-contentfragment__element-tip\"><div>TIP</div><div>Add your tip text here...</div></div>. Las clases CSS cmp-contentfragment__element-tip utilizadas para mostrar el valor no están definidas en el widget, sino implementadas en la experiencia web en la que se muestra este campo de fragmento de contenido.

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;