The only way content can be edited within XperienCentral is inline. The inline editing functionality in XperienCentral features an advanced rich text or WYSIWYG editor which runs in the browser using standard web technologies like JavaScript and CSS. For the editor to really experience WYSIWIG, a number of guidelines must be met with respect to the frontend HTML/JavaScript and CSS so that the inline editors can do their work.
In This Topic
Doctype
GX advises that all HTML runs in HTML 5 standards mode. This is most important for Internet Explorer which by default doesn't run in standards mode. To engage standards mode on Internet Explorer, pages need to start with the <!DOCTYPE html> doctype. Firefox and Google Chrome run in standards mode by default.
Displaying Text
The following rules should be followed for displaying text:
- Multiple spaces should show more whitespace and not collapse into one blank space.
Empty
<p>tags should display a blank line and not collapse, for example if an editor hits [Enter] three times in order to add 3 blank lines or they want to be able to place the cursor on a particular blank line. For example:P { min-height: 1em; }- The CSS property
floatspecifies that an element should be taken from its normal flow and placed, for example, to the left or right side of its container, whereby text and inline elements will wrap around it. A floating element is one with the computed value of float is not “none”. <p>tags are inserted automatically as soon as a paragraph exceeds the length of a line or becomes more complex than a simple line of text. To prevent this from having a visual effect, text within<p>tags should have a similar style as the text directly placed in the content area.
Floating HTML Elements
A common problem with float-based layouts is that the float’s container doesn't want to stretch downward to accommodate the floats. If, for example, you want to add a border around all floats (that is, a border around the container), you have to somehow force the browser to stretch the container up all the way. This also applies for the page flow of a content item: in order to ensure that the next content item element is rendered properly and will not be positioned within the block flow of the previous content item element, the floating must be cleared to make it possible to stretch the element container <div> to its full content and draw the container borders correctly. In order to accomplish this, add the following HTML after each logical content element:
<div class="clearall"></div>
And style it as follows:
.clearall {
clear:
both;
}
Proper Use of Inline Block
In order to follow the guidelines for a responsive design, pay particular attention to the use of a floating <div>. In the Editor, a floating <div> should only be used for controlling the layout of images and other content that needs to be lined up with rich text. In order to create a responsive page structure, use the inline-block; tag. For example:
.box2 {
display:
inline-block;
width: 200px;
height:
100px;
margin: 1em;
}
<div class="box2"> This is an inline block. </div>
Adding Extra HTML in Inline Mode
When the HTML is being generated by XperienCentral, it must be possible for the CMS to detect which parts that make up a page are so-called content areas that must be represented as inline content editable. In order to make this possible, you should have a container HTML tag (typically a <div>) marking a content area within a page. Assume the following <div> is such a container:
<div class="SomeContainerClass"> <!-- content area html --> </div>
or
<div class="SomeContainerClass rte_container"> <!-- content area html --> </div>
Be sure to take into account that this will be added and should not render a visual effect, therefore do not style the used classes. Furthermore, this may also affect child selection within jQuery since an extra <div> is inserted within an expected <div> hierarchy.
Also note that the following:
<div class="SomeContainerClass">Lorum ipsum</div>
and
<div class="SomeContainerClass"><p>Lorum ipsum</p></div>
should have CSS that makes them look identical from a functional perspective.
Non Visible Content
Not all content contained within HTML is always visible to the visitor all the time, which is typically a functionally desirable effect such as:
- Carousels that rotate through multiple images or other content.
- Text that is only visible in the morning and other text that is only visible in the afternoon.
These non-visible elements present a challenge within inline editing. The principle within inline editing is plain and simple: If you cannot see it, it cannot be edited. Whenever the visibility of content is determined by the HTML/JSS/CSS and thus not by the Editor, you as frontend developer are required to facilitate showing all (sometimes invisible) content within the inline mode as described below. This alternative behavior must be activated only when the rte_container class is set on the surrounding <div> or other surrounding HTML container element.
For example:
<div class="SomeContainerClass">
<!-- the generated HTML (after all DOM manipulations) content area html -->
<div class="carroussel">
<div class="item" style="display:none">
<img href="a.jpg" />
</div>
<div class=”item” style="display">
<img href="b.jpg" />
</div>
<div class=”item” style="display:none">
<img href="c.jpg" />
</div>
</div>
</div>
<div class="clearall"></div>
As soon as the editor begins editing a specific content area, the rte_container class is set and as a result, the following HTML is expected:
<div class="SomeContainerClass rte_container">
<!-- the generated HTML (after all DOM manipulations) content area html -->
<div class="carroussel">
<div class="item" style="">
<img href="a.jpg" />
</div>
<div class="item" style="">
<img href="b.jpg" />
</div>
<div class="item" style="">
<img href="c.jpg" />
</div>
</div>
</div>
<div class="clearall"></div>
Whichever item that is displayed will be controlled from within a JavaScript library and therefore it must be able to anticipate the normal and inline-editable behavior. A brief example:
<script type="text/javascript">
$(document).ready(function() {
if ($('div.rte_container div.someContainerClass).length == 0) {
// Initialize carrousel
$.fn.carrousel({
time : 4,
speed : 500
});
}
});
</script>
Ideally, the inline-editable HTML representation should fit within the indented look-and-feel of the site but this is less important than the notion of making all content visible. GX Software advises that you provide 2 sets of HTML for each piece of design that is affected by this behavior, one with and one without the rte_container class in it. This way, the dual sets of behavior can be validated.
Default Provided HTML
In addition to its element-based nature of generating HTML, the XperienCentral Editor also generates the following HTML which needs to be styled to match the required design:
<p>p tag</p> <p> <strong>bold</strong> </p> <p> <em>italic</em> </p> <p> <ins>underline</ins> </p> <p> <del>strike through</del> </p> <blockquote>quote</blockquote> <h1>H1</h1> <h2>H2</h2> <h3>H3</h3> <h4>H4</h4> <h5>H5</h5> <h6>H6</h6> <p> <a href="#" class="" title="#">link</a> </p> <ul> <li>ul</li> </ul> <ol> <li>ol</li> </ol>
Set a Reasonable Position and Height on Containers
Be sure that a container-type <div> that is to be filled with elements as defined in Content Management - Content Elements should have a reasonable initial height when the container <div> has the rte_container class set on it. The rationale is that such a container <div> will be populated with elements by the editor through the use of drag-and-drop. This is much easier when the height is near to what it needs to be when it is populated. If you only set it based on the existence of the rte_container class, it doesn’t need to have a height when it is empty and/or not in edit mode.
In a situation where a container <div> is positioned on top of another, make sure that the position is altered when the rte_container class is found on a surrounding container <div> or another HTML element. The position should then be altered in such a way that the editor can clearly distinguish one area from another.
Rearranging HTML
Whenever the HTML is rearranged or reorganized on the client side, be sure that the position where the HTML is moved to is placed within the same first container <div> in the hierarchy. An example of this is if you want to rearrange responsive content items into columns. The reason for this is that the Editor expects the content to be within the original area and for it to be editable there. As a result, the following:
<div> <div class=”rewrite-html”>…</div> </div>
could end up like this:
<div> <div class=”rewrite-html” style=”display: none”>…</div> <div class=”rewritten”>…</div> </div>
The following structure is not allowed:
<div> <div class=”rewrite-html” style=”display: none”>…</div> </div> <div class=”rewritten”>…</div>
Absolute positioning may be used to place the content outside of its original position. This absolute positioning will not hamper the editors in enabling the editing of the content since the inline selection area is stretched automatically while editing.
Linking Away while Editing
The Editor’s default behavior disables all links in editable content by traversing the DOM tree looking for an <a> within the editable part of the source. Make sure that if the rte_container class is set on the surrounding container and it is being edited that custom logic does not try to link away from the edited content. Doing so may result in a confusing situation for an editor. This can occur, for example, in a Flash object that links elsewhere.
Editable Elements
Whenever an element is editable in the Editor, XperienCentral adds a <div> tag around it that adds attributes needed for editing purposes. When the HTML for an element already has a <div> as a container attribute, that <div> will be used instead. If no <div> is found, one may be added around the element. Be aware of these extra <div> tags in order to ensure that they do not break the styling of the HTML.