Editing dynamic content in ContentCreator

ContentCreator detects editable content on the basis of editor identifiers. The editing functions (EasyEdit and InEdit) are added to this content by means of a one-off operation, which FirstSpirit performs when the HTML document is first loaded. In the case of content that is loaded dynamically at a later point (e.g., image galleries or during continuous scrolling), what this means is that the editing function is not available initially even if the relevant identifiers have been included in the template.

The ContentCreator JavaScript API (Preview object) provides methods for identifying dynamic content and partially reloads this content so that subsequently loaded HTML elements can be edited too. The aim of this is to provide better support for designing dynamic HTML in ContentCreator.

Examples

ReloadListener – For responding to changes

In the example below, an event listener is registered for an image gallery with dynamic content so that changes within the HTML area can be detected. addElementReloadListener() can be used to monitor any changes within the HTML area that are driven by ContentCreator. Thus, the registered listeners are notified whenever ContentCreator reloads any parts of the page due to changes. As a result, editing functionality is added subsequently for the modified content.

$CMS_IF(#global.is("WEBEDIT"))$
      <script type="text/javascript">
                    top.WE_API.Preview.addElementReloadListener(function(element) {
                    // TODO: check if specified element contains our gallery container
                    // webedit preview has been reloaded partially
                    // => re-initialize event handling
                    initGallery(document.getElementById("galleryContainer"));
                    });
      </script>
$CMS_END_IF$

Note: This example is incomplete and must be adapted before it can be applied to a specific use case (see comments).

Rescan – For detecting new editor identifiers

The rescan() method searches a specific HTML area for new editor identifiers. In this way, it is possible to detect HTML areas that are loaded subsequently (e.g., as a result of scrolling or clicking) and to provide them with an editing function.

 $CMS_IF(#global.is("WEBEDIT"))$
      <script type="text/javascript">
              galleryModel.addLoadListener(function() {
              // our dynamic gallery has changed it's content.
              // => let webedit rescan this element to support inline editing of it's content.
              top.WE_API.Preview.rescan(document.getElementById("galleryContainer"));
              });
     </script>
$CMS_END_IF$

Reload – For reloading modified subareas of the page

reload() can be used to reload either the entire HTML page or just a certain subarea. In the example below, this method is called once a script has been executed on the page (e.g., by clicking a project-specific button in ContentCreator).

$CMS_IF(#global.is("WEBEDIT"))$
     <script type="text/javascript">
             (function(){
                  var button = document.getElementById("editPageButton");
                  button.onclick = function() {
                       top.WE_API.Common.execute("script:editContent", {id: 12345}, function(result) {
                           if (result) {
                                  // user has modified the content
                                  // => trigger partial reload of the related container element
                                  var container = document.getElementById("pageContainer");
                                  top.WE_API.Preview.reload(container);
                           }
                       });
                  };
             }());
     </script>
$CMS_END_IF$