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 funciones para editar su 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 utilizar las funciones RTE para la creación, consulte Usar el 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 un orden recomendado para completar las tareas de configuración de RTE en Experience Manager.

Figura: Flujo de trabajo típico para configurar el Editor de texto enriquecido

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 IU estándar para AEM. Adobe introducido en la interfaz de usuario táctil con diseño interactivo para el entorno de creación, en la versión 5.6. La IU táctil está diseñada para dispositivos táctiles y de escritorio. La IU 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 AEM utilizando los distintos modos de componentes. Las opciones de la barra de herramientas para crear y dar formato al contenido y la experiencia del usuario de los componentes habilitados para RTE en diferentes modos de edición varían según las configuraciones de RTE.

Edición en línea inline-editing

Cuando se abre (con un doble toque o clic lento), el contenido se puede editar dentro de la página. Se presenta una barra de herramientas compacta con opciones 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 básicas de texto.

Edición de pantalla completa full-screen-editing

AEM componentes 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 en pantalla completa una versión detallada de la edición en línea, ya que ofrece las mejores opciones de edición. Se puede abrir haciendo clic en , en la barra de herramientas compacta al utilizar el modo de edición en línea.

El modo de pantalla completa del cuadro de diálogo proporciona, una barra de herramientas RTE detallada y las opciones y los componentes disponibles en el modo 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 del cuadro de diálogo dialog-editing

Cuando se hace doble clic en un componente en la IU clásica, 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 cuadro de diálogo en la IU táctil

Figura: Cuadro de diálogo en la IU clásica que contiene una barra de herramientas detallada para editarla

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 por el valor del features en un nodo específico del complemento adecuado.

La tabla siguiente muestra los complementos actuales:

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

La variable modo de edición RTE (y la IU) que proporcione a los autores para que decidan la ubicación de los detalles de configuración cuando activación de los complementos RTE:

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

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

Personalización de la edición in situ customizing-in-place-editing

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

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

Habilitar las funcionalidades 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 propiedad de características. 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.

Descargue esta configuración de ejemplo para comprender cómo configurar RTE. En este paquete todas las funciones están habilitadas.

Obtener archivo

Configurar la barra de herramientas RTE dialogfullscreen

AEM le permite configurar la IU del Editor de texto enriquecido de forma diferente para los distintos modos de edición. A continuación se proporciona la configuración predeterminada. Puede anular estos valores predeterminados según sus necesidades.

Para obtener la mejor experiencia de creación:

<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]"
          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,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>

Para el modo en línea y el modo de pantalla completa se usan distintas configuraciones de interfaz de usuario. 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 función (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). Separadores ( | ) entre un grupo de botones se puede especificar con "-".

El nodo emergente en modo en línea o en pantalla completa contiene una lista de las ventanas emergentes que se utilizan. Cada nodo secundario debajo de popovers el nodo recibe el nombre del complemento (por ejemplo, format). Tiene una propiedad items que contiene una lista de funciones del complemento (por ejemplo, format#bold).

Configuración de la interfaz de usuario 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 políticas de contenido definen las propiedades de diseño de un componente cuando se utilizan como parte de un plantilla editable. Por ejemplo, si se utiliza un componente de texto que utilice el editor de texto enriquecido con una plantilla editable, la política de contenido puede definir que la opción en negrita esté disponible y que haya algunas opciones de formato de párrafo disponibles. Las políticas de contenido se pueden reutilizar y se pueden aplicar en varias plantillas.

A partir de AEM 6.4 Service Pack 3, las opciones disponibles en el flujo RTE descendente desde las configuraciones de interfaz de usuario a las políticas de contenido.

A modo de ejemplo, puede ver la variable Documentación del componente principal de texto.

Personalización de la asignación entre 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 de RTE y los comandos disponibles. No puede utilizar ningún otro icono aparte de los iconos de Coral.

A continuación se muestra un fragmento de ejemplo para asignar el comando Bold al icono Coral llamado 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 CoralUI 2 switch-to-coralui-rich-text-editor

En una página, puede incluir la clientlib CoralUI 2 RTE o la clientlib CoralUI 3 RTE . 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

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

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

Las opciones anteriores pueden utilizarse 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 la variable LinkPlugin.

Limitaciones conocidas known-limitations

AEM capacidad RTE tiene las siguientes limitaciones: