Configuración del editor de texto enriquecido configure-the-rich-text-editor

El Editor de texto enriquecido (RTE) proporciona a los autores una amplia gama de funcionalidades para editar el contenido de texto. Se proporcionan iconos, cuadros de selección, barras de herramientas y menús para una experiencia de edición de texto WYSIWYG.

Para saber cómo usar las características de RTE para la creación, consulte Usar editor de texto enriquecido para la creación. RTE se puede configurar para habilitar, deshabilitar y ampliar las funciones disponibles en los componentes de creación. El siguiente flujo de trabajo ilustra el orden recomendado para completar las tareas de configuración de RTE en Experience Manager.

Figura: Secuencia de pasos para aprender a configurar RTE

Explicación de la IU táctil y la IU clásica understand-touch-enabled-ui-and-classic-ui

La IU táctil es la interfaz de usuario estándar para Experience Manager. El Adobe introdujo la IU táctil con diseño interactivo para el entorno de creación. La interfaz de usuario táctil está diseñada para dispositivos táctiles y de escritorio. La interfaz difiere considerablemente de la IU clásica original.

Figura: barra de herramientas del Editor de texto enriquecido en la IU táctil

Figura: barra de herramientas del Editor de texto enriquecido en la IU clásica

Varios modos de edición editingmodes

Los autores pueden crear y editar contenido textual en Experience Manager utilizando los diferentes modos de componentes. Las opciones de la barra de herramientas para crear y dar formato al contenido, así como la experiencia del usuario con componentes con RTE en diferentes modos de edición, varían en función de las configuraciones de RTE.

Edición en línea inline-editing

Cuando se abre (con un doble clic lento), el contenido se puede editar dentro de la página. Se presenta una barra de herramientas compacta con opciones muy básicas.

Figura: Edición en línea con la barra de herramientas básica en la IU táctil

En la IU clásica, un doble clic lento en el componente permite la edición en línea y un contorno naranja resalta el contenido. Si el buscador de contenido está abierto, se muestra una barra de herramientas con las opciones de formato RTE disponibles en la parte superior de la ventana. Si el buscador de contenido no está abierto, las opciones de formato no se muestran y solo puede realizar ediciones de texto básicas.

Edición de pantalla completa full-screen-editing

Los componentes del Experience Manager se pueden abrir en la vista de pantalla completa que oculta el contenido de la página y ocupa la pantalla disponible. Considere la posibilidad de editar a pantalla completa una versión detallada de la edición en línea, ya que ofrece la mayoría de las opciones de edición. Se puede abrir haciendo clic en , desde la barra de herramientas compacta cuando se usa el modo de edición en línea.

En el modo de pantalla completa del cuadro de diálogo, junto con una barra de herramientas RTE detallada, también están disponibles las opciones y los componentes disponibles en un cuadro de diálogo. Solo es aplicable a un cuadro de diálogo que contenga RTE junto con otros componentes.

Figura: La barra de herramientas detallada de RTE al editar en modo de pantalla completa en la IU táctil

Edición de diálogos dialog-editing

Al hacer doble clic en un componente, se abre un cuadro de diálogo para editar el contenido. El cuadro de diálogo se abre sobre la página existente. En algunos casos específicos, el cuadro de diálogo se abre como una ventana emergente. Por ejemplo, cuando un componente Texto forma parte de una columna en un diseño de página de varias columnas y el área disponible para el cuadro de diálogo es menor.

Figura: Modo de edición de diálogo en IU táctil

Figura: Cuadro de diálogo en la IU clásica que contiene la barra de herramientas detallada para la edición

Acerca de los complementos RTE y las funciones asociadas aboutplugins

La funcionalidad está disponible a través de una serie de complementos, cada uno con:

Las características básicas del RTE se activan o desactivan mediante el valor de la propiedad features en un nodo específico del complemento correspondiente.

En la tabla siguiente se enumeran los complementos actuales, mostrando:

Comprender las rutas y ubicaciones de configuración understand-the-configuration-paths-and-locations

El modo de edición RTE (y la interfaz de usuario) que proporcione a sus autores deciden la ubicación de los detalles de configuración cuando activa los complementos RTE:

Configure las siguientes propiedades que se aplican en el modo de edición del cuadro de diálogo solo en la IU táctil:

Cuando se utiliza RTE en el cuadro de diálogo táctil, es obligatorio establecer la propiedad useFixedInlineToolbar en true para evitar problemas.

Personalizar la edición in situ customizing-in-place-editing

Puede definir en qué selector de HTML comienza el editor de texto configurando las siguientes propiedades:

La propiedad correspondiente para el modo de diálogo es name.

