DocumentaciónAEMGuía del usuario

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

Última actualización: 19 de agosto de 2026
  • Se aplica a:
  • Experience Manager as a Cloud Service

Creado para:

  • Admin
  • Developer

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.

NOTE
Al iniciar un proyecto de editor universal, todas las características de texto enriquecido compatibles con el servidor (AEM con Edge Delivery o implementación sin encabezado) se activan automáticamente y están disponibles en la ventana del editor modal de RTE.
  • Puede desactivar las opciones que no necesite.
  • No se admite la activación de opciones que no son compatibles con el tipo de proyecto.

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", "code_inline", "text_color"],
    // 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", "blockquote"],
    // List options
    "list": ["bullet_list", "ordered_list"],
    // Content insertion
    "insert": ["link", "unlink", "image", "table", "special_characters"],
    // Superscript/subscript
    "sr_script": ["superscript", "subscript"],
    // Editor utilities
    "editor": ["removeformat", "clean_unsupported_tags", "paste_text", "fullscreen", "find_and_replace"],
    // Advanced items (e.g. the class picker).
    "advanced": ["classes"],
    // Section ordering (optional)
    "sections": ["format", "alignment", "list"]
  }
}

Configuración de la acción action

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

Opciones de acción comunes common-action-options

La mayoría de las acciones admiten las siguientes opciones comunes:

  • shortcut?: cadena: anula el método abreviado de teclado predeterminado para la acción (si existe)
  • label?: cadena: anula la etiqueta utilizada para la acción en la interfaz de usuario
  • hideInline?: booleano: cuando true, oculta esta acción de la barra de herramientas del editor RTE en contexto (en línea)
{
  "actions": {
    "bold": {
      "label": "Bold",
      "shortcut": "Mod-B",
      "hideInline": true
    }
  }
}

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"
    }
  }
}

Acciones de tabla table-actions

Las acciones de tabla admiten el ajuste de contenido para controlar la estructura de HTML en las celdas de la tabla:

{
  "actions": {
    "table": {
      "wrapInParagraphs": false, // <td>content</td> (default)
      "shortcut": "Mod-Alt-T",   // Custom shortcut
      "label": "Insert Table"    // Custom label
    }
  }
}

Opciones de configuración de tabla table-configuration-options

  • wrapInParagraphs: false (predeterminado): las celdas de la tabla contienen contenido de texto sin ajustar
  • wrapInParagraphs: true: las celdas de la tabla ajustan el contenido en las etiquetas de párrafo

Ejemplos:

Cuando wrapInParagraphs: false:

<!-- Single line -->
<td>Cell content</td>

<!-- Multiple paragraphs get <br> separation -->
<td>Line 1<br />Line 2</td>

Cuando wrapInParagraphs: true:

<!-- Single paragraph -->
<td><p>Cell content</p></td>

<!-- Multiple paragraphs preserved -->
<td>
  <p>Line 1</p>
  <p>Line 2</p>
</td>
NOTE
Al desajustar párrafos (wrapInParagraphs: false), el desinfectador inserta automáticamente etiquetas <br> entre varios párrafos para conservar los saltos de línea visuales. Esto sigue los estándares de HTML y las prácticas comunes en los principales editores de texto enriquecido.

Cuadros de diálogo Propiedades properties-dialog

El complemento de tabla incluye tres cuadros de diálogo del editor de propiedades que se abren desde el menú Tabla cuando estos indicadores están habilitados:

  • Propiedades de tabla: edite el ancho y alto de la tabla adjunta, el espaciado de celdas, el relleno de celdas, la alineación, el borde (ancho/estilo/color) y el color de fondo. Los cambios en el borde y el relleno de celda se aplican a todas las celdas de la misma transacción, de modo que el resultado visual coincida con lo que esperaría un usuario.
  • Propiedades de fila: edite el tipo de fila de la fila adjunta (Encabezado/Cuerpo/Pie de página), alineación, altura, borde (ancho/estilo/color) y color de fondo. El tipo de fila es solo de sección (coincide con el valor predeterminado de TinyMCE table_header_type: "section"): una fila de encabezado se mueve a <thead> en la serialización, pero sus celdas permanecen <td>. Usar propiedades de celda -> celda de encabezado para <th>. En la serialización, las filas se agrupan en <thead>/<tbody>/<tfoot> secciones reales (que coinciden con TinyMCE/Word). Consulte la nota de almacenamiento a continuación. Los bordes se abren hacia las celdas de la fila y se representan bajo el borde, contraído.
  • Propiedades de celda: edite el tipo de celda (celda/celda de encabezado), ancho/alto, alineación horizontal y vertical, borde (ancho/estilo/color) y color de fondo seleccionados. Cuando un CellSelection ocupa varias celdas, el parche se aplica a todas las celdas seleccionadas a la vez. El tipo de celda alterna la celda entre table_cell (<td>) y table_header (<th>).

