DocumentaciónAEM as a Cloud ServiceGuía del usuario

Configuración del RTE para el editor universal configure-rte

Last update: Fri Dec 12 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Se aplica a:
  • Experience Manager as a Cloud Service

Creado para:

  • Administrador
  • Desarrollador

Descubra cómo puede configurar el editor de texto enriquecido (RTE) en el editor universal.

Información general overview

El editor universal proporciona un editor de texto enriquecido (RTE) tanto en el sitio como en el panel de propiedades para permitir a los autores aplicar cambios de formato a medida que editan su texto.

Este RTE se puede configurar usando filtros de componente. Este documento describe qué opciones de configuración están disponibles junto con ejemplos.

Estructura de configuración structure

La configuración de RTE consta de dos partes:

  • toolbar: la configuración de la barra de herramientas controla qué opciones de edición están disponibles en la interfaz de usuario y cómo están organizadas.
  • actions: la configuración de acciones le permite personalizar el comportamiento y el aspecto de las acciones de edición individuales.

Estas configuraciones se pueden definir como parte de un filtro de componentes con la propiedad rte.

[
  {
    "id": "richtext",
    "rte": {
      "toolbar": {
        // Toolbar configuration
      },
      "actions": {
        // Action-specific configurations
      }
    },
    "components": [
      "richtext"
    ]
  }
]

Configuración de barra de herramientas toolbar

La configuración de la barra de herramientas controla qué opciones de edición están disponibles en la interfaz de usuario y cómo están organizadas. Estas son las secciones disponibles

{
  "toolbar": {
    // Text formatting options
    "format": ["bold", "italic", "underline", "strike"],
    // Text alignment options
    "alignment": ["left", "center", "right", "justify"],
    // Text direction options, right-to-left or left-to-right
    "direction": ["rtl", "ltr"],
    // Indentation controls
    "indentation": ["indent", "outdent"],
    // Block-level elements
    "blocks": ["paragraph", "h1", "h2", "h3", "h4", "h5", "h6", "code_block"],
    // List options
    "list": ["bullet_list", "ordered_list"],
    // Content insertion
    "insert": ["link", "unlink", "image"],
    // Superscript/subscript
    "sr_script": ["superscript", "subscript"],
    // Editor utilities
    "editor": ["removeformat"],
    // Section ordering (optional)
    "sections": ["format", "alignment", "list"]
  }
}

Configuración de acciones actions

La configuración de acciones permite personalizar el comportamiento y el aspecto de las acciones de edición individuales. Estas son las secciones disponibles.

Acciones de formato format

Las acciones de formato se utilizan para aplicar formato y admitir el cambio de etiquetas de HTML para elegir entre variantes semánticas. Las secciones disponibles son las siguientes:

{
  "actions": {
    "bold": {
      "tag": "strong",      // Use <strong> instead of <b>
      "shortcut": "Mod-B",  // Custom keyboard shortcut
      "label": "Make Bold"  // Custom button label
    },
    "italic": {
      "tag": "em",          // Use <em> instead of <i>
      "shortcut": "Mod-I",
      "label": "Italicize"
    },
    "strike": {
      "tag": "del"          // Use <del> instead of <s>
    }
  }
}

Enumerar acciones list

Las acciones de lista admiten el ajuste de contenido para controlar la estructura de HTML. Las secciones disponibles son las siguientes:

{
  "actions": {
    "bullet_list": {
      "wrapInParagraphs": true,    // <ul><li><p>content</p></li></ul>
      "shortcut": "Mod-Shift-8",   // Custom shortcut
      "label": "Bullet List"       // Custom label
    },
    "ordered_list": {
      "wrapInParagraphs": false,   // <ol><li>content</li></ol> (default)
      "shortcut": "Mod-Shift-9"
    }
  }
}

Las acciones de vínculo admiten el control de atributos de destino para administrar el comportamiento del vínculo. Las secciones disponibles son las siguientes:

{
  "actions": {
    "link": {
      "hideTarget": false,       // Show target attribute options (default)
      "shortcut": "Mod-K",       // Custom keyboard shortcut
      "label": "Insert Link"     // Custom button label
    },
    "unlink": {
      "shortcut": "Mod-Shift-K", // Custom keyboard shortcut
      "label": "Remove Link"     // Custom button label
    }
  }
}
  • hideTarget: false (predeterminado): incluye el atributo objetivo en los vínculos, lo que permite _self, _blank, etc.
  • hideTarget: true - Excluir completamente el atributo de destino de los vínculos

