Editieren dynamischer Inhalte im ContentCreator

Der ContentCreator erkennt editierbare Inhalte anhand von Editor-Identifiern. Die Erweiterung dieser Inhalte um die Editierfunktionen (EasyEdit und InEdit) wird von FirstSpirit einmalig nach dem initialen Laden des HTML-Dokuments ausgeführt. Für Inhalte, die dynamisch nachgeladen werden, z.B. für Bildergalerien oder beim Continuous Scrolling, steht die Editierfunktion damit zunächst nicht zur Verfügung, auch wenn die entsprechenden Identifier in der Vorlage vorhanden sind.

Die ContentCreator-JavaScript-API (Objekt Preview) stellt Methoden zur Verfügung, um dynamische Inhalte zu erkennen und über ein erneutes, partielles Laden dieser Inhalte auch das Editieren nachgeladener HTML-Elemente zu ermöglichen. Ziel ist es, dynamisches HTML-Design im ContentCreator besser zu unterstützen.

Beispiele

ReloadListener - Auf Änderungen reagieren

Im folgenden Beispiel wird für eine Bildergalerie mit dynamischen Inhalten ein Event-Listener registriert, um Änderungen im HTML-Bereich aufzudecken. Mit addElementReloadListener() können ContentCreator-getriebene Änderungen des HTML-Bereichs beobachtet werden. Wenn der ContentCreator also Teile der Seite aufgrund von Änderungen neu lädt, werden die registrierten Listener benachrichtigt. Die geänderten Inhalte werden nachträglich mit einer Editierfunktionalität versehen.

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

Hinweis: Das Beispiel ist nicht vollständig. und muss für einen konkreten Anwendungsfall angepasst werden (siehe Kommentare).

Rescan - Neue Editor-Identifier erkennen

Die Methode rescan() durchsucht einen bestimmten HTML-Bereich auf neue Editor-Identifier. So können HTML-Bereiche, die beispielsweise durch Scrollen oder Anklicken nachgeladen werden, erkannt und mit einer Editierfunktionen versehen werden.

 $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 - Geänderte Teilbereiche der Seite erneut laden

Über reload() kann entweder die gesamte oder wahlweise ein bestimmter Teilbereich der HTML-Seite neu geladen werden. Im folgenden Beispiel wird diese Methode aufgerufen, nachdem ein Skript auf der Seite ausgeführt wurde (z. B. über einen Klick auf einen projektspezifischen Button im 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$