1. Building Sites with Oracle Content Management
  2. Developing for Sites
  3. Develop Layouts
  4. Make Layout Content Editable

Make Layout Content Editable

You can configure certain text or image content in a layout to make it editable by users working with pages based on the layout.

This functionality can be used in any theme, including bootstrap themes. The modifications automatically assume the style of the original page.

You can add simple markup to the following HTML tags in the layout: <p>, <h1> through <h6>, <div> and <img>.

Text and image formatting options include:

  • Text: Allows users to specify Bold, Italic, Underscore, and Link.

  • Image: Allows users to specify a link to an image file. Change properties for title (what the user sees when hovering the cursor over an image) and add alternate text for accessibility.

Modifying a text or image element so it can be edited by users requires two things:

  1. Add scs-editable to the class.

  2. Add a unique id attribute.

Once a layout has been modified, the functionality will be available for all pages based on that layout (even new pages).

If you copy and paste a page, the modifications will be copied to the new page.

Modifying a Heading Tag

Here’s an example of how to modify a heading tag in a layout so it can be edited by users.

  1. Sync the layout file to your local desktop, or edit the HTML source file for the <h1> header.

  2. Add scs-editable to the class, and add the attribute id="test-heading" in the line of code for the heading, so it allows an editor to be attached to it. For example: 

    <h1 class="brand-heading scs-editable" id="test-heading">Sample Heading Value</h1>

  3. Save the file.

  4. Sync up with Oracle Content Management and reload the browser.

    A black border should appear around the heading when the user hovers the cursor over it, indicating that the content can be edited. When a user clicks the heading, the border becomes green, indicating the user can now edit the heading content.

  5. If the theme hasn’t been published, do so. If it has been published, the change will appear when you refresh your browser.

    Once the theme is published, site users can click the header and edit it in the Site Builder.

    A pseudo component is created for the scs-editable element so that you can change it in Site Builder and store it with the page data. At runtime, before the page is rendered, the controller replaces the scs-editable tags with the values you set in Site Builder.

Modifying an Image Tag

The procedure to modify an image tag in a layout so it can be edited by users is similar to that for text.

  1. Add scs-editable to the class.

  2. Add a unique image id.

Users can click the image, then change properties to use a different image.

Here’s sample code for an image that can be edited by users:

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