Los tres valores predeterminados están deshabilitados (inclusión), lo que coincide con el resto de la superficie de configuración de RTE donde las capacidades están desactivadas hasta que un consumidor las habilita explícitamente. Inclusión por consumidor cuando desee que aparezcan los cuadros de diálogo:

{
  actions: {
    table: {
      showTableProperties: true, // default false: show "Table Properties" menu item
      showRowProperties: true,   // default false: show "Row Properties" menu item
      showCellProperties: true,  // default false: show "Cell Properties" menu item
    }
  }
}

Opciones de diálogo Propiedades properties-dialog-options

|—|—|—|
| Opción | Predeterminado | Efecto |
| showTableProperties | false | Mostrar el elemento Propiedades de tabla en la lista desplegable Tabla |
| showRowProperties | false | Mostrar el elemento Propiedades de fila en el submenú Fila |
| showCellProperties | false | Mostrar el elemento Propiedades de celda en el submenú Celda |

Los cuadros de diálogo se recorren de ida y vuelta a través de htmlAttrs.style en el nodo respectivo de ProseMirror, es decir, CSS en línea como TinyMCE/Word, no atributos de datos personalizados. El ancho de celda también escribe el nivel de esquema colwidth para que sobreviva a la maquinaria de tabla de PM. La etiqueta de nodo (<td>/<th>) lleva el tipo de celda.

El esquema prosemirror-tables es plano (table -> table_row -> cell) sin nodos de sección <thead>/<tbody>/<tfoot>, por lo que internamente se mantiene la intención del encabezado/cuerpo/pie de página de una fila en <tr> como marcador data-row-type. Cuando cambia el tipo de una fila, las filas se reordenan en su lugar en el encabezado -> cuerpo -> orden del pie de página dentro de la misma transacción, de modo que el lienzo del editor coincide con la estructura exportada en directo (las filas del encabezado se elevan hacia la parte superior, las filas del pie de página se hunden hasta la parte inferior, como TinyMCE). Esta reordenación en el editor se omite cuando cualquier celda ocupa varias filas (rowspan > 1), donde al mover una fila se dañaría la cuadrícula. A la salida, sanitizeHTML agrupa las filas en secciones reales de <thead>/<tbody>/<tfoot> (primero las filas de encabezado y después las filas de pie) y suelta el marcador, produciendo la misma estructura que TinyMCE/Word. Al entrar, se vuelve a leer en el marcador la sección adjunta de <tr>, por lo que se seccionan los viajes de ida y vuelta de HTML.

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

Pantalla completa full-screen

La acción de pantalla completa cambia el editor dentro y fuera del modo de pantalla completa:

{
  actions: {
    fullscreen: {
      label: "Fullscreen"; // Custom button label
    }
  }
}

Cuando la pantalla completa está activa, el contenedor del editor recibe la clase rte-fullscreen-wrapper. Las aplicaciones de consumo pueden orientar esta clase para aplicar estilos personalizados o propiedades CSS (por ejemplo, z-index, dimensiones, superposición). (No compatible con el editor universal)

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.

Caracteres especiales special-characters

La acción de inserción special_characters abre una ventana emergente del selector de caracteres para insertar caracteres especiales (símbolos, operadores matemáticos, signos de moneda, puntuación, flechas, etc.) en la posición del cursor.

