U kunt bepaalde tekst- of afbeeldingsinhoud in een lay-out configureren om deze bewerkbaar te maken voor gebruikers die met pagina's werken die zijn gebaseerd op de lay-out.
Deze functionaliteit kan in elk thema worden gebruikt, inclusief Bootstrap-thema's. De wijzigingen nemen automatisch de stijl van de oorspronkelijke pagina over.
U kunt eenvoudige markup toevoegen aan de volgende HTML-tags in de lay-out: <p>, <h1> tot en met <h6>, <div> en <img>.
Opmaakopties voor teksten en afbeeldingen zijn onder meer:
Tekst: hiermee kunnen gebruikers 'Vet', 'Cursief', 'Onderstrepen' en 'Koppeling' opgeven.
Afbeelding: hiermee kunnen gebruikers een koppeling naar een afbeeldingsbestand opgeven. Wijzig eigenschappen voor de titel (wat de gebruiker ziet wanneer hij/zij de cursor over een afbeelding beweegt) en voeg alternatieve tekst toe voor toegankelijkheid.
Voor het wijzigen van een tekst- of afbeeldingselement zodat het kan worden bewerkt door gebruikers zijn twee dingen vereist:
Voeg scs-editable aan de class toe.
Voeg een uniek id-attribuut toe.
Zodra een lay-out is gewijzigd, is de functionaliteit beschikbaar voor alle pagina's die zijn gebaseerd op die lay-out (zelfs nieuwe pagina's).
Als u een pagina kopieert en plakt, worden de wijzigingen naar de nieuwe pagina gekopieerd.
Een koptag wijzigen
Synchroniseer het lay-outbestand met uw lokale desktop of bewerk het HTML-bronbestand voor de koptekst <h1>.
Voeg scs-editable toe aan de class en voeg het attribuut id="test-heading" toe in de regel met code voor de kop, zodat er een editor aan kan worden gekoppeld. Bijvoorbeeld:
<h1 class="brand-heading scs-editable" id="test-heading">Sample Heading Value</h1>
Sla het bestand op.
Synchroniseer met Oracle Content Management en laad de browser opnieuw.
Rond de kop moet een zwarte rand worden weergegeven wanneer de gebruiker de muis erover beweegt, wat aangeeft dat de inhoud kan worden bewerkt. Wanneer een gebruiker op de kop klikt, wordt de rand groen, wat aangeeft dat de gebruiker de inhoud van de kop nu kan bewerken.
Als het thema nog niet is gepubliceerd, doet u dit. Als het thema is gepubliceerd, wordt de wijziging weergegeven wanneer u de browser vernieuwt.
Zodra het thema is gepubliceerd, kunnen sitegebruikers op de koptekst klikken en deze bewerken in de sitebuilder.
Er wordt een pseudocomponent gemaakt voor het element scs-editable zodat u deze kunt wijzigen in de sitebuilder en kunt opslaan met de paginagegevens. Tijdens runtime, voordat de pagina wordt weergegeven, vervangt de controller de tags 'scs-editable' door de waarden die u instelt in de sitebuilder.
Een afbeeldingstag wijzigen
De procedure voor het wijzigen van een afbeeldingstag in een lay-out zodat deze door gebruikers kan worden bewerkt, lijkt op de procedure voor tekst.
Voeg scs-editable aan de class toe.
Voeg een unieke afbeeldings-id toe.
Gebruikers kunnen op de afbeelding klikken en vervolgens eigenschappen wijzigen om een andere afbeelding te gebruiken.
Hier volgt een voorbeeldcode voor een afbeelding die door gebruikers kan worden bewerkt:
<img class="scs-editable" id="test-image" src="_scs_theme_root_/assets/img/downloads-bg-small.jpg"/>