Configurar el Editor de texto enriquecido

Last updated:

Como desarrollador, hay veces que los editores de WYSIWYG proporcionan funciones que, cuando se usan incorrectamente, pueden dificultar el objetivo de una marca unificada y causar problemas de diseño y flujo de contenido. El Editor de texto enriquecido dentro de los módulos personalizados ahora proporciona a los desarrolladores la capacidad de eliminar componentes de la barra de herramientas de configuración a través de la propiedad enabled_features dentro del archivo fields.json.

Nota: lo siguiente se aplica a los módulos personalizados que utilizan el campo de texto enriquecido solo en desarrollo local. El uso de esta función no deshabilitará la funcionalidad de las opciones eliminadas del Editor de texto enriquecido, solo la presentación de las opciones. Esto es por razones de compatibilidad con versiones anteriores para que el contenido existente no se vea afectado. 

Cómo usar enabled_features

En tu archivo fields.json donde tienes tu objeto de campo de texto enriquecido, puedes activar ciertas características agregando las opciones válidas de la barra de herramientas en una matriz a la propiedad enabled_features como se ilustra a continuación:

JSON
// Rich text field with only Bold, Link, and Image available in the Toolbar
{
  "name" : "description",
  "label" : "Description",
  "required" : false,
  "locked" : false,
  "type" : "richtext",
  "default" : null,
  "enabled_features" : ["bold","link","image"]
}

El editor de contenido luego vería el editor de texto enriquecido con solo las opciones incluidas habilitadas como se ilustra en la imagen a continuación:

Nota: algunas características, como el botón "Borrar estilos" que te permite volver al estilo predeterminado para el editor, siempre estarán habilitadas y no se pueden eliminar. Si se omite la propiedad enabled_features, se mostrarán todas las características.

Un ejemplo de una barra de herramientas de RTE con funciones habilitadas.

Lista de características

A continuación se muestra una lista de características que se pueden habilitar individualmente al usar la propiedad enabled_features.

Grupos de controles

Use this table to describe parameters / fields
OpciónDescription
colors

Controles de color de texto y color de fondo.

fonts

Familia de fuentes y controles de tamaño de fuente.

indents

Controles de sangría.

lists

Controles de listas numeradas y con viñetas.

standard_emphasis

Controles de negrita, cursiva y subrayado.

advanced_emphasis

Controles de tachado, superíndice, subíndice y formato de código.

glyphs

Controles de emojis, caracteres especiales e iconos. No se admite en los módulos de correo electrónico. Para agregar el selector de emojis a los módulos de correo electrónico, usa emojis en su lugar.

Formato de texto

Use this table to describe parameters / fields
OpciónDescription
block

Muestra el menú desplegable del conmutador de estilo.

font_family

Muestra el menú desplegable del conmutador de fuentes.

font_size

Muestra el menú desplegable de tamaño de la fuente.

bold

Muestra el botón de negrita.

italic

Muestra el botón de cursiva.

underline

Muestra el botón de subrayado.

text_color

Muestra el botón de color del texto.

background_color

Muestra el botón de color de fondo.

alignment

Muestra el botón de alineación.

bulleted_list

Muestra el botón de lista con viñetas.

numbered_list

Muestra el botón de listas numeradas.

lineheight

Muestra el botón de altura de línea.

outdent

Muestra el botón de atenuación.

indent

Muestra el botón de sangría.

strikethrough

Muestra el botón de tachado.

superscript

Muestra el botón de superíndice.

subscript

Muestra el botón de subíndice.

code_format

Muestra el botón de formato de código.

Insertar botones

Use this table to describe parameters / fields
OpciónDescription
link

Muestra el botón de enlace.

image

Muestra el botón de imagen. No se admite en los módulos de correo electrónico.

emoji

Muestra el botón de emoji.

personalize

Muestra el elemento de barra de herramientas de personalización.

cta

Muestra el elemento del menú de llamada a la acción en el menú de inserción.

embed

Muestra el elemento de menú de incrustación en el menú de inserción.

video

Muestra el elemento del menú de video en el menú de inserción.

table

Muestra el elemento del menú de la tabla en el menú de inserción.

charmap

Muestra el elemento del menú de caracteres especiales en el menú de inserción.

anchor

Muestra el elemento del menú de anclaje en el menú de inserción.

hr

Muestra la posición del menú de línea horizontal en el menú de inserción.

nonbreaking_space

Muestra el elemento de menú de espacio de no ruptura en el menú de inserción.

icon

Muestra el elemento del menú de icono en el menú de inserción.

Opciones avanzadas

Use this table to describe parameters / fields
OpciónDescription
source_code

Muestra el elemento del menú de código fuente en el menú avanzado.

visual_blocks

Muestra el elemento de menú mostrar bloques en el menú avanzado.


¿Te resultó útil este artículo?
Con este formulario puedes enviar tu opinión sobre nuestros documentos para desarrolladores. Si tienes comentarios sobre el producto de HubSpot, puedes enviarlos al Foro de ideas.