È possibile configurare il contenuto di testo o di immagini di un layout in modo che possa essere modificato dagli utenti che utilizzano le pagine basate sul layout.
Questa funzionalità può essere utilizzata in qualsiasi tema, compresi i temi di bootstrap. Alle modifiche viene applicato automaticamente lo stile della pagina originale.
È possibile aggiungere markup semplice alle tag HTML seguenti nel layout: <p>, da <h1> a <h6>, <div> e <img>.
Di seguito vengono descritte le opzioni di formattazione per testo e immagini disponibili.
Testo: consente agli utenti di specificare Grassetto, Corsivo, Sottolineatura e Collegamento.
Immagine: consente agli utenti di specificare un collegamento a un file immagine. Consente inoltre di modificare le proprietà per il titolo (ciò che l'utente vede quando si posiziona il cursore su un'immagine) e di aggiungere testo alternativo per l'accesso facilitato.
Per la modifica di un elemento di testo o immagine in modo che possa essere modificato dagli utenti sono necessarie due operazioni:
Aggiungere scs-editable a class.
Aggiungere un attributo id univoco.
Dopo che il layout sarà stato modificato, la funzionalità sarà disponibile per tutte le pagine basate sul layout (nuove pagine comprese).
Se si copia e incolla una pagina, le modifiche verranno copiate nella nuova pagina.
Modifica di una tag di intestazione
Sincronizzare il file del layout con il desktop locale oppure modificare il file di origine HTML per l'intestazione <h1>.
Aggiungere scs-editable a class e aggiungere l'attributo id="test-heading" nella linea di codice per l'intestazione per consentire l'associazione di un editor. Ad esempio:
<h1 class="brand-heading scs-editable" id="test-heading">Sample Heading Value</h1>
Salvare il file.
Eseguire la sincronizzazione con Oracle Content Management e ricaricare il browser.
Quando l'utente passa il cursore del mouse sull'intestazione, dovrebbe essere visualizzato un bordo di colore nero, che indica che il contenuto può essere modificato. Quando l'utente fa clic sull'intestazione, il bordo diventa verde per indicare che è possibile procedere alla modifica del contenuto dell'intestazione.
Se il tema non è stato pubblicato, procedere alla pubblicazione. Se invece è stato pubblicato, la modifica verrà visualizzata non appena si aggiornerà il browser.
Dopo la pubblicazione del tema, gli utenti del sito potranno fare clic sull'intestazione e modificarla in SiteBuilder.
Viene creato uno pseudocomponente per l'elemento scs-editable in modo che possa essere modificato in SiteBuilder e memorizzato nei dati di pagina. In runtime, prima del rendering della pagina, il controller sostituisce le tag scs-editable con i valori impostati in SiteBuilder.
Modifica di una tag di immagine
La procedura di modifica di una tag di immagine in un layout in modo che possa essere modificata dagli utenti è simile a quella utilizzata per il testo.
Aggiungere scs-editable a class.
Aggiungere un attributo id di immagine univoco.
Gli utenti possono fare clic sull'immagine, quindi modificare le proprietà per utilizzare un'immagine diversa.
Ecco un frammento di codice di esempio per un'immagine che può essere modificata dagli utenti:
<img class="scs-editable" id="test-image" src="_scs_theme_root_/assets/img/downloads-bg-small.jpg"/>