Startseite / Vorlagenentwicklung / WebEdit / Easy-Edit / InplaceIncludeJS

WEBeditInplaceIncludeJS

Die Render-Formatvorlage WEBeditInplaceIncludeJS stellt

die Stylesheets, in denen die Easy-Edit-Icons zur Bearbeitung von Inhalten in der Vorschauseite enthalten sind,
die Beschriftung der Icons (mittels Tooltips) und
die JavaScript-Funktionen, die für Animations- und Überblendeffekte beim Überfahren von Easy-Edit-Bereichen mit der Maus sowie beim Schließen von Bearbeitungsfenstern verantwortlich sind,

zur Verfügung.

WEBeditInplaceIncludeJS muss in allen Seitenvorlagen, in denen Easy-Edit verwendet werden soll, zwischen dem öffnenden und dem schließenden HTML-Tag "head" mit $CMS_RENDER(...)$ eingefügt werden:

...
<html>
  <head>
    <title>Seitenvorlage</title>
    $CMS_RENDER(template:"WEBeditInplaceIncludeJS")$
  </head>
  <body>
...

Easy-Edit-Icons

Die Easy-Edit-Icons gehören wie die Easy-Edit-Formatvorlagen zum Lieferumfang von FirstSpirit. Sie befinden sich in der Medien-Verwaltung im Ordner „WebClient Medien (EasyEdit)“ (Referenzname "WEBeditInplace").

Die unten stehende Tabelle stellt die Funktionen der Icons den Referenznamen der Icons in der Medien-Verwaltung gegenüber.

Eventuelle Änderungen an diesen Medien werden bei einer Aktualisierung wieder rückgängig gemacht.

Hinweise zur Aktualisierung von Easy-Edit-Formatvorlagen

In den Projekteigenschaften, Menü-Punkt "Webedit-Einstellungen", können über die Checkbox "Webedit benutzen" die WebEdit-Formatvorlagen aus dem Projekt entfernt und anschließend wieder hinzugefügt werden. Dabei werden ebenfalls die Easy-Edit-Formatvorlagen sowie die Easy-Edit-Icons entfernt bzw. wieder eingefügt.

In Freigabeprojekten erfolgt vor dem Entfernen der WebEdit-Formatvorlagen (Deaktivieren der Checkbox "Webedit benutzen") die Sicherheitsabfrage "ACHTUNG: Das Entfernen der WebEdit-Formatvorlagen führt dazu, dass der übergeordnete Ordner von "WebClient Medien (EasyEdit)" freigegeben wird. Sind Sie damit einverstanden?" ausgegeben. Mit "Ja" werden die Formatvorlagen entfernt und der Wurzelknoten der Medien-Verwaltung freigegeben. Wird "Nein" gewählt, werden die Formatvorlagen nicht entfernt.

Wurden Easy-Edit-Icons und/oder der Ordner "WebClient Medien (EasyEdit)" manuell aus einem Freigabeprojekt entfernt und sollen diese durch Aktivieren der Checkbox "Webedit benutzen" dem Projekt wieder hinzugefügt werden, muss zuvor der Wurzelknoten der Medien-Verwaltung freigegeben werden. Erst dann können die Easy-Edit-Icons wieder mit dem ursprünglichen Referenznamen im Projekt angelegt werden, so dass die korrekte Funktion von Easy-Edit wieder gewährleistet ist.

Beschriftung der Icons

