Tornar o Conteúdo de Disposição Editável

Pode configurar parte do conteúdo de texto ou imagem numa disposição para o tornar editável pelos utilizadores que trabalham com páginas baseadas na disposição.

Esta funcionalidade pode ser utilizada em qualquer tema, incluindo temas do Bootstrap. As modificações assumem automaticamente o estilo da página original.

Pode acrescentar markup simples aos seguintes identificadores de HTML na disposição: <p>, <h1> a <h6>, <div> e <img>.

As opções de formatação de texto e imagem incluem:

  • Texto: Permite aos utilizadores especificar Negrito, Itálico, Sublinhado e Ligação.

  • Imagem: Permite aos utilizadores especificar uma ligação para um ficheiro de imagem. Altere as propriedades do título (o que o utilizador vê quando coloca o cursor sobre uma imagem) e acrescente texto alternativo para fins de acessibilidade.

A modificação de um elemento de texto ou de imagem para que possa ser editado pelos utilizadores requer duas ações:

  1. Acrescente scs-editable a class.

  2. Acrescente um atributo id exclusivo.

Uma vez modificada a disposição, a funcionalidade estará disponível para todas as páginas baseadas nessa disposição (mesmo as novas páginas).

Se copiar e colar uma página, as modificações serão copiadas para a nova página.

Modificar um Identificador de Título

Segue-se um exemplo de como modificar um identificador de título numa disposição para que possa ser editado pelos utilizadores.
  1. Sincronize o ficheiro de disposição com o seu ambiente de trabalho local ou edite o ficheiro de origem HTML para o cabeçalho <h1>.

  2. Acrescente scs-editable a class e acrescente o atributo id="test-heading" na linha de código para o título, de modo a que este permita a anexação de um editor. Por exemplo:

    <h1 class="brand-heading scs-editable" id="test-heading">Sample Heading Value</h1>
  3. Grave o ficheiro.

  4. Sincronize com o Oracle Content Management e recarregue o browser.

    Deverá aparecer um contorno preto em redor do título quando o utilizador colocar o cursor sobre o mesmo, indicando que o conteúdo pode ser editado. Quando um utilizador clicar no título, o contorno fica verde, indicando que o utilizador pode agora editar o conteúdo do título.

  5. Se o tema não tiver sido publicado, publique-o. Se tiver sido publicado, a alteração será apresentada quando renovar o browser.

    Uma vez publicado o tema, os utilizadores do site podem clicar no cabeçalho e editá-lo no Criador de Sites.

    É criado um pseudocomponente para o elemento scs-editable para poder alterá-lo no Criador de Sites e armazená-lo com os dados da página. Em runtime, antes de a página ser renderizada, o controlador substitui os identificadores scs-editable pelos valores que definiu no Criador de Sites.

Modificar um Identificador de Imagem

O procedimento para modificar um identificador de imagem numa disposição para que possa ser editado pelos utilizadores é semelhante ao utilizado para texto.

  1. Acrescente scs-editable a class.

  2. Acrescente uma id de imagem exclusiva.

Os utilizadores podem clicar na imagem e, em seguida, alterar as propriedades para utilizar uma imagem diferente.

Segue-se um código de exemplo para uma imagem que pode ser editada pelos utilizadores:

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