La acción unlink solo aparece cuando el cursor se coloca dentro de un vínculo existente. Quita el formato del vínculo y conserva el contenido del texto.

Acciones de imagen image

Las acciones de imagen admiten el ajuste de elementos de imagen para generar un marcado de imagen interactivo. Las secciones disponibles son las siguientes:

{
  "actions": {
    "image": {
      "wrapInPicture": false,     // Use <img> tag (default)
      "shortcut": "Mod-Shift-I",  // Custom keyboard shortcut
      "label": "Insert Image"     // Custom button label
    }
  }
}

Opciones de configuración de imagen image-options

  • wrapInPicture: false (predeterminado) - Generar elementos <img> simples
  • wrapInPicture: true: ajuste de imágenes en <picture> elementos para un diseño interactivo

Configuración de sangría indentation

La sangría tiene una configuración de nivel de función que controla el ámbito del comportamiento de la sangría, además de configuraciones de acción individuales para métodos abreviados y etiquetas.

{
  "actions": {
    // Feature-level configuration
    "indentation": {
      "scope": "all"  // Controls what content can be indented (default: "all")
    },

    // Individual action configurations
    "indent": {
      "shortcut": "Tab",           // Custom keyboard shortcut
      "label": "Increase Indent"   // Custom button label
    },
    "outdent": {
      "shortcut": "Shift-Tab",     // Custom keyboard shortcut
      "label": "Decrease Indent"   // Custom button label
    }
  }
}

Opciones del ámbito de sangría indentation-options

  • scope: all (predeterminado): la sangría o anulación de sangría se aplica a todo el contenido:

    • Listas: anidar/desanidar elementos de lista
    • Párrafos y encabezamientos: Aumento/disminución del nivel general de sangría

  • scope: lists - La sangría o anulación de sangría solo se aplica a los elementos de la lista:

    • Listas: anidar/desanidar elementos de lista
    • Párrafos y encabezados: sin sangría (botones desactivados para estos)
NOTE
El anidamiento de listas mediante las teclas Tab/Mayús+Tab funciona independientemente de la configuración general de sangría.

Otras acciones other

Todas las demás acciones admiten la personalización básica. Las secciones disponibles son las siguientes:

{
  "actions": {
    "h1": {
      "shortcut": "Mod-Alt-1",
      "label": "Large Heading"
    },
    "paragraph": {
      "shortcut": "Mod-Alt-0",
      "label": "Normal Text"
    },
    "link": {
      "shortcut": "Mod-K",
      "label": "Insert Link",
      "hideTarget": false    // Show target attribute options (default: false)
    }
  }
}

Ejemplo completo example

A continuación se muestra un ejemplo de una configuración completa.

[
  {
    "id": "richtext",
    "rte": {
      // Configure which tools appear in toolbar
      "toolbar": {
        "format": [
          "bold",
          "italic"
        ],
        "blocks": [
          "paragraph",
          "h1",
          "h2"
        ],
        "list": [
          "bullet_list",
          "ordered_list"
        ],
        "insert": [
          "link",
          "unlink"
        ],
        "sections": [
          "format",
          "blocks",
          "list",
          "insert"
        ]
      },
      // Customize individual action behavior
      "actions": {
        // Format actions with HTML tag choices
        "bold": {
          "tag": "strong",
          "shortcut": "Mod-B",
          "label": "Bold"
        },
        "italic": {
          "tag": "em",
          "shortcut": "Mod-I"
        },
        // List actions with content wrapping
        "bullet_list": {
          "wrapInParagraphs": true,
          "label": "Bullet List"
        },
        "ordered_list": {
          "wrapInParagraphs": false
        },
        // Link actions with target control
        "link": {
          "hideTarget": false,
          "shortcut": "Mod-K",
          "label": "Add Link"
        },
        "unlink": {
          "label": "Remove Link"
        },
        // Other actions with basic customization
        "h1": {
          "shortcut": "Mod-Alt-1",
          "label": "Main Heading"
        }
      }
    }
  }
]

Detalles de opción de acción action-details

Varias opciones tienen detalles adicionales que son importantes tener en cuenta.

