Configuring a site to use InContext Editing

Updated on 20-October-2016 at 10:16 AM

Business Catalyst End of life announcement - find out more details.

In this article, you will learn how to insert InContext Editing Editable Regions to your Business Catalyst pages, to have control over which areas of the page are editable. You can use any code editor of your choice to insert the Editable Regions. For the purpose of this article, we will be using the Business Catalyst Develop mode.

The InContext Editing Editable Regions define which parts of the page content will become editable, once the page is live in browser. There is no option currently to block a page region from editing. To do this, you define which parts of the page are editable, and the others are automatically non-editable.

If a user opens the InContext Editor and the page does not have any Editable Regions defined, an error message will be displayed: "This page does not contain any content marked as editable."

The ice:editable attribute defines a section of the page (an HTML tag) that becomes editable in a web browser. For example:

See below sections or more details on values and restrictions:

Creating editable regions

To create editable regions, open the code editor of your choice. Follow the below steps to create editable regions using the Business Catalyst Develop mode.

  1. Log in to the admin of your site and select the Develop tab.

  2. Open the page or template you would like to add an editable section to by double-clicking a page from the tree view on the left panel.

  3. Add the below code to one of your HTML tags such as a <div>:

    Example:

  4. Save the layout or page by clicking Publish.

You can test the implementation by opening the InContext Editor and navigating to the editable region to see if this can now be updated in the browser.

Creating Repeating Regions

A repeating region is a table row that can be duplicated, moved or deleted by a InContext Editor user. The elements within these regions can also be made editable. Repeating regions are set by using the section  region type.

 

Follow the below steps to create a repeating region:

  1. Create or locate a HTML table on your site.

  2. Add the below code to all table rows ('tr') tags that you would like to set as a repeating region:

    ice:editable="section" 
    Example:

  3. To make an element within a repeating region editable, simply apply the relevant ice:editable and region type to the element within the section. Example:

    The repeating regions section will now have an edit option as below:

     

Editable Region Types

There are a number of region types that can be set with the ice:editable attribute.

line

  • Single-line text; all formatting and break lines are ignored
  • Can only be applied to: p, a, h1, h2, h3, h4, h5, h6, pre, address, blockquote, div

line.png

multiline

  • Multiline text; break lines are allowed, all formatting is ignored
  • Can only be applied to: p, h1, h2, h3, h4, h5, h6, pre, address, blockquote, div

multiline.png

image

  • Change and resize image; image is server side resized using dimensions defined on the img tag
  • Can only be applied to: img tag
  • Default folder for uploading new images can be defined in a tag of the page. For example adding this meta tag below to your page or template will pre-select the "/images" folder whenever you select "From My Computer".
  • Change link; can insert internal or external links
  • Can only be applied to: "a" tag

link.png

html

  • HTML text; some formatting is allowed;
  • Partners can specify the formatting elements made available to business owners by adding the ice:options attribute on that tag. You can list the Editor options in the ice:options attribute, comma separated. Separators (for option groups) can be specified using the pipe character "|". 
    • Options allowed: bold, italic, deleted, separator (|), fontcolor, link, image, unorderedlist, orderedlist, outdent, indent, alignment, alignleft, alignright, aligncenter, justify
    • Example:
  • Can only be applied to: div, td and th tags
  • Images inside HTML editable regions can be edited by clicking the image, which will bring up the image Editor.

html.png

Option What is does
bold bold button will be available in the editor
italic italic button will be available in the editor
deleted Places a strike through the text
fontcolor font color
link Option to create a hyperlink
image Image manager options to insert image
ordered_list, unordered_list numbered/bulleted lists
indent,outdent indent/outdent options
alignjustify, alignright, 
aligncenter, alignleft
align options (left/right/center/justify)

section

  • Allows duplication and deletion of an HTML element
  • Can only be applied to the following HTML tags: tr, div
  • Other Editable Region types cannot be applied to the same HTML element.
  • Can contain any other Editable Regions types, except other sections
  • The "Duplicate" action inserts a copy of the section element, right after the section element
  • The "Delete" action removes the section element and its contents from the document.

section.png

content

  • Applied to Content Holder modules, it allows for transparent, in-page editing of Content Holders
  • The content of the Content Holder itself must be marked with ice:editable attributes from above, to define what is editable within the Content Holder
  • The Content Holder must be referenced by its name, not by its id. If you reference it by its id, saving will not work
  • The Content Holder cannot contain another Content Holder
  • Example:

Restrictions on Editable Regions

To assist partners in providing a seamless editing experience and prevent users from breaking layouts, there are restrictions on the html tags an Editable Regions can be applied to. There is also restriction on what HTML mark-up is allowed inside an Editable Region.

Editable Regions (of any kind) cannot be applied to any of the following self-closing tags:

Also, Editable Regions cannot be applied to any of the following inline level tags:

Additionally, Editable Regions cannot be applied to any FORM-related elements:

Other restrictions

  • Editable Regions cannot be nested
  • Editable Regions cannot be applied to elements containing Liquid mark-up. Liquid mark-up will be overwritten by its generated HTML if the mark-up is inside an Editable Region.

The following tags are not allowed inside an Editable Region:

Backwards compatibility with markup for InContext Editing

The new Editor supports some limited backwards compatibility with the markup used for InContext Editing.

The ice:editable="*" and ice:editable="<options here>" used in InContext Editing are backwards compatible with the new Editor.

The complete list of options for InContext Editing Editable Regions are:

Note this usage is now deprecated, if using the new Editor. The following options: paragraph_styles, css_styles, and media do not have a correspondent with the new Editor and will be ignored.

Repeating groups and repeating regions used in InContext Editing are also compatible with the new Editor.