Die Tooltips der Easy-Edit-Icons sind in der Render-Formatvorlage WEBeditInplaceIncludeJS in Form einer Map mit Schlüssel-Wert-Paaren hinterlegt. Diese Map ist im Seitenkontext in der Variable weInplaceLangInfos gespeichert. Standardmäßig sind folgende Tooltips definiert:

	Referenzname des Icons	Sprachschlüssel	Funktion	Tooltip Deutsch	Tooltip Englisch
	WE_newParagraph	addDataRecord	öffnet ein Bearbeitungsfenster, über das ein neuer Datensatz angelegt werden kann	Datensatz anlegen	Add data record
	WE_newParagraph	addSection	öffnet ein Bearbeitungsfenster, über das ein neuer Absatz oberhalb des ausgewählten Absatzes mit derselben Absatzvorlage angelegt werden kann	Absatz hinzufügen	Add section
	WE_cancel	cancel	schließt das Bearbeitungsfenster, ohne eventuell durchgeführte Änderungen zu übernehmen	Abbrechen	Cancel
	WE_delete	delete	löscht den jeweiligen Absatz	Löschen	Delete
	WE_delete	deleteDataRecord	löscht den jeweiligen Datensatz	Datensatz löschen	Delete data record
siehe Hinweis	--	deletionConfirmation	Anzeige des Dialogs zur Bestätigung des Löschvorgangs	Möchten Sie das Objekt wirklich löschen?	Do you really want to delete this object?
	WE_language WE_language_inactive	displayLanguages	ist mehr als eine Projektsprache definiert, werden über dieses Icon Register eingeblendet, auf denen sprachabhängige Inhalte gepflegt werden können; gibt es nur eine Projektsprache, wird das Icon in inaktivem Zustand dargestellt	Sprachanzeige	Display languages
	WE_edit_active WE_edit_inactive	edit	öffnet das Bearbeitungsfenster mit allen Eingabekomponenten des jeweiligen Absatzes; kann der Absatz nicht bearbeitet werden (z.B. Absatzreferenzen), wird das Icon in inaktivem Zustand dargestellt	Bearbeiten	Edit
	WE_addSection	lastAddSectionDescription (Tooltip)	öffnet ein Fenster, über das im jeweiligen Inhaltsbereich ein neuer Absatz unterhalb des letzten Absatzes angelegt werden kann (siehe Hinweis )	Absatz hinzufügen	Add section
	WE_addSection	lastAddSectionLabel (Button-Beschriftung)		Absatz hinzufügen	Add section
	WE_down WE_down_inactive	moveDown	verschiebt den jeweiligen Absatz um eine Position nach unten; befindet sich der Absatz bereits an der untersten Position, wird das Icon in inaktivem Zustand dargestellt	Nach unten verschieben	Move down
	WE_up WE_up_inactive	moveUp	verschiebt den jeweiligen Absatz um eine Position nach oben; befindet sich der Absatz bereits an der obersten Position, wird das Icon in inaktivem Zustand dargestellt	Nach oben verschieben	Move up
	WE_save_active	save	speichert Änderungen und schließt das Bearbeitungsfenster	Speichern	Save
	WE_paragraph_active	--	zeigt an, dass es sich um einen Easy-Edit-Bereich handelt	--	--

Hinweise:

Die Sprache der Tooltips orientiert sich immer an der jeweiligen angezeigten WebEdit-Projektsprache: ist als Projektsprache "Deutsch" ausgewählt, werden die deutschsprachigen Tooltips angezeigt, für alle anderen Projektsprachen werden die englischsprachigen Tooltips angezeigt.

In manchen Fällen steht für 2 Funktionen nur ein Icon zur Verfügung, z.B. für das Anlegen eines Absatzes und das Anlegen eines Datensatzes. Welche Funktion tatsächlich zur Verfügung steht, wird automatisch aus dem Kontext ermittelt und dementsprechend der zugehörige Tooltip angezeigt (Ausnahme: Inhalte, die über die Funktion contentSelect ausgegeben werden). Weitere Informationen dazu siehe Formatvorlage WEBeditInplaceEditBegin.

Für die Schaltfläche zum Anlegen von Absätzen kann eine Beschriftung über den Sprachschlüssel lastAddSectionLabel und ein Tooltip über den Sprachschlüssel lastAddSectionDescription definiert werden. Der Text für lastAddSectionLabel darf nicht zu lang gewählt werden, da dieser auf das Schaltflächen-Bild "WE_addSection" gerendert wird und so nur begrenzter Platz (die Breite des Bildes) zur Verfügung steht. Weitere Informationen dazu siehe Formatvorlage WEBeditInplaceBody.