wrapInParagraphs wrapInParagraphs

La opción wrapInParagraphs de las listas controla la estructura de HTML.

wrapInParagraphs: false (predeterminada) wrapInParagraphs-false

<ul>
  <li>Simple text content</li>
  <li>Another item</li>
</ul>

wrapInParagraphs: true wrapInParagraphs-true

<ul>
  <li><p>Text wrapped in paragraphs</p></li>
  <li><p>Supports rich formatting within items</p></li>
</ul>

Use wrapInParagraphs: true cuando necesite:

  • Formato enriquecido en elementos de lista
  • Varios párrafos por elemento de lista
  • Estilo coherente a nivel de bloque

wrapInPicture

La opción wrapInPicture para imágenes controla la estructura de HTML generada para el contenido de la imagen.

wrapInPicture: false (predeterminado) wrapinpicture-false

<img src="image.jpg" alt="Description" />

wrapInPicture: true wrapinpicture-true

<picture>
  <img src="image.jpg" alt="Description" />
</picture>

Use wrapInPicture: true cuando necesite:

  • Compatibilidad con imágenes interactivas con <source> elementos.
  • Funciones de dirección artística.
  • Protección de futuro para funciones de imagen avanzadas.
  • Estructura coherente del elemento de imagen.
NOTE
Cuando wrapInPicture: true está habilitado, las imágenes se pueden mejorar con <source> elementos adicionales para diferentes consultas y formatos de medios, lo que las hace más flexibles para un diseño interactivo.

La opción hideTarget de los vínculos controla si el atributo target se incluye en los vínculos generados y si el cuadro de diálogo para la creación de vínculos incluye un campo para la selección de destinos.

hideTarget: false (predeterminada) hideTarget-false

<a href="https://example.com" target="_self">Link text</a>
<a href="https://example.com" target="_blank">External link</a>

hideTarget: true hideTarget-true

<a href="https://example.com">Link text</a>

Desactivación de vínculos en imágenes disableforimages

La opción disableForImages de vínculos controla si los usuarios pueden crear vínculos en imágenes y elementos de imagen. Esto se aplica tanto a los elementos <img> en línea como a los elementos <picture> de nivel de bloque.

disableForImages: false (predeterminada) disableforimages-false

Los usuarios pueden seleccionar imágenes y envolverlas en vínculos.

<!-- Inline image with link -->
<a href="https://example.com">
  <img src="image.jpg" alt="Description" />
</a>

<!-- Block-level picture with link -->
<a href="https://example.com">
  <picture>
    <img src="image.jpg" alt="Description" />
  </picture>
</a>

disableForImages: true disableforimages-true

El botón de vínculo se desactiva cuando se selecciona una imagen. Los usuarios solo pueden crear vínculos en el contenido de texto.

<!-- Images remain standalone without links -->
<img src="image.jpg" alt="Description" />

<picture>
  <img src="image.jpg" alt="Description" />
</picture>

<!-- Links work normally on text -->
<a href="https://example.com">Link text</a>

Utilice disableForImages: true cuando desee:

  • Mantenga la coherencia visual evitando las imágenes vinculadas.
  • Simplifique la estructura de contenido separando imágenes de la navegación.
  • Aplique políticas de contenido que restrinjan la vinculación de imágenes.
  • Reduzca la complejidad de la accesibilidad en su contenido.
NOTE
Esta configuración solo afecta a la capacidad de crear nuevos vínculos en imágenes. No elimina los vínculos existentes de las imágenes del contenido.

Opciones de etiqueta tag

Las acciones de formato permiten cambiar entre las variantes de HTML.

Acción
Etiqueta predeterminada
Etiquetas alternativas
Caso práctico
bold
<strong>
<b>
Énfasis semántico vs. visual
italic
<em>
<i>
Estilo semántico vs. visual
strike
<del>
<s>
Eliminación visual frente a semántica

Elija etiquetas semánticas (<strong>, <em>, <del>) para una mejor accesibilidad y optimización de los motores de búsqueda.

Métodos abreviados de teclado keyboard-shortcuts

Los métodos abreviados utilizan el formato Mod-Key, donde:

  • Mod = Cmd en Mac, Ctrl en Windows/Linux
  • Ejemplos: Mod-B, Mod-Shift-8, Mod-Alt-1
recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab