레이아웃에 특정 텍스트 또는 이미지 콘텐츠를 구성하여 사용자가 레이아웃에 기반한 페이지 작업을 수행할 때 편집 가능하게 만들 수 있습니다.
이 기능은 Bootstrap 테마를 포함한 모든 테마에서 사용할 수 있습니다. 수정사항은 자동으로 원래 페이지의 스타일로 간주됩니다.
레이아웃의 HTML 태그 <p>, <h1> ~ <h6>, <div> 및 <img>에 간단한 마크업을 추가할 수 있습니다.
텍스트 및 이미지 형식 지정 옵션은 다음과 같습니다.
텍스트: 사용자가 굵은체, 기울임꼴, 밑줄 및 링크를 지정하도록 허용합니다.
이미지: 사용자가 이미지 파일에 링크를 지정하도록 허용합니다. 제목의 속성(사용자가 이미지 위로 커서를 가져갈 때 표시되는 내용)을 변경하고 접근성을 위해 대체 텍스트를 추가합니다.
텍스트 또는 이미지 요소를 사용자가 편집할 수 있도록 수정하려면 다음 두 가지 작업이 필요합니다.
scs-editable을 class에 추가합니다.
고유 id 속성을 추가합니다.
레이아웃이 수정된 후에는 해당 레이아웃에 기반한 모든 페이지(새 페이지도)에서 기능을 사용할 수 있습니다.
페이지를 복사하여 붙여넣으면 수정사항이 새 페이지로 복사됩니다.
제목 태그 수정
레이아웃 파일을 로컬 데스크톱과 동기화하거나 HTML 소스 파일에서 <h1> 헤더를 편집합니다.
scs-editable을 class에 추가하고 제목 코드 행에 id="test-heading" 속성을 추가하여 편집기에 첨부되도록 합니다. 예를 들어, 다음과 같습니다.
<h1 class="brand-heading scs-editable" id="test-heading">Sample Heading Value</h1>
파일을 저장합니다.
Oracle Content Management와 동기화하고 브라우저를 다시 로드합니다.
사용자가 제목 위로 커서를 가져갈 때 콘텐츠를 편집할 수 있음을 나타내는 검정 테두리가 제목 주위에 나타나야 합니다. 사용자가 제목을 누르면 테두리가 녹색이 되어 지금 사용자가 제목 콘텐츠를 편집할 수 있음을 나타냅니다.
테마가 게시되지 않은 경우 게시합니다. 게시된 경우 브라우저를 새로고침할 때 변경사항이 나타납니다.
테마가 게시된 후에는 사이트 사용자가 헤더를 누르고 사이트 작성기에서 편집할 수 있습니다.
scs-editable 요소에 대한 의사 구성요소가 생성되어 사이트 작성기에서 변경하고 페이지 데이터로 저장할 수 있습니다. 런타임에 페이지를 렌더링하기 전에 컨트롤러가 scs-editable 태그를 사이트 작성기에서 설정한 값으로 바꿉니다.
이미지 태그 수정
사용자가 편집할 수 있도록 레이아웃의 이미지 태그를 수정하는 절차는 텍스트 사례와 비슷합니다.
scs-editable을 class에 추가합니다.
고유 이미지 id를 추가합니다.
사용자는 이미지를 누르고 다른 이미지를 사용하도록 속성을 변경합니다.
다음은 사용자가 편집할 수 있는 이미지의 샘플 코드입니다.
<img class="scs-editable" id="test-image" src="_scs_theme_root_/assets/img/downloads-bg-small.jpg"/>