Inhalte nur im Editor einbinden

Veröffentlichungsdatum: 13. April 2012
Änderungsdatum: 26. Februar 2014

editor wisineditor abfrage

Abhängig davon, ob man sich im Bearbeitenmodus befindet oder im Frontend, lassen sich z.B. unterschiedliche CSS-Dateien nutzen.

Die BASE nutzt für den Bearbeitungsmodus eine separate CSS-Datei. Diese wird dann eingebunden, wenn sich ein Pflegebenutzer im Editor befindet. Über ein XSL-Element (xsl:if) fragen Sie auf die Variable "wIsInEditor" ab und binden dann im Editor eine eigene CSS-Datei (z.B. editor.css) ein.

Beispiel: Auszug aus /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/templates/misc/includes.global.php

...
    <xsl:if test="$wIsInEditor">
      <link rel="stylesheet" type="text/css" href="{$wGlobalProjectPath}/wGlobal/layout/styles/editor.css"/>
    </xsl:if>
...

Ein weiteres Beispiel für eine Editor abhängige Abfrage ist der Einsatz von Javascript. Auf diese Weise können Sie über Javascript z.B. eine Meldung in der Bearbeitung ausgeben.

Beispiel: Javascript in einem XSL-Template einbinden (standard.wDocument, includes.global.php, etc.)

...
<script type="text/javascript">

  // Abfrage, ob im Editor oder nicht
  if(typeof wEditor != 'undefined'){
    //alert('Im Editor');
  }
  else{
    //alert('In der Seite selbst');
  }              

</script>
...
Onlinedokumentation - Layout / Design - Sonstige Darstellungen
SELFHTML: xsl:if
FAQs
Wie lassen sich im Bearbeitungsmodus und im Frontend unterschiedliche CSS-Dateien einbinden?
Je nachdem, ob sich der Nutzer im Bearbeitenmodus (Editor) befindet oder im Frontend, können unterschiedliche CSS-Dateien eingebunden werden. Im Editor wird dabei eine separate CSS-Datei verwendet, die nur bei aktivem Editor eingebunden wird.
Wie wird die Editor-abhängige CSS-Datei eingebunden?
Über ein XSL-Element (*xsl:if*) wird die Variable *wIsInEditor* abgefragt. Wenn *$wIsInEditor* den Wert für „im Editor“ erfüllt, wird eine eigene CSS-Datei (z.B. *editor.css*) eingebunden, etwa per <code class="codeInline">href="{$wGlobalProjectPath}/wGlobal/layout/styles/editor.css"</code>.
Welches XSL-Beispiel zeigt, wie die CSS-Datei nur im Editor geladen wird?
Ein typisches Muster ist: <pre><code class="codeBlock" style="color: #000000">xml &lt;xsl:if test="$wIsInEditor"&gt; &lt;link rel="stylesheet" type="text/css" href="{$wGlobalProjectPath}/wGlobal/layout/styles/editor.css"/&gt; &lt;/xsl:if&gt; </code></pre> Dieses Beispiel kann in entsprechenden Include-Dateien (z.B. *includes.global.php*) verwendet werden.
Wie können weitere Inhalte abhängig davon eingebunden werden, ob man im Editor oder im Frontend ist?
Neben CSS können auch andere Mittel wie Javascript editorabhängig eingebunden werden. Dazu wird geprüft, ob eine Editor-spezifische Variable bzw. ein Objekt vorhanden ist (z.B. *wEditor*).
Wie kann man in Javascript erkennen, ob der Code im Editor oder auf der Seite selbst ausgeführt wird?
Im Javascript kann man über <code class="codeInline">typeof wEditor != 'undefined'</code> prüfen, ob der Editor-Kontext aktiv ist. Beispiel: <pre><code class="codeBlock" style="color: #000000">javascript if(typeof wEditor != 'undefined'){ // Im Editor } else{ // In der Seite selbst } </code></pre>
Wo findet sich ein Beispiel für den Einsatz von editorabhängigem CSS in einer Projektdatei?
Im Inhalt wird als Beispiel der Auszug aus: <code class="codeInline">/[IHR-LAYOUT-PROJEKT]/wGlobal/layout/templates/misc/includes.global.php </code> genannt. Dort wird das XSL-Template mit der Abfrage auf *$wIsInEditor* gezeigt.