Compartir a través de

Tutorial: Configurar el control rich text editor en Power Pages

  • Artículo

En el tutorial, configurará el componente del editor de texto enriquecido en un formulario de Microsoft Dataverse y habilitará el editor de texto enriquecido para que sea visible en una página web.

Este tutorial utilizará la tabla Comentarios y la página web Contáctenos que está disponible en las plantillas de Diseño de inicio.

Requisitos previos

  • La versión de su portal debe ser 9.4.3.x o posterior.
  • Un sitio que utilice una de las plantillas de diseño de inicio.

Paso 1. Agregar el componente de código a un campo en un formulario

  1. En el estudio de diseño, seleccione el espacio de trabajo Espacio de trabajo de datos.

  2. Seleccione la tabla de comentarios.

  3. Seleccione Formularios y luego elija editar el formulario de contacto simple.

  4. Seleccione el campo Mensaje.

  5. Elija + Componente y seleccione el componente Introducción de número.

    Agregar un componente RTE al formulario.

  6. Seleccione Listo.

  7. Seleccione Guardar y Publicar formulario.

Paso 2. Configurar el componente del editor de texto enriquecido en la página web

En los siguientes pasos configuraremos la página de comentarios existente, también puede crear su propia página y agregar su propio componente de formulario.

  1. En el espacio de trabajo Páginas, seleccione la página Contáctenos.

  2. El campo Mensaje debe aparecer en el formulario con el mensaje Habilitar componente personalizado para ver este campo en vista previa.

  3. Seleccione el campo y elija Editar campo.

  4. Seleccione el campo Habilitar campo de componente personalizado.

    Habilite el componente RTE en el estudio de diseño.

  5. Seleccione Aceptar.

  6. Haga clic en Sincronizar.

Nota

Es posible que deba aumentar el tamaño de los caracteres de las columnas de texto para acomodar la información adicional para mostrar los datos como texto enriquecido.

Paso 3.1 Agregar permisos de tabla para la tabla de archivos adjuntos de texto enriquecido

Para usar y almacenar imágenes en el editor de texto enriquecido del portal, deberá agregar permisos de tabla a la tabla de archivos adjuntos de texto enriquecido (msdyn_richtextfile).

  1. Abra el estudio de diseño y seleccione el espacio de trabajo Configurar.

  2. Seleccione Permisos de tabla.

  3. Seleccione + Nuevo permiso para crear un nuevo permiso de tabla para la tabla de archivos adjuntos de texto enriquecido. El nombre puede ser cualquier cosa que elija, por ejemplo; Datos adjuntos RTE.

  4. Para Tipo de acceso, seleccione Acceso global.

    Nota

    El tipo Acceso global se elige porque no hay relación existente entre la tabla configurada para usar el control rich text editor y la tabla de datos adjuntos de texto enriquecido.

  5. En Permiso para seleccione las casillas Leer, Escribir, Crear y Eliminar.

  6. Asigne un rol web adecuado al permiso de tabla.

    Configuración de los permisos de tabla de texto enriquecido.

Importante

Si desea almacenar imágenes como cadenas base 64 directamente en la columna configurada para usar el control rich text editor, debe configurar el control usando un archivo de configuración JSON. Establezca disableImages y disableDefaultImageProcessing como true para permitir que las imágenes se reproduzcan de manera uniforme en todos los clientes. El uso de este método no requiere el permiso de tabla global en la tabla archivos adjuntos de texto enriquecido (msdyn_richtextfile).

Paso 3.2. Agregar la configuración del sitio de la API web

Para guardar imágenes en el control del editor de texto enriquecido, deberá agregar un par de configuraciones del sitio.

  1. Abra la aplicación Portals Management.

  2. Vaya a Configuración del sitio.

  3. Cree la siguiente configuración del sitio, ingrese el nombre, su sitio web y el valor de true, y seleccione Guardar y cerrar.

    Nombre de configuración del sitio Valor
    Webapi/msdyn_richtextfile/enabled true
    Webapi/msdyn_richtextfile/fields *

Paso 4. Vista previa del sitio.

  1. En el estudio de diseño, seleccione Sincronizar.

  2. Seleccione Vista previa y luego seleccione Escritorio, vaya a la página Contáctenos, debería ver el componente personalizado habilitado.

    Componente RTE en un formulario.

Editor de texto enriquecido en un formulario de solo lectura

En un formulario de solo lectura, el editor de texto enriquecido muestra el contenido con el formato y las imágenes. El contenido se puede leer, pero no editar ni actualizar.

Nota

Solo se admiten los formatos de archivo .PNG, .JPG. o .GIF para arrastrar y soltar.

Renderización del campo de contenido del editor de texto enriquecido mediante Liquid o la API Web de Pages

El campo de contenido del editor de texto enriquecido puede renderizarse utilizando Liquid o la API web de Pages. Si el campo contiene algún archivo de imagen, tendrá un ruta de referencia de API web de Dataverse. Para mostrar estas imágenes en una página web de Pages, debe reemplazar la ruta actual con la ruta API de Pages correspondiente.

Ejemplo:

El elemento de imagen dentro del campo de contenido del editor de texto enriquecido se mostrará de la siguiente manera y contendrá una referencia a la ruta de la API web de Dataverse:

   <img loading="lazy" src="/api/data/v9.0/msdyn_richtextfiles(d0a473a4-9e95-ee11-be37-000d3a5c393e)/msdyn_imageblob/$value?size=full" style="height:61px; width:376px">

Para actualizar el elemento de imagen, reemplace /api/data/v9.0 con /_api como se muestra a continuación:

   <img loading="lazy" src="/_api/msdyn_richtextfiles(d0a473a4-9e95-ee11-be37-000d3a5c393e)/msdyn_imageblob/$value?size=full" style="height:61px; width:376px">

Consulte también