Habilitar las funcionalidades de RTE activando complementos enable-rte-functionalities-by-activating-plug-ins

Las funcionalidades de RTE están disponibles a través de una serie de complementos, cada uno con la propiedad features. Puede configurar la propiedad features para habilitar o deshabilitar las distintas funciones de cada complemento.

Para obtener configuraciones detalladas de los complementos RTE, consulte cómo activar y configurar los complementos RTE.

Ejemplo: descargue esta configuración de ejemplo que ilustra cómo configurar RTE. En este paquete todas las características están habilitadas.

Configuración de la barra de herramientas RTE dialogfullscreen

AEM La interfaz del Editor de texto enriquecido se puede configurar de forma diferente para cada modo de edición, según el modo en que se use. A continuación se proporcionan los ajustes predeterminados. Puede sustituir estos valores predeterminados según sus necesidades. Puede personalizar únicamente las características de la barra de herramientas que desea proporcionar a los autores. No es necesario especificar todas las configuraciones de la barra de herramientas.

Para configurar la barra de herramientas de dialogFullScreen, use la siguiente configuración de ejemplo.

<uiSettings jcr:primaryType="nt:unstructured">
  <cui jcr:primaryType="nt:unstructured">
    <inline
      jcr:primaryType="nt:unstructured"
      toolbar="[format#bold,format#italic,format#underline,#justify,#lists,links#modifylink,links#unlink,#paraformat]">
      <popovers jcr:primaryType="nt:unstructured">
        <justify
          jcr:primaryType="nt:unstructured"
          items="[justify#justifyleft,justify#justifycenter,justify#justifyright,justify#justifyjustify]"
          ref="justify"/>
        <lists
          jcr:primaryType="nt:unstructured"
          items="[lists#unordered,lists#ordered,lists#outdent,lists#indent]"
          ref="lists"/>
        <paraformat
          jcr:primaryType="nt:unstructured"
          items="paraformat:getFormats:paraformat-pulldown"
          ref="paraformat"/>
      </popovers>
    </inline>
    <dialogFullScreen
      jcr:primaryType="nt:unstructured"
      toolbar="[format#bold,format#italic,format#underline,justify#justifyleft,justify#justifycenter,justify#justifyright,justify#justifyjustify,lists#unordered,lists#ordered,lists#outdent,lists#indent,links#modifylink,links#unlink,table#createoredit,#paraformat,image#imageProps]">
      <popovers jcr:primaryType="nt:unstructured">
        <paraformat
          jcr:primaryType="nt:unstructured"
          items="paraformat:getFormats:paraformat-pulldown"
          ref="paraformat"/>
      </popovers>
    </dialogFullScreen>
    <tableEditOptions
      jcr:primaryType="nt:unstructured"
      toolbar="[table#insertcolumn-before,table#insertcolumn-after,table#removecolumn,-,table#insertrow-before,table#insertrow-after,table#removerow,-,table#mergecells-right,table#mergecells-down,table#mergecells,table#splitcell-horizontal,table#splitcell-vertical,-,table#selectrow,table#selectcolumn,-,table#ensureparagraph,-,table#modifytableandcell,table#removetable,-,undo#undo,undo#redo,-,table#exitTableEditing,-]">
    </tableEditOptions>
  </cui>
</uiSettings>

Se utilizan diferentes configuraciones de interfaz de usuario para el modo en línea y el modo de pantalla completa. La propiedad toolbar se utiliza para especificar los botones de la barra de herramientas.

Por ejemplo, si el botón es en sí mismo una característica (por ejemplo, Bold), se especifica como PluginName#FeatureName (por ejemplo, links#modifylink).

Si el botón es una ventana emergente (que contiene algunas características de un complemento), se especifica como #PluginName (por ejemplo, #format).

Los separadores (|) entre un grupo de botones se pueden especificar con -.

