Você pode configurar um determinado conteúdo de texto ou imagem em um layout para torná-lo editável, trabalhando com páginas baseadas no layout.
Essa funcionalidade pode ser usada em qualquer tema, inclusive de bootstrap. As modificações assumem automaticamente o estilo da página original.
Você pode adicionar marcação simples às seguintes tags HTML no layout: <p>, <h1> até <h6>, <div> e <img>.
As opções de formatação de texto e imagem incluem:
Texto: permite que os usuários especifiquem Negrito, Itálico, Sublinhado e Link.
Imagem: permite que os usuários especifiquem um link para um arquivo de imagem. Altere as propriedades para título (o que o usuário vê quando passa o cursor do mouse sobre uma imagem) e adicione texto alternativo para acessibilidade.
A modificação de um elemento de texto ou imagem para que ele possa ser editado pelos usuários exige duas coisas:
Adicione scs-editable à class.
Adicione um atributo id exclusivo.
Após a modificação de um layout, a funcionalidade estará disponível para todas as páginas baseadas nesse layout (até mesmo novas páginas).
Se você copiar e colar uma página, as modificações serão copiadas para a nova página.
Modificando uma Tag de Título
Sincronize o arquivo de layout com seu desktop local ou edite o arquivo de origem HTML para o cabeçalho <h1>.
Adicione scs-editable à class e adicione o atributo id="test-heading" na linha de código do título para permitir que um editor seja anexado a ele. Por exemplo:
<h1 class="brand-heading scs-editable" id="test-heading">Sample Heading Value</h1>
Salve o arquivo.
Faça a sincronização com o Oracle Content Management e recarregue o browser.
Uma borda preta deverá aparecer em volta do título quando o usuário passar o cursor do mouse sobre ele, indicando que o conteúdo pode ser editado. Quando um usuário clica no título, a borda fica verde, indicando que o usuário agora pode editar o conteúdo do título.
Se o tema não tiver sido publicado, faça isso. Se tiver sido publicado, a alteração aparecerá quando você atualizar o browser.
Depois que o tema é publicado, os usuários do site podem clicar no cabeçalho e editá-lo no Site Builder.
Um pseudo componente é criado para o elemento scs-editable para que você possa alterá-lo no Site Builder e armazená-lo com os dados da página. No runtime, antes da renderização da página, o controlador substitui as tags scs-editable pelos valores definidos por você no Site Builder.
Modificando uma Tag de Imagem
O procedimento para modificar uma tag de imagem em um layout para que ele possa ser editado pelos usuários é semelhante ao do texto.
Adicione scs-editable à class.
Adicione um id de imagem exclusivo.
Os usuários podem clicar na imagem e, em seguida, alterar as propriedades para usar uma imagem diferente.
Este é o código de amostra de uma imagem que pode ser editado pelos usuários:
<img class="scs-editable" id="test-image" src="_scs_theme_root_/assets/img/downloads-bg-small.jpg"/>