Inline is a technique for editing in a visual manor. Inline Editing allows you to select any editable element on the page and edit it in-place. As a result, the editor can be used to edit content that looks just like the final page. It is a total WYSIWYG experience, because not only the edited content looks like the final outcome, but also the page and the context where the content is placed is the real one.
• Inline - Allows users to edit content in a visual manor.
This example displays how I am able to view editable content in "Inline Mode".
These 3 examples display the different inline editing views depending on the template type.
✗ Drag and drop
Template has been built on the standard input and output model.
Highlights represent areas you can click to edit.
✓ Drag and drop
Template has been built on the drag and drop model based on componatizing elements.
Highlights represent both areas you can click to edit as well as areas that you can drag and drop.
These 3 examples display how text is able to be updated via Inline Mode.
This example displays the highlight area for inline.
This example displays the text editing with "no" WYSIWYG enabled.
This example displays the text editing with WYSIWYG enabled.
This example displays the text editing in form view with WYSIWYG enabled.
These examples display the WYSIWYG display difference between Minimal, Max, Inline and Form.
These 3 examples display how an image is able to be updated via Inline Mode.
This example displays how you can double click or select the config icon to update.
Once selected this example displays the modal window where you can select, upload and manage your content.
This example displays how you can drag direct from the panel into the component to update an image.
Before implementing a template into the CMS it is important to markup your template with the correct control outlines. This image displays how this template once implemented will only use 4 common controls ( Text, WYSIWYG, Selector Acquire Image, Selector Button ).