El nodo emergente bajo el modo en línea o de pantalla completa contiene una lista de los botones que se están utilizando. Cada nodo secundario bajo el nodo "fuentes" recibe el nombre del complemento (por ejemplo, formato). Tiene una propiedad "items" que contiene una lista de funciones del complemento (por ejemplo, format#bold).

Configuración de la interfaz de usuario de RTE y políticas de contenido rtecontentpolicies

Los administradores pueden controlar las opciones de RTE mediante políticas de contenido, por ejemplo, en lugar de realizar la configuración como se ha descrito anteriormente. Las directivas de contenido definen las propiedades de diseño de un componente cuando se utiliza como parte de una plantilla editable. Por ejemplo, si un componente de texto que utiliza RTE se utiliza con una plantilla editable, la política de contenido puede definir que la opción de negrita esté disponible y que haya algunas opciones de formato de párrafo disponibles. Las políticas de contenido se pueden reutilizar y aplicar en varias plantillas.

Las opciones disponibles en RTE fluyen hacia abajo desde las configuraciones de interfaz de usuario hasta las políticas de contenido.

Por ejemplo, puede ver la documentación del componente principal Texto.

Personalizar la asignación entre los iconos y comandos de la barra de herramientas iconstoolbar

Puede personalizar la asignación entre los iconos de Coral que se muestran en la barra de herramientas RTE y los comandos disponibles. No se puede usar ningún otro icono aparte de los iconos de Coral.

A continuación se muestra un fragmento de ejemplo para asignar el comando Negrita al icono de Coral denominado textItalic.

<text jcr:primaryType="nt:unstructured" sling:resourceType="cq/gui/components/authoring/dialog/richtext" name="./text" useFixedInlineToolbar="{Boolean}true">
    <rtePlugins jcr:primaryType="nt:unstructured">
        <format jcr:primaryType="nt:unstructured" features="bold,italic"/>
    </rtePlugins>
    <uiSettings jcr:primaryType="nt:unstructured">
        <cui jcr:primaryType="nt:unstructured">
            <inline jcr:primaryType="nt:unstructured"
                toolbar="[format#bold,format#italic,format#underline,links#modifylink,links#unlink]">
            </inline>
            <icons jcr:primaryType="nt:unstructured">
                <bold jcr:primaryType="nt:unstructured"
                    command="format#bold"
                    icon="textItalic"/>
            </icons>
        </cui>
    </uiSettings>
</text>

Cambiar al editor de texto enriquecido de CoralUI 2 switch-to-coralui-rich-text-editor

En una página, puede incluir CoralUI 2 RTE clientlib o CoralUI 3 RTE clientlib. De forma predeterminada, el Editor de texto enriquecido incluye la clientlib CoralUI 3 RTE. Para cambiar a CoralUI 2 RTE, realice los siguientes pasos.

Información adicional further-information

AEM Para obtener más información sobre la configuración de RTE, consulte la referencia de la API de widget de.

En particular, para ver los complementos y las opciones relacionadas disponibles:

Se pueden utilizar para ampliar y personalizar su propio RTE. Por ejemplo, para enumerar los anclajes disponibles en la página al crear un vínculo, puede proporcionar su propia implementación de LinkPlugin.

Limitaciones conocidas known-limitations

AEM La capacidad de RTE tiene las siguientes limitaciones:

Prácticas recomendadas y sugerencias best-practices-and-tips

Solución de problemas frecuentes con RTE troubleshoot-issues-with-aem-rich-text-editor

¿Cómo seleccionar varias celdas de la tabla?

Para seleccionar varias celdas de una tabla, presione la tecla Ctrl o Cmd y, a continuación, haga clic en las celdas de la tabla una por una.

Ahora realice la operación en la selección, por ejemplo, establezca las propiedades de las celdas seleccionadas.

Se pierden hipervínculos al editar un componente mediante el botón Configurar

Agregue un hipervínculo en un componente de texto editándolo con el botón Configurar. Puede perder el hipervínculo al editarlo de nuevo y validarlo por segunda vez.

Una solución consiste en hacer clic en el componente de texto cuando el cuadro de diálogo de edición se muestre por segunda vez y, a continuación, ejecutar la validación del vínculo.

AEM Este problema se resuelve en la versión 6.3 y posteriores de la versión de.

Se ha perdido contenido de HTML agregado en el modo de edición de código fuente

No agregue un HTML propenso a XSS. AEM La, y no el RTE, puede eliminar parte del contenido del HTML para adherirse a las reglas de antisamía XSS.

Para comprobar que el HTML pegado está guardado, compruebe el contenido guardado en CRXDE (en el nodo de contenido).

Si no se guarda, RTE debe haber eliminado el HTML, ya que no se adhirió a las reglas del RTE.

AEM Si se guarda en CRXDE pero no se procesa en la página (para comprobar la representación, consulte la vista previa de la página, se elimina mediante reglas XSS de.

El componente multicampo no funciona como se esperaba

Para crear un componente de varios campos, utilice CoralUI 3 exclusivamente. No utilice los cuadros de diálogo de componentes de CoralUI 2.

Compruebe también que el código de implementación de varios campos y la estructura de nodos son correctos.

La configuración disponible para los administradores no está disponible para los autores

Si las actualizaciones de las configuraciones de interfaz se reflejan para los administradores pero no para las cuentas de autor, asegúrese de que el nodo de configuración no se llame config. Usar la propiedad configPath.