{
  "toolbar": {
    "insert": ["link", "unlink", "image", "table", "special_characters"],
    "sections": ["insert"],
  },
  "actions": {
    "special_characters": {
      "label": "Special Characters"
    }
  }
}

Se incluye de forma predeterminada un conjunto de 44 caracteres utilizados con frecuencia. La lista de caracteres se puede personalizar mediante dos opciones de configuración:

  • appendCharacters - Agregar caracteres al conjunto predeterminado
  • characters - Reemplazar el conjunto predeterminado por completo

Cada entrada de carácter tiene character (el carácter Unicode) y title (información sobre herramientas / nombre accesible).

Anexar caracteres a los valores predeterminados append-special-characters

{
  "actions": {
    "special_characters": {
      "appendCharacters": [
        { "character": "\u2605", "title": "Black star" },
        { "character": "\u2764", "title": "Heavy black heart" },
      ];
    }
  }
}

Reemplazar caracteres especiales predeterminados replace-special-characters

{
  "actions": {
    "special_characters": {
      "characters": [
        { "character": "\u00A9", "title": "Copyright sign" },
        { "character": "\u00AE", "title": "Registered sign" },
        { "character": "\u2122", "title": "Trade mark sign" },
      ];
    }
  }
}

Ambas opciones juntas both-special-character-options

Este ejemplo usa characters como base y, a continuación, anexa caracteres adicionales usando appendCharacters.

{
  "actions": {
    "special_characters": {
      "characters": [
        { "character": "\u00A9", "title": "Copyright sign" },
        { "character": "\u00AE", "title": "Registered sign" }
      ],
      "appendCharacters": [
        { "character": "\u2605", "title": "Black star" }
      ]
    }
  }
}

Clases CSS css-classes

La acción classes agrega una lista desplegable que aplica una clase CSS configurable al contenido RTE. Aparece como un elemento en la sección advanced. El complemento solo escribe o elimina nombres de clase en el HTML producido. La aplicación del consumidor es propietaria del CSS real de cada clase y es responsable de cargarlo siempre que se procese el contenido RTE (editor, vista previa, publicación).

La lista desplegable solo aparece cuando hay al menos una opción configurada. El complemento se enviará sin valores predeterminados.

{
  toolbar: {
    advanced: ["classes"],
    sections: ["blocks", "format", "advanced"],
  },
  actions: {
    classes: {
      label: "Add Custom Class",
      options: [
        { value: "rte-hero", label: "Hero title" },
        { value: "rte-lede", label: "Lede paragraph" },
        { value: "rte-callout", label: "Callout block" },
        { value: "rte-pill", label: "Pill (inline)" },
      ],
    },
  },
}

Cada entrada tiene un valor (el nombre de clase CSS escrito en HTML) y una etiqueta (el texto legible en lenguaje natural que se muestra en la lista desplegable).

El destino sigue la regla de “lo más parecido a un símbolo de intercalación”:

  • Selección vacía dentro de un intervalo administrado: La clase se aplica a esa ejecución de intervalo, no al bloque. Al elegir una clase diferente, se intercambia la clase del grupo; Quitar clase personalizada la borra.
  • Selección vacía en otra parte (sólo cursor): La clase elegida se aplica al antecesor de nivel de bloque más cercano del cursor (<p>, <h1>, etc.). Cuando el cursor se encuentra dentro de un elemento de lista o celda de tabla que ajusta un párrafo, <li>/<td>/<th> recibe la clase, no el párrafo interno.
  • Selección real: El texto seleccionado está envuelto en un <span class="...">. Si la selección ya tiene un intervalo, se actualiza la clase del intervalo existente.
  • Quitar clase personalizada: quite la clase administrada del destino (abarque la ejecución o el bloque, cualquiera que sea la resolución del símbolo de intercalación). Si el único atributo restante de un span era la clase administrada, el propio span se desajusta. La opción Quitar clase personalizada solo aparece cuando una clase administrada está activa actualmente.

Las clases existentes que no forman parte de la lista de opciones configuradas se conservan intactas. Sólo las clases administradas se intercambian entre sí. Las clases configuradas por el consumidor coexisten de forma segura con el complemento.

