Defining InContext Editing editable regions using any code editor

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. To insert the Editable Regions you can use any code editor you want.

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 will just have to define which parts of the page are editable, and the others will automatically become non-editable.

By default, when no region has been defined, there's an algorithm that tries to decide which areas of the page are editable, based on the page layout and page elements.

Defining editable regions

The "ice:editable" attribute defines a section of the page (a tag) that becomes editable in a web browser when the user successfully logs in the Admin section of the page. Only some tags can be transformed into Editable Regions - div, td and th.

<div ice:editable="*">
		
	<h1>This is my selection</h1>
</div>

In order to create an Editable Region, just open the page with any code editor and add ice:editable="*" to the divs that you want to be editable. Please remember that this attribute will work only if you add it to divs, tds and ths. Adding it to another tag won't allow you to edit the content of the tag, once you're in browser. Below is a screenshot that shows you what happens in browser:


Controlling the options available in the editor, when editing the live page in a browser

The value of the "ice:editable" attribute defines the behavior of this editable region. For example, in case you use ice:editable="*" - all available styling options (bold, italic, underline, etc.), link and media management options will be available for that page region.

If you want only specific options to be enabled for a certain region in the page, you can add them as a comma-separated list, as value for the ice:editable attribute. The available set of options that can be specified is: "bold", "italic", "underline", "align_justify", "align_right", "align_center", "align_left", "font_face", "font_size", "indent", "outdent", "ordered_list", "unordered_list", "paragraph_styles", "background_color", "font_color", "css_styles", "media", "hyperlink".

 

<div ice:editable="bold,italic,underline,align_justify,align_right,align_center,align_left,font_face,font_size,indent,outdent,ordered_list,unordered_list,paragraph_styles,background_color,font_color,css_styles,media,hyperlink">
<h1>This is my selection</h1>

Each formatting option will be available in the editor if it's present in this list. Below is a table that shows what each option does:

Option What is does
bold bold button will be available in the editor
italic italic button will be available in the editor
underline underline button will be available in the editor
align_justify, align_right,
align_center, align_left
align options (left/right/center/justify)
font_face font formatting - the user will be able to apply a font from a pre-defined list of fonts
font_size font size formatting
indent,outdent indent/outdent options
ordered_list, unordered_list numbered/bulleted lists
paragraph_styles paragraph and headings formatting - the ability to transform text into paragraphs or headings
background_color background color
font_color font color
css_styles formatting using CSS styles - a list of CSS styles defined in the page will be available in the
editor, allowing the user to style the text using them
media insert images
hyperlink insert links

To disable a certain option from the editor, just make sure it's not in the list of values. This will disable that formatting option for this Editable Region only.

Adding more editable regions

In a similar manner, you can add more Editable Regions to the page, enabling only specific parts of the page for editing. Also, you can use the same approach if you want to add InContext Editing Editable Regions to template pages, if you want to give your users the ability to edit the template content also.

Considerations to remember:

  • If you add Editable Regions to the templates, when the users will make some changes to the template, they will be applied to all pages that use that specific template.
  • If you don't want that users to make changes to any template, you can just remove the Edit Template role from the Admin interface