Der Sprachschlüssel deletionConfirmation besitzt kein Icon. Der Text wird in folgendem Dialog verwendet, der sich öffnet, wenn ein Absatz oder ein Datensatz gelöscht werden soll. Mit "OK" wird das Objekt gelöscht, mit "Abbrechen" wird der Löschvorgang abgebrochen:

Anpassen der Tooltips

Bei Bedarf können die Tooltips angepasst werden, indem den Sprachschlüsseln der Map über $CMS_SET(...)$ andere Werte zugewiesen werden. Je nach Anwendungsfall können

einzelne Tooltips (siehe 1. Beispiel),
alle Tooltips für das gesamte Projekt (siehe 2. Beispiel und 3. Beispiel) oder
Tooltips für einzelne Absätze (siehe 4. Beispiel)

ausgetauscht werden.

1. Beispiel: Ändern eines Tooltips (projektweit)

Um den Tooltip für ein Icon zu ändern, wird innerhalb jeder Seitenvorlage, in der ein $CMS_RENDER(template:"WEBeditInplaceIncludeJS")$ angegeben ist, mithilfe von $CMS_SET(...)$ der Wert für den betreffenden Sprachschlüssel neu definiert. Dabei ist es wichtig, dass die $CMS_SET(...)$-Anweisung direkt nach dem Aufruf von WEBeditInplaceIncludeJS folgt:

$CMS_RENDER(template:"WEBeditInplaceIncludeJS")$
$-- Überschreiben eines Sprachschlüssels --$
$CMS_IF(isSet(weInplaceLangInfos))$
    $CMS_SET(weInplaceLangInfos["moveUp"], "Bitte klicken, um den Absatz nach oben zu verschieben")$
$CMS_END_IF$
$-- /Überschreiben eines Sprachschlüssels --$

In diesem Beispiel wird der Schlüssel moveUp, der standardmäßig mit dem Wert Nach oben verschieben belegt ist, mit dem neuen Wert Bitte klicken, um den Absatz nach oben zu verschieben belegt.

Um die Definition für einen Tooltip sprachabhängig zu ändern, kann der Aufruf #global.language.abbreviation verwendet werden, z.B.:

