Startseite / Vorlagenentwicklung / WebEdit / Easy-Edit / InplaceEditBegin/End

WEBeditInplaceEditBegin / End

Easy-Edit – Bearbeitungsfenster mit Eingabekomponenten

Innerhalb der Render-Formatvorlagen WEBeditInplaceEditBegin und WEBeditInplaceEditEnd werden die Bereiche der Vorschauseite, die beim Überfahren mit der Maus farblich hervorgehoben werden sollen, festgelegt. Daher müssen sie innerhalb des HTML-Body-Bereichs und unterhalb von $CMS_RENDER(template:"WEBeditInplaceEditContainer")$ eingefügt werden.

An der Position von WEBeditInplaceEditBegin öffnet sich auf der Vorschauseite das Bearbeitungsfenster. Gleichzeitig definiert WEBeditInplaceEditBegin Größe und Aufklapprichtung des Bearbeitungsfensters. Das Bearbeitungsfenster enthält die Eingabekomponenten, die für den hervorgehobenen Bereich definiert sind. Zusätzlich können die Anzeige des Rahmens und Hervorhebungs-Farben für den Easy-Edit-Bereich beim Überfahren mit der Maus konfiguriert werden.

Die Render-Formatvorlagen WEBeditInplaceEditBegin und WEBeditInplaceEditEnd können in Seiten-, Absatz- und Tabellenvorlagen verwendet werden. Jeder WEBeditInplaceEditBegin-Ausdruck muss durch einen WEBeditInplaceEditEnd-Ausdruck wieder geschlossen werden. Es sollten keine Schachtelungen vorgenommen werden: jedes WEBeditInplaceEditBegin sollte vor dem nächsten WEBeditInplaceEditBegin erst wieder mit WEBeditInplaceEditEnd geschlossen werden.

<body>
  $CMS_RENDER(template:"WEBeditInplaceEditContainer")$
    ...
    $CMS_RENDER(template:"WEBeditInplaceEditBegin", width:640, height:480, orientation:"left")$
    ...
    $CMS_RENDER(template:"WEBeditInplaceEditEnd")$
</body>

Layout des Bearbeitungsfensters

Das Layout des Bearbeitungsfensters kann durch optionale Parameter beeinflusst werden.

Über die Parameter width und height kann beispielsweise die Größe fest vorgegeben werden. Werden keine Werte für width und height angegeben, nimmt das Bearbeitungsfenster genau die Größe der Ausgabe des von WEBeditInplaceEditBegin und WEBeditInplaceEditEnd umschlossenen Bereichs auf der Seite ein und überlagert ihn damit vollständig. Breite und Höhe sind dann also u.a. abhängig von den HTML-Vorgaben für diesen Bereich, der Menge des in den zugehörigen Eingabekomponenten eingepflegten Textes, der Breite und Höhe eingepflegter Bilder usw. Sind die enthaltenen Eingabekomponenten höher und/oder breiter als das Bearbeitungsfenster, erhält es vertikale und/oder horizontale Scrollbalken.

Über den Parameter orientation kann die Aufklapprichtung des Bearbeitungsfensters vorgegeben werden.

Animation und Ladefortschrittsanzeige

Mithilfe des Parameters borderless kann der Rahmen, der beim Überfahren angezeigt wird, ausgeblendet werden. Dies ist z.B. für pixelgenaue CSS-Layouts wichtig, die durch das zusätzliche Einfügen des Rahmens, der 1 Pixel breit ist, zerstört würden.

Darüber hinaus können über die Parameter backgroundColorHover, backgroundColorNormal, borderColorHover, borderColorNormal Start- und End-Farbwerte für den Wechsel von Hintergrund- und Rahmenfarbe beim Überfahren (onmouseover) und Verlassen (onmouseout) von Easy-Edit-Bereichen definiert werden.

Der Parameter loaderCss ermöglicht die Angabe einer CSS-Klasse für die Ladefortschritts-Anzeige. Standardmäßig wird

für Inhalte aus der Inhalte-Verwaltung die CSS-Klasse weie_loader_ps (Ladefortschritts-Anzeige in Mintgrün),
für Inhalte aus der Datenquellen-Verwaltung (Datensätze) die CSS-Klasse weie_loader_cs (Ladefortschritts-Anzeige in hellem Braun)

verwendet. Diese sind im Stylesheet mit dem Referenznamen "WE_css" (Medien-Verwaltung, Ordner "WebClient Medien (EasyEdit)", Referenzname "WEBeditInplace") enthalten. Sollen andere CSS-Klassen verwendet werden, müssen diese in einem separaten Stylesheet hinterlegt werden.

Diese Parameter werden allerdings nur ausgewertet, wenn in der Render-Formatvorlage WEBeditInplaceIncludeJS der Parameter animated nicht auf false gesetzt ist.

Bearbeitungsfunktionen

Die Funktionen, die zur Bearbeitung von Easy-Edit-Bereichen zur Verfügung stehen, werden anhand der jeweiligen Inhalte, die im Bereich gepflegt werden können, ermittelt. So stehen für Inhalte,

die über Eingabekomponenten aus Seitenvorlagen gepflegt werden, nur die Funktion "Bearbeiten"
die über Eingabekomponenten aus Absatzvorlagen gepflegt werden, alle Funktionen
die über Eingabekomponenten aus Tabellenvorlagen gepflegt werden, die Funktionen "Anlegen", "Löschen" und "Bearbeiten"

zur Verfügung.

Für diese Inhalts-Typen müssen keine weiteren Parameter für WEBeditInplaceEditBegin angegeben werden.

Lediglich für Inhalte, die über die Funktion contentSelect ausgegeben werden, müssen zusätzlich die Parameter content und index angegeben werden. Als Wert für content muss die UID der Tabellenvorlage, auf der die Datenquelle mit dem gewünschten Datensatz basiert, in doppelten Hochkommata angegeben werden. Als Wert für index wird die Datensatz-ID direkt in doppelten Hochkommata oder z.B. über das Systemobjekt #row oder die Anweisung $CMS_VALUE(...)$ dynamisch angegeben.

Optionale Parameter

Parameter	Erläuterung / Beispiel
width	Angabe der Breite des Bearbeitungsfensters in Pixeln, z.B. width:400 In dem hier angegebenen Pixel-Wert ist bereits die Breite für den Rahmen von 1 Pixel enthalten. Wird der Parameter nicht angegeben, richtet sich die Breite des Bearbeitungsfensters nach der Breite der Ausgabe des von WEBeditInplaceEditBegin und WEBeditInplaceEditEnd umschlossenen Bereiches auf der Vorschauseite.
height	Angabe der Höhe des Bearbeitungsfensters in Pixeln, z.B. height:400 In dem hier angegebenen Pixel-Wert ist bereits die Höhe für den Rahmen von 1 Pixel enthalten. Wird der Parameter nicht angegeben, richtet sich die Breite des Bearbeitungsfensters nach der Höhe der Ausgabe des von WEBeditInplaceEditBegin und WEBeditInplaceEditEnd umschlossenen Bereiches auf der Vorschauseite.
loaderCss	Beeinflussung der Ladefortschritts-Anzeige durch die Angabe einer CSS-Klasse, z.B. loaderCss:"weie_loader_cs" Standardmäßig wird für Inhalte aus der Inhalte-Verwaltung die CSS-Klasse weie_loader_ps (Ladefortschritts-Anzeige in Mintgrün), für Inhalte aus der Datenquellen-Verwaltung (Datensätze) die CSS-Klasse weie_loader_cs (Ladefortschritts-Anzeige in hellem Braun) verwendet.
backgroundColorNormal	Angabe einer Start- bzw. Endfarbe im Hexadezimal-Modus des Hintergrunds eines Easy-Edit-Bereiches beim Überfahren bzw. Verlassen mit der Maus, z.B. backgroundColorNormal:"#59c3ef" Dieser Wert wird beim Überfahren des Bereiches als Startwert verwendet, beim Verlassen als Endwert. Wird der Parameter nicht angegeben, wird standardmäßig Weiß (#ffffff) als Hintergrundfarbe verwendet.
backgroundColorHover	Angabe einer Start- bzw. Endfarbe im Hexadezimal-Modus des Hintergrunds eines Easy-Edit-Bereiches beim Verlassen bzw. Überfahren mit der Maus, z.B. backgroundColorHover:"#59c3ef" Dieser Wert wird beim Verlassen des Bereiches als Startwert verwendet, beim Überfahren als Endwert. Wird der Parameter nicht angegeben, wird für Inhalte aus der Inhalte-Verwaltung standardmäßig Mintgrün (#ebf0e7) als Hintergrundfarbe verwendet, für Inhalte aus der Datenquelle-Verwaltung ein helles Braun (#efeae6).
borderColorNormal	Angabe einer Start- bzw. Endfarbe im Hexadezimal-Modus für den Rahmen eines Easy-Edit-Bereiches beim Überfahren bzw. Verlassen mit der Maus, z.B. borderColorNormal:"#59C3EF" Dieser Wert wird beim Überfahren des Bereiches als Startwert verwendet, beim Verlassen als Endwert. Wird der Parameter nicht angegeben, wird standardmäßig Weiß (#ffffff) als Rahmenfarbe verwendet. Dieser Parameter hat keine Auswirkung, wenn der optionale Parameter borderless auf true gesetzt ist (siehe unten).
borderColorHover	Angabe einer Start- bzw. Endfarbe im Hexadezimal-Modus für den Rahmen eines Easy-Edit-Bereiches beim Verlassen bzw. Überfahren mit der Maus, z.B. borderColorHover:"#000000" Dieser Wert wird beim Verlassen des Bereiches als Startwert verwendet, beim Überfahren als Endwert. Wird der Parameter nicht angegeben, wird standardmäßig Violett (#961a59) als Rahmenfarbe verwendet. Dieser Parameter hat keine Auswirkung, wenn der optionale Parameter borderless auf true gesetzt ist (siehe unten).
borderless	Ein- und Ausblenden eines Rahmens beim Überfahren eines Easy-Edit-Bereiches, z.B. borderless:true true blendet den Rahmen aus. Die Parameter borderColorNormal und borderColorHover haben somit keine Auswirkung mehr. Wird der Parameter nicht angegeben, wird der Rahmen standardmäßig angezeigt.
orientation	Angabe der Richtung, in die das Bearbeitungsfenster aufgeklappt wird. Standardmäßig wird das Bearbeitungsfenster nach rechts aufgeklappt (orientation:"right"). Befindet sich der zu bearbeitende Absatz z.B. am rechten Rand der Seite, kann das Fenster mithilfe von orientation:"left" nach links aufgeklappt werden.
content	Angabe der UID der Tabellenvorlage, z.B. content:"Products.press_releases" Dieser Parameter muss zusammen mit dem Parameter index verwendet werden.
index	Angabe der ID des Datensatzes, z.B. index:#row.getId() Dieser Parameter muss zusammen mit dem Parameter content verwendet werden.

Sonderfall CMS_INPUT_CONTENTAREALIST und FS_LIST

Hinweise zur Verwendung der Eingabekomponenten CMS_INPUT_CONTENTAREALIST und FS_LIST siehe hier.

Druckversion | Seitenanfang