Czynienie zawartości układu edytowalną

Niektórą występującą w układzie zawartość graficzną lub tekstową można uczynić edytowalną dla użytkowników pracujących ze stronami opartymi na danym układzie.

Funkcji tej można użyć w dowolnym motywie, w tym w motywach Bootstrap. Modyfikacje automatycznie przyjmą styl oryginalnej strony.

Można dodać prosty kod znacznikowy do następujących znaczników używanych w układzie: <p>, <h1> do <h6>, <div> i <img>.

Opcje formatowania tekstu i obrazów obejmują:

  • Tekst: użytkownicy mogą wprowadzać pogrubienie, kursywę i podkreślenie oraz powiązanie łączem.

  • Obraz: użytkownicy mogą określać łącza prowadzące do obrazów. Mogą też zmieniać właściwości tytułu (wyświetlanego, gdy na obrazie zostanie umieszczony wskaźnik myszy) oraz dodawać tekst alternatywny w celu ułatwienia dostępu.

Modyfikując element typu tekst lub obraz, tak aby użytkownicy mogli go edytować, należy:

  1. Dodać do atrybutu class właściwość scs-editable.

  2. Dodać unikatowy atrybut id.

Gdy tylko układ zostanie zmodyfikowany, nowa funkcjonalność będzie dostępna dla wszystkich stron opartych na tym układzie (także dla nowych stron).

Jeśli strona zostanie skopiowana i wklejona, to modyfikacje zostaną wklejone na nowej stronie.

Modyfikowanie znacznika nagłówka

Poniżej jest zamieszczony przykład, jak zmodyfikować występujący w układzie znacznik nagłówka, tak aby nagłówek ten mógł być edytowany przez użytkowników.
  1. Zsynchronizować plik układu z komputerem lokalnym albo edytować źródłowy plik HTML w celu zmodyfikowania nagłówka <h1>.

  2. Dodać do atrybutu class właściwość scs-editable oraz dodać w linii kodu nagłówka atrybut id="test-heading", tak aby można było dołączyć edytor. Na przykład:

    <h1 class="brand-heading scs-editable" id="test-heading">Sample Heading Value</h1>
  3. Zapisać plik.

  4. Przeprowadzić synchronizację z Oracle Content Management, po czym ponownie załadować przeglądarkę.

    Gdy użytkownik umieści wskaźnik myszy na nagłówku, powinna się pojawić czarna ramka otaczająca nagłówek — w ten sposób jest sygnalizowane, że można go edytować. Gdy użytkownik kliknie na nagłówku, ramka zmieni kolor na zielony, sygnalizując że użytkownik może teraz edytować zawartość nagłówka.

  5. Opublikować motyw, jeśli jeszcze nie zostało to zrobione. Jeśli motyw został opublikowany, zmiana będzie widoczna, gdy użytkownik odświeży zawartość w przeglądarce.

    Gdy motyw zostanie opublikowany, użytkownicy serwisu mogą klikać na nagłówku i edytować go w konstruktorze serwisów.

    Dla elementu scs-editable jest tworzony pseudoelement, dzięki czemu można go zmieniać w konstruktorze serwisów i przechowywać wraz z danymi strony. W trybie wykonawczym, zanim strona będzie renderowana, kontroler zastąpi znaczniki "scs-editable" wartościami określonymi w konstruktorze serwisów.

Modyfikowanie znacznika obrazu

Procedura modyfikowania znacznika obrazu, używanego w układzie, tak aby obraz ten mógł być edytowany przez użytkowników, jest podobna do procedury modyfikowania znacznika nagłówka.

  1. Dodać do atrybutu class właściwość scs-editable.

  2. Dodać unikatowy id obrazu.

Użytkownicy mogą klikać na obrazie, a następnie zmieniać jego właściwości, tak aby był używany inny obraz.

Przykładowy kod, umożliwiający edycję obrazu przez użytkowników:

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