$CMS_RENDER(template:"WEBeditInplaceIncludeJS")$
$-- Sprachabhängige Tooltips --$
$CMS_IF(isSet(weInplaceLangInfos))$

  $CMS_IF(#global.language.abbreviation == "DE")$
      $CMS_SET(weInplaceLangInfos["save"], "Möchten Sie die Änderungen speichern?")$
  $CMS_ELSE$
      $CMS_SET(weInplaceLangInfos["save"], "Do you want to save your changes?")$
  $CMS_END_IF$

$CMS_END_IF$
$-- /Sprachabhängige Tooltips --$

Im Beispiel wird in der Sprache mit dem Kürzel DE der Schlüssel save mit dem Wert Möchten Sie die Änderungen speichern? belegt. Für alle anderen Sprachen wird der Wert Do you want to save your changes? ausgegeben.

2. Beispiel: Ändern aller Tooltips (projektweit)

Um alle Tooltips zu ändern, muss jedem Schlüssel über $CMS_SET(...)$ ein neuer Wert zugewiesen werden:

$CMS_RENDER(template:"WEBeditInplaceIncludeJS")$
$-- Überschreiben aller Sprachschlüssel --$
$CMS_IF(isSet(weInplaceLangInfos))$
    $CMS_SET(weInplaceLangInfos, {
        "addDataRecord" :  "Bitte klicken, um Datensatz anzulegen.",
        "addSection" : "Bitte klicken, um Absatz hinzuzufügen.",
        "cancel" : "Bitte klicken, um abzubrechen.",
        "delete" : "Bitte klicken, um zu löschen.",
        "deleteDataRecord" : "Bitte klicken, um Datensatz zu löschen.",
        "deletionConfirmation", "Löschen?",
        "displayLanguages" : "Bitte klicken, um Sprachauswahl anzuzeigen.",
        "edit" : "Bitte klicken, um zu bearbeiten.",
        "lastAddSectionDescription" : "Bitte klicken, um Absatz an letzter Position hinzuzufügen."
        "lastAddSectionLabel" : "Bitte klicken, um Absatz an letzter Position hinzuzufügen." 
        "moveDown" : "Bitte klicken, um nach unten zu verschieben.",
        "moveUp" : "Bitte klicken, um nach oben zu verschieben.",
        "save" : "Bitte klicken, um zu speichern."
    })$
$CMS_END_IF$
$-- /Überschreiben aller Sprachschlüssel --$

Für ein einheitliches Erscheinungsbild wird empfohlen, die gleichen Tooltips-Sprachwerte in jeder Seitenvorlage zu verwenden. Bei Bedarf können die Tooltips aber auch in verschiedenen Seitenvorlagen mit verschiedenen Werten belegt werden. Die Änderung eines Tooltips wirkt sich immer für die Seiten aus, die auf der Seitenvorlage mit den überschriebenen Sprachwerten beruhen.

3. Beispiel: Mehrfachverwendung von Tooltips in mehreren Seiten

Für ein einheitliches Erscheinungsbild kann alternativ zur Änderung der Tooltips in jeder einzelnen Seitenvorlage eine separate Formatvorlage erstellt werden, in der eine projektweite Icon-Beschriftung festgelegt wird.

Sollen alle Tooltips neu definiert werden, kann die neue Formatvorlage folgendermaßen aussehen:

$CMS_SET(#global.context("PAGE")["weInplaceLangInfos"],
                if(#global.language.abbreviation == "DE", {
                        "addDataRecord"  : "...",
                        "addSection" : "...",
                        "cancel" : "...",
                        "delete" : "...",
                        "deleteDataRecord" : "...",
                        "deletionConfirmation" : "...",
                        "displayLanguages" : "...",
                        "edit" : "...",
                        "lastAddSectionDescription" : "...",
                        "lastAddSectionLabel" : "...",
                        "moveDown" : "...",
                        "moveUp" : "...",
                        "save" : "..."
                    },{
                        "addDataRecord" : "...",
                        "addSection" : "...",
                        "cancel" : "...",,
                        "delete" : "...",
                        "deleteDataRecord" : "...",
                        "deletionConfirmation" : "...",
                        "displayLanguages" : "...",
                        "edit" : "...",
                        "lastAddSectionDescription" : "...",
                        "lastAddSectionLabel" : "...",
                        "moveDown" : "...",
                        "moveUp" : "...",
                        "save" : "...",                 }))$

In diesem Beispiel werden die Tooltips mehrsprachig definiert. Anstelle der Platzhalter ... werden die neuen Werte für jeden Schlüssel vergeben, einmal für DE und einmal für alle anderen Sprachen.

Sollen nur einzelne Tooltips projektweit definiert werden, kann die separate Formatvorlage dazu folgendermaßen aussehen:

