Overview

InContext Editing will be replaced with a newly designed experience that is focused on preserving the design integrity of the site and is compatible with additional browsers and devices.

How to use the new editing experience

Enabling the feature

Enabling this feature under Site Settings > Beta Features > Content management > Upgraded Content Editor will replace the 'Content' tab from the main navigation ribbon (which links to the existing InContext Editing feature) with an 'Edit' tab that links to the new Editor.

Defining editable content

In the Edit Page in Admin, or using the File Manager, you can mark elements from the page's content to be Editable Regions by using a custom attribute on those elements:

<div ice:editable="editable region type">
     SBO editable content here
</div>

List of ice:editable values:

line

• single line text; all formatting and break lines are ignored
• can applied only to: p, h1, h2, h3, h4, h5, h6, pre, address, blockquote, div

multiline

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

image

• change and resize image; image is server side resized using dimensions defined on the img tag
• can be applied only 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".

  <meta name="upload-root-folder" content="/images" />

link

• change link; can insert internal (site) or external links
• can be applied only to: "a" tag

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:

    <div ice:editable="html" ice:options="bold,italic,deleted,|,link">

• can be applied only to: div, td and th tags
• images inside html Editable Regions can be edited by clicking on them, which will bring up the image Editor.

section

• allows duplication and deletion of an html element
• can be applied only to the following HTML tags: tr
• 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.

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:

  {module_contentholder,name="Name of Content Holder" ice:editable="content"}

Restrictions on Editable Regions

To assist partners provide a seamless editing experience and prevent users from breaking layouts, we restrict the html tags an Editable Regions can be applied as well as 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:

<link />
<meta />
<area />
<br />
<col />
<hr />
<input />
<param />

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

b, big, i, small, tt
abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
a, bdo, img, map, object, q, script, span, sub, sup
button, input, label, select, textarea

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

<form>
<fieldset>
<legend>
<textarea>
<select>

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:

iframe, script, map, area, object, embed, video, audio

Using the in-context Editor

Once the Partner has defined the Editable Regions, the SBO can access the Editor to edit the content, by clicking the Edit Tab.

Clicking on the Edit button will open the Editor, displaying the Start Page of the default domain of the site.

To reach other pages, SBOs can click on the various links from a page.
If the link is outside of any Editable Region, simply clicking on the link will navigate to the corresponding page.
If the link is inside an Editable Region, hovering over the link will display a green arrow that indicates clicking on the link is active.

If the link is marked as editable itself, hovering over it will display a context-menu which can be clicked to follow the link.

Only Pages will be loaded in the Editor, other type of content, which is dynamic (blogs, web apps) cannot be open in the Editor.
Only the content of the Page is loaded in the Editor. If the page has a Template set, this will not show up in the Editor. Styles and Javascript defined within the page will be loaded; styles and Javascript defined in the Template will not load.

If 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."

If trying to navigate to a link that is not of Page type (it's a blog, web app etc.), an error message will be displayed: 'That page doesn't exist, or is of a type not supported for editing.".

Publishing the Page will save the live version of the page.

If the site uses device-specific folders (Settings > Mobile Support), the dropdown from the top bar can be used to access the various device-specific verisions of the current page.

Current limitations

• Draft versions of the pages are not supported

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 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

Note that 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.