Reflejo desplegable:

  • Con solo el cursor colocado, la lista desplegable refleja la clase administrada más cercana: el intervalo en el símbolo de intercalación si hay uno; de lo contrario, el bloque bajo el cursor.
  • Con una selección, la lista desplegable refleja la clase administrada en el intervalo que ajusta la selección. Solo cuando toda la selección comparte la misma clase. Las selecciones mixtas no muestran nada seleccionado.

Tipos de bloques block-types

La sección de barra de herramientas blocks presenta un menú desplegable que cambia el bloque actual entre los tipos de bloques configurados. Los valores admitidos son paragraph, h1-h6, code_block y blockquote.

  • blockquote es un bloque envolvente (su ProseMirror content es block+), a diferencia de paragraph/h1-h6/code_block, que son bloques de texto. Al seleccionar Cita, se ajusta el bloque actual en un <blockquote>. A continuación, la lista desplegable muestra Cita como seleccionada mientras el símbolo de intercalación está dentro de uno. Si se selecciona cualquier otro tipo de bloque (p. ej. Párrafo) mientras se está dentro de una comilla, se levanta el bloque de la comilla primero, por lo que también se deja la comilla. Esto refleja el menú desplegable de bloques de TinyMCE.
  • Como es un nodo de ajuste, un <blockquote> puede contener varios párrafos, listas o incluso comillas anidadas. Esto es lo que permite que el contenido creado externamente se envíe de ida y vuelta sin pérdidas: TinyMCE (contenido heredado) y Word (pegar) emiten <blockquote><p>…</p></blockquote> (a menudo de varios párrafos), y esa estructura se conserva al cargar, editar y serializar en lugar de aplanarse.
  • Al igual que con todos los tipos de bloques, la aplicación de consumo posee el CSS que aplica estilos visuales a <blockquote> dondequiera que se represente el contenido RTE.
{
  "toolbar": {
    "blocks": ["paragraph", "h1", "h2", "h3", "code_block", "blockquote"],
    "sections": ["blocks"],
  },
  "actions": {
    "blockquote": {
      "label": "Quote", // Custom dropdown label
    },
  },
}

Pegar como texto paste-as-text

La acción del editor paste_text habilita un flujo de trabajo estándar de pegar como texto sin formato.

  • Método abreviado predeterminado: Mod-Shift-v (Cmd+Mayús+V en macOS, Ctrl+Mayús+V en Windows/Linux)
  • Comportamiento: Pega desde texto/sin formato (se omite el formato de origen)
    • En las listas, las líneas nuevas crean nuevos elementos de lista.
{
  "toolbar": {
    "editor": ["removeformat", "paste_text"]
  },
  "actions": {
    "paste_text": {
      "shortcut": "Mod-Shift-v",
      "label": "Paste as Text"
    }
  }
}

Buscar y reemplazar find-replace

La acción del editor find_and_replace usa prosemirror-search (elementos destacados de la coincidencia) además de un complemento de comando escrito por FIND_AND_REPLACE_PLUGIN_KEY.

  • Integración: Agregue createFindAndReplacePlugin() a los complementos ProseMirror de su editor cuando toolbar.editor incluya find_and_replace.
  • API: Use FIND_AND_REPLACE_PLUGIN_KEY.getState(state) para obtener acceso a find, replaceNext, replaceAll y getMatchCount.
  • Estilos: Asegúrese de que la aplicación cargue CSS para .ProseMirror-search-match y .ProseMirror-active-search-match (desde prosemirror-search style/search.css o su propio equivalente).
{
  "toolbar": {
    "editor": ["find_and_replace"],
    "sections": ["editor"],
  },
  "actions": {
    "find_and_replace": {
      "label": "Find and replace",
    },
  },
}

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",
          "text_color"
        ],
        "blocks": [
          "paragraph",
          "h1",
          "h2"
        ],
        "list": [
          "bullet_list",
          "ordered_list"
        ],
        "insert": [
          "link",
          "unlink",
          "image",
          "special_characters"
        ],
        "editor": [
          "removeformat",
          "paste_text"
        ],
        "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"
        },
        // Image actions with picture wrapping
        "image": {
          "wrapInPicture": false, // Use <img> tag instead of <picture>
          "shortcut": "Mod-Shift-I",
          "label": "Insert Image",
        },
        // Special characters with custom additions
        "special_characters": {
          "label": "Special Characters",
          "appendCharacters": [{ "character": "\u2605", "title": "Black star" }],
        },
        // Other actions with basic customization
        "paste_text": {
          "shortcut": "Mod-Shift-v",
          "label": "Paste as Text",
        },
        "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.

Código en línea inline-code

La opción de formato code_inline marca un intervalo de texto como código en línea, y representa <code> (por ejemplo, haciendo referencia a una llamada de foo() dentro de una frase). A diferencia de bold/italic/strike, no tiene opción de cambiar etiquetas y excluye todas las demás marcas. El código en línea se representa de forma literal, por lo que bold/italic/link no se puede aplicar sobre él. La combinación de teclas predeterminada es Mod-e.

Es distinto del bloque code_block (<pre><code>) disponible en la lista desplegable blocks. code_inline es una marca en línea dentro de una línea, mientras que code_block es un bloque independiente de varias líneas. Los bloques de código contienen solo texto sin formato (sin marcas), por lo que un elemento en línea <code> nunca se anida dentro de un elemento <pre>.

Use the <code>foo()</code> helper here.

Color del texto color

La opción de formato text_color agrega funciones de coloreado de texto al editor.

<!-- With color applied -->
<span style="color: #ff0000">Colored text</span>

<!-- Color removed -->
Plain text

El complemento también analiza los elementos <font color="..."> heredados para comprobar la compatibilidad con versiones anteriores.

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

HTML no compatible unsupported-html

De forma predeterminada, las etiquetas de HTML desconocidas se eliminan cuando el editor las analiza. Para conservarlos, realice la inclusión a través de la opción de configuración unsupportedHtml:

const rteConfig = {
  unsupportedHtml: true, // preserve unknown HTML tags (default: false)
};
Value
Comportamiento
false (predeterminada)
Las etiquetas HTML desconocidas se pierden durante el análisis.
true
Las etiquetas de HTML desconocidas están envueltas en un nodo de bloque no compatible personalizado para que el contenido pueda moverse de forma segura.

unsupportedHtmlOptions.structuralTags (opcional) unsupportedhtmloptions

Use unsupportedHtmlOptions.structuralTags para controlar qué etiquetas estructurales adicionales se tratan como HTML compatible.

const rteConfig = {
  unsupportedHtml: true,
  unsupportedHtmlOptions: {
    structuralTags: ["div", "section"], // preserve configured tags as supported
  },
};
Value
Comportamiento
Omitido/[]
No se incluyen etiquetas estructurales adicionales en la lista blanca.
["div"]
<div> se trata como compatible con HTML y no se ajusta como no compatible.
["div", "section"]
Tanto <div> como <section> se tratan como HTML compatible y no se ajustan como no compatibles.
NOTE
unsupportedHtmlOptions solo afecta al comportamiento cuando unsupportedHtml está habilitado.

Cuando está habilitado, el editor procesa nodos no admitidos con etiquetas de contenedor (unsupported-block/unsupported-inline) y clases de contenedor. Las aplicaciones de consumo deben proporcionar el estilo para esta clase (por ejemplo, borde, relleno, fondo). La etiqueta dentro del bloque usa rte-unsupported-label, que también se puede personalizar.

  • rte-unsupported-block
  • rte-unsupported-inline
  • rte-unsupported-label

Las aplicaciones de consumo deben proporcionar estilo para estas clases (por ejemplo, borde, espaciado, fondo y alineación en línea).

Cuando unsupportedHtml está habilitado, el consumidor debe agregar el complemento nodos no compatibles (p. ej. createUnsupportedNodesPlugin()) para que al copiar un bloque o nodo en línea no compatible se coloque su texto interno en el portapapeles (solo texto sin formato) y los usuarios puedan pegar el contenido en otro lugar.

recommendation-more-help
experience-manager-cloud-service-help-main-toc