Conversión del contenido de diseño en editable

Puede configurar determinados contenidos de texto o imagen en un diseño para que sea editable por otros usuarios que trabajen con páginas basadas en el diseño.

Esta funcionalidad se puede utilizar en cualquier tema, incluidos los temas de bootstrap. Las modificaciones asumen el estilo de la página original de forma automática.

Puede agregar un marcador simple a las siguientes etiquetas HTML del diseño: de <p>, <h1> a <h6>, <div> y <img>.

Las opciones de formato de texto e imagen son:

  • Texto: permite a los usuarios especificar Negrita, Cursiva, Subrayado y Enlace.

  • Imagen: permite a los usuarios especificar un enlace a un archivo de imagen. Cambie las propiedades del título (lo que el usuario ve al pasar el cursor sobre una imagen) y agregue un texto alternativo de accesibilidad.

La modificación de un elemento de texto o imagen para que puedan editarlo otros usuarios requiere dos cosas:

  1. Agregue scs-editable a class.

  2. Agregue un atributo de id único.

Una vez que se ha modificado un diseño, la funcionalidad estará disponible para todas las páginas basadas en dicho diseño (incluidas las páginas nuevas).

Si se copia y pega una página, las modificaciones se copiarán en la nueva página.

Modificación de una etiqueta de cabecera

A continuación se muestra un ejemplo de cómo modificar una etiqueta de cabecera de un diseño para que puedan editarla otros usuarios.
  1. Sincronice el archivo de diseño con el escritorio local o edite el archivo HTML de origen para la cabecera <h1>.

  2. Agregue scs-editable a class y agregue id="test-heading" del atributo en la línea de código de la cabecera, de modo que esta permita que se le enlace un editor. Por ejemplo:

    <h1 class="brand-heading scs-editable" id="test-heading">Sample Heading Value</h1>
  3. Guarde el archivo.

  4. Realice la sincronización con Oracle Content Management y vuelva a cargar el explorador.

    Debe aparecer un borde negro alrededor de la cabecera cuando el usuario pasa el cursor sobre esta, lo que indica que el contenido se puede editar. Cuando un usuario hace clic en la cabecera, el borde cambia al color verde, lo que indica que el usuario puede ahora editar el contenido de la cabecera.

  5. Si no se ha publicado el tema, hágalo. Si se ha publicado, el cambio se mostrará cuando refresque el explorador.

    Una vez publicado el tema, los usuarios del sitio pueden hacer clic en la cabecera y editarla en el creador de sitios.

    Se crea un seudocomponente para el elemento scs-editable para que pueda cambiarlo en el creador de sitios y almacenarlo con los datos de la página. En tiempo de ejecución, antes de que se represente la página, el controlador reemplaza las etiquetas scs-editable por los valores que defina en el creador de sitios.

Modificación de una etiqueta de imagen

El procedimiento para modificar una etiqueta de imagen de un diseño para que puedan editarla los usuarios es similar al del texto.

  1. Agregue scs-editable a class.

  2. Agregue un id de imagen único.

Los usuarios pueden hacer clic en la imagen y, a continuación, cambiar las propiedades para utilizar una imagen diferente.

A continuación se muestra un código de ejemplo de una imagen que pueden editar los usuarios:

<img class="scs-editable" id="test-image" src="_scs_theme_root_/assets/img/downloads-bg-small.jpg"/>