Der Editor ermöglicht es Ihnen im JSON Format Eingabe-Felder zu definieren. z.B. kann der Kunden eine Farbe oder eine Bild-Datei auswählen. Diese Auswahl wird dann automatisch in eine CSS-Klasse geschrieben, die z.B. den Wrapper definiert.


Die Grund-Syntax ist wie folgt:


im JSON Format immer mit einer geschweiften Klammern starten, dann erstellen Sie einen Eintrag für jede Klasse, die Sie dann brauchen (in unserem Fall: "colorsection"), innerhalb diesem Bereich erstellen Sie weitere Sub-Bereich für jeden CSS-Parameter mit den entsprechenden Editor-Einstellungen:


  • Klasse
    • Eigenschaft (CSS-Parameter, z.B. background-color)
      • Konfiguration für Editor


Sie können so viele Klassen und Eigenschaften definieren, wie Sie möchten.


{

   "colorsection": { /* CSS Klassen-Name */

      "background-color": { /* CSS Eigenschaft */

         "inputType": "colorfield", /* Editor Typ: Farbauswahl */

         "allowBlank": true /* Wert muss nicht zwingend gewählt werden */

         /* weiter Editor Einstellungen */

      },

      "background-image": { /* CSS Eigenschaft */

         "inputType": "filefield" /* Editor Typ: Dateiauswahl */

      }

   }

}


Alle Editor Konfigurationen


inputType

Das Eingaben-Element mit dem der Endkunde einen Wert eingeben kann. Mögliche Elemente:


text: einfaches Textfeld

numberfield: nur numerische Eingabe

colorfield: Farbwähler

filefield: Datei-Auswahl (für Hintergundbilder, Favicons, usw..)

select: Auswahl-Feld


Je nach Eingabe-Type (inputType) können noch weitere Optionen definiert werden:


Alle Eingabe-Typen (inputType):

allowBlank (true,false): definiert ob das Feld leer sein darf

value: Standard-Wert


Nur Eingabe-Typ numberfield

minValue: mindest Wert der Eingabe-Zahl

maxValue: maximal Wert der Eingabe-Zahl

outputType: Ausgabe-Typ - falls nicht definiert, wird der Wert als "px" ausgegeben. Mögliche Werte "%", "em" oder "" falls es 1:1 ausgegeben werden soll.


Nur Eingabe-Typ colorfield

showAlpha (true,false): Definiert ob es einen Balken für die Transparenz geben soll.



Nur Eingabe-Type select

options: die auswählbaren Elemente


Beispiel - statt, dass der Endkunde jede Farbe frei wählen kann, geben wir ihm eine Auswahl von 3 Farben:


{

   "colorsection": { /* CSS Klassen-Name */

      "background-color": { /* CSS Eigenschaft */

         "inputType": "select", /* Editor Typ: Auswahl-Feld */

         "options": {

            "#ff0000": "Rot",

            "#00ff00": "Grün",

            "#0000ff": "Blau"

         }

      }

   }

}