$CMS_IF(isSet(weInplaceLangInfos))$
    $CMS_SET(set_ft_langInfos, weInplaceLangInfos)$
    $CMS_SET(_void, set_ft_langInfos.put("edit", "..."))$
    $CMS_SET(_void, set_ft_langInfos.put("moveUp", "..."))$
    $CMS_SET(#global.context("PAGE")["weInplaceLangInfos"], set_ft_langInfos)$
$CMS_END_IF$

Diese Formatvorlage muss nach dem Render-Aufruf $CMS_RENDER(template:"WEBeditInplaceIncludeJS")$ in alle Seitenvorlagen, in denen diese Tooltips verwendet werden sollen, eingebunden werden:

$CMS_RENDER(template:"WEBeditInplaceIncludeJS")$
$CMS_RENDER(template:"REFERENZNAME_DER_FORMATVORLAGE")$

Die neue Formatvorlage holt das Standard-Sprachobjekt aus der Easy-Edit-Formatvorlage $CMS_RENDER(template:"WEBeditInplaceIncludeJS")$ und schreibt es in den Seitenkontext. Für die Tooltips, für die keine Werte in dieser Formatvorlage definiert sind, werden die Werte aus der Formatvorlage WEBeditInplaceIncludeJS verwendet.

Damit die neue Formatvorlage bei einer Aktualisierung nicht gelöscht wird, sollte sie nicht im Ordner "WebClient Formatvorlagen (EasyEdit)" (Referenzname "webeditinplace") liegen.

4. Beispiel: Ändern eines Tooltips für einen Absatz

Soll nur für einen bestimmten Absatz ein anderer Tooltip verwendet werden, wird der neue Wert innerhalb der Absatzvorlage zugewiesen. Der folgende Code muss dazu vor dem Aufruf $CMS_RENDER(template:"WEBeditInplaceEditBegin")$ bzw. zum Ändern des Tooltips und/oder der Beschriftung des Buttons "Absatz hinzufügen" (Medien-Referenzname WE_addSection) vor dem Aufruf $CMS_RENDER(template:"WEBeditInplaceBody")$ eingefügt werden:

$-- Temporäres Überschreiben eines Tooltips (Absatzebene) --$
$CMS_IF(isSet(weInplaceLangInfos))$
    $CMS_SET(set_st_weInplaceLangInfos, {:})$
    $CMS_SET(gv_void, set_st_weInplaceLangInfos.putAll(weInplaceLangInfos))$
    $CMS_SET(set_st_weInplaceLangInfos["moveUp"], "Die Beschreibung weicht für diesen Absatz ab!")$
    $CMS_SET(weInplaceLangInfos, set_st_weInplaceLangInfos)$
$CMS_END_IF$
$-- /Temporäres Überschreiben eines Tooltips (Absatzebene) --$

In diesem Beispiel wird der Schlüssel moveUp, der standardmäßig mit dem Wert Nach oben verschieben belegt ist, mit dem neuen Wert Die Beschreibung weicht für diesen Absatz ab! belegt. Dazu wird zunächst eine neue, leere Map erzeugt, die in der Variable set_st_weInplaceLangInfos gespeichert wird. (Das _st_ soll verdeutlichen, dass es sich hierbei um eine Sprachdefinitions-Map für den jeweiligen Absatz handelt.)

Über $CMS_SET(gv_void, set_st_weInplaceLangInfos.putAll(weInplaceLangInfos))$ wird die Map mit den Schlüssel-Wert-Paaren der Map weInplaceLangInfos, die auf Seitenebene gilt, gefüllt. In der folgenden Zeile wird dann dem Schlüssel moveUp innerhalb der Map auf Absatzebene der gewünschte Wert zugewiesen. Anschließend wird diese Map mit dem neuen Wert an die Map weInplaceLangInfos übergeben.

Animationsmodus konfigurieren

Werden editierbare Bereiche der Vorschauseite mit Maus überfahren (onmouseover) bzw. wieder verlassen (onmouseout), können über die optionalen Parameter animated und fastMode Übergangseffekte beim Ein- bzw. Ausblenden von Rahmen und Hintergrundfarbe ein- bzw. ausgeschaltet werden. Ebenso können über diese Parameter Übergangseffekte beim Schließen von Bearbeitungsfenstern aktiviert bzw. deaktiviert werden.

Die Übergangseffekte werden mithilfe eines mitgelieferten JavaScripts sowie des ebenfalls mitgelieferten JavaScript-Framework MooTools realisiert. Hinweise zur Verwendung von MooTools mit anderen JavaScript-Frameworks siehe unten.

Drei verschiedene Animationsmodi können über die Parameter animated und fastMode eingestellt werden:

Animationsmodus deaktiv
Ist animated auf false gesetzt, werden beim Überfahren mit der Maus die Easy-Edit-Bereiche durch Rahmen und Hintergrundfarbe ohne Animation hervorgehoben. Beim Schließen des Bearbeitungsfensters werden ebenfalls keine Übergangseffekte angezeigt.

$CMS_RENDER(template:"WEBeditInplaceIncludeJS", animated:false)$

Animationsmodus aktiv
Ist der Parameter animated auf true gesetzt und der Parameter fastMode auf false, werden alle Übergangseffekte aktiviert. Das heißt, Easy-Edit-Bereiche werden beim Überfahren mit der Maus hervorgehoben und beim Schließen des Bearbeitungsfensters wird ein "weicher" Übergang realisiert, die neue Vorschauseite mit den Änderungen wird langsam eingeblendet. Nur in diesem Modus wird MooTools verwendet.

$CMS_RENDER(template:"WEBeditInplaceIncludeJS", animated:true, fastMode:false)$

Schneller Animationsmodus
Sind beide Parameter animated und fastMode auf true gesetzt, werden Easy-Edit-Bereiche beim Überfahren mit der Maus mit Übergangseffekten hervorgehoben. Beim Schließen von Bearbeitungsfenstern gibt es dagegen keinen animierten Vorschauübergang. Die neue Vorschau mit den vorgenommenen Änderungen wird sofort geladen.

$CMS_RENDER(template:"WEBeditInplaceIncludeJS", animated:true, fastMode:true)$

Farb- und Rahmenwechsel beim Überfahren von Easy-Edit-Bereichen mit der Maus können über die Formatvorlage WEBeditInplaceEditBegin beeinflusst werden.

Für ein einheitliches Erscheinungsbild wird empfohlen, denselben Animationsmodus in jeder Seitenvorlage zu verwenden. Bei Bedarf können aber auch in verschiedenen Seitenvorlagen unterschiedliche Animationsmodi definiert werden. Die Definition eines Animationsmodus wirkt sich immer für die Seiten aus, die auf der entsprechenden Seitenvorlage beruhen.

Optionale Parameter

Parameter	Erläuterung / Beispiel
animated	de/aktiviert Übergangseffekte beim Überfahren von Easy-Edit-Bereichen mit der Maus sowie beim Schließen von Bearbeitungsfenstern, z.B. animated:false Mit false werden alle Übergangseffekte ausgeschaltet, mit true werden sie eingeschaltet. Wird der Parameter nicht angegeben, werden die Übergangseffekte standardmäßig aktiviert (animated:true).
fastMode	de/aktiviert den animierten Vorschauübergang nach Änderungen im Bearbeitungsfenster, z.B. fastMode:true Mit false wird der animierte Vorschauübergang aktiviert, mit true wird er deaktiviert. Wird der Parameter nicht angegeben, ist der animierte Vorschauübergang standardmäßig deaktiviert (fastMode:true). Der Parameter muss zusammen mit dem Parameter animated verwendet werden.

Parallele Verwendung von MooTools und anderen JavaScript-Frameworks

Bei einer parallelen Verwendung von verschiedenen JavaScript-Frameworks, z.B. von MooTools und jQuery, kann es zu Konflikten kommen, da sich Namensräume und Funktionsnamen überschneiden können. Dies gilt im Besonderen für das Dollarzeichen ($), das in der Syntax mehrerer Frameworks zur Ansprache von Funktionen verwendet wird.

Um beispielsweise jQuery parallel zu MooTools (oder einem anderen JavaScript-Framework) einzusetzen, kann es über die Funktion noConflict() in den so genannten Kompatibilitätsmodus geschaltet werden.

Eine Möglichkeit dabei ist, den Befehl jQuery.noConflict() der Datei, die jQuery verwendet, voranzustellen, also ganz am Anfang der Datei aufzurufen, z.B.

  jQuery.noConflict();     
  jQuery(document).ready(function(){
    if ($.browser.msie) {
     ...
    }
  ...
  }

Dabei ist zu beachten, dass jQuery.noConflict() erst aufgerufen werden kann, wenn das jQuery-Framework geladen ist, also die Datei jQuery.js in die Seite eingebunden wurde.

Weitere Informationen zur Funktion noConflict() siehe jQuery-Dokumentation.

Druckversion | Seitenanfang