Как сделать контент макета редактируемым

Определенный текст или контент изображения в макете можно настроить так, чтобы пользователи могли редактировать его, работая со страницами на основе данного макета.

Эту функциональную возможность можно использовать в любой теме, включая темы Bootstrap. Изменения автоматически учитывают стиль исходной страницы.

К следующим HTML-тегам в макете можно добавить простую разметку: <p>, с <h1> по <h6>, <div> и <img>.

Варианты форматирования текста и изображений:

  • Text: позволяет пользователям задавать значения Bold (Полужирный шрифт), Italic (Курсив), Underscore (Подчеркивание) и Link (Ссылка).

  • Image: позволяет пользователям указать ссылку на файл изображения. Измените свойства заголовка (то, что видит пользователь при наведении курсора на изображение) и добавьте альтернативный текст для обеспечения доступности.

Изменение элемента текста или изображения, позволяющее его редактировать другими пользователями, требует двух действий:

  1. Добавьте scs-editable в class.

  2. Добавьте уникальный атрибут id.

После изменения макета данная функциональная возможность будет доступна для всех страниц на основе этого макета (даже для новых страниц).

При копировании и вставке страницы изменения копируются на новую страницу.

Изменение тега заголовка

Ниже приведен пример изменения тега заголовка в макете, позволяющего его редактировать другими пользователями.
  1. Синхронизируйте файл макета с локальным настольным ПК или измените исходный HTML-файл для заголовка <h1>.

  2. Добавьте scs-editable к class, а атрибут id="test-heading" в строку кода заголовка, чтобы к нему можно было прикрепить редактор. Пример:

    <h1 class="brand-heading scs-editable" id="test-heading">Sample Heading Value</h1>
  3. Сохраните файл.

  4. Выполните синхронизацию с Oracle Content Management и перезагрузите браузер.

    Когда пользователь наводит курсор на заголовок, вокруг этого заголовка должна появиться черная рамка, указывающая на то, что контент доступен для редактирования. Когда пользователь нажимает на заголовок, рамка становится зеленой, указывая на то, что теперь пользователь может редактировать контент заголовка.

  5. Если тема не опубликована, сделайте это. Если она опубликована, то изменение появится при обновлении браузера.

    После публикации темы пользователи сайта могут нажать заголовок и изменить его в Site Builder.

    Для элемента scs-editable создается псевдокомпонент, чтобы его можно было изменить в Site Builder и сохранить вместе с данными страницы. Во время выполнения перед рендерингом страницы контроллер заменяет теги с атрибутом scs-editable значениями, заданными в Site Builder.

Изменение тега изображения

Процедура изменения тега image в макете, позволяющая его редактировать другим пользователям, аналогична процедуре для тега text.

  1. Добавьте scs-editable в class.

  2. Добавьте уникальный идентификатор id изображения.

Пользователь может нажать изображение, а затем изменить свойства, чтобы использовать другое изображение.

Ниже приведен пример кода для изображения, которое может редактироваться пользователями:

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