Onedit ist ein Content Management System, das keine Installation benötigt. Onedit läuft online in der Cloud und loggt sich über FTP oder sFTP auf Ihrem Webspace oder Server ein, um die Dateien direkt zu bearbeiten. Immer wenn Sie Inhalte ändern und hierbei eine Seite öffnen oder speichern, passiert dies direkt auf Ihrem Webspace.

Damit die Inhalte Ihrer Webseite bearbeitet werden können, muss jedem zu bearbeitenden Element eine spezielle CSS-Klasse hinzugefügt werden. Onedit sucht in jeder Datei nach diesen CSS-Klassen und lässt so die Bearbeitung des entsprechenden Elements je nach Typ in einem WYSIWYG-Editor, Textfeld oder Bild-Upload zu.

Obwohl Onedit einfach zu bedienen ist, gibt es einige wenige Dinge die wichtig und zu beachten sind, damit Onedit reibungslos funktioniert und Ihre Webseite bearbeitet werden kann:

Regelmässiges Backup

Bevor Sie Onedit das erste mal benutzen, legen Sie bitte unbedingt ein Backup aller Dateien an. Obwohl wir jede Änderung in der History speichern und jede vorherige Version wiederhergestellt werden kann, empfiehlt sich ein Backup Ihrer kompletten Datein, die sich auf dem Webspace befinden. Generell empfehlen wir ein tägliches oder mindestens wöchtenliches Backup, unabhängig davon, ob Sie Onedit oft, wenig oder gar nicht nutzen.

Gültiges Markup & HTML

Beim Entwicklen von Onedit haben wir extra darauf geachtet, das auch Seiten bearbeitet werden können, die Fehler im HTML der Webseite, also ein weniger gültiges Markup haben. Dennoch sollten Sie bei Problemen oder Fehlern zu allererst das Markup Ihrer Webseite mit dem W3C Markup Validation Service auf eventuelle Fehler überprüfen.

UTF-8 Encoding

Onedit speichert Inhalte in UTF-8, damit Umlaute und Sonderzeichen korrekt dargestellt werden. Bitte achten Sie beim Erstellen Ihrer Webseite darauf, alle Text- bzw. HTML-Dateien in einem Editor mit UTF-8-Encoding zu erstellen und zu speichern. Damit jeder Browser die Webseite korrekt darstellt, fügen Sie bitte folgende Zeile im Head-Bereich (zwischen <head> und </head>) Ihrer Webseite ein:

<meta charset="utf-8">

Zur Zeit prüfen wir die Verwendung von verschiedenen Encodings. Da diese Funktion aber aktuell noch in der Konzeptionsphase ist, verwenden Síe bitte UTF-8, was für Webseiten generell zu empfehlen ist. Mehr Informationen gibt es auf der Wikipedia-Seite zu UTF-8.

Elemente editierbar machen

Jedes HTML-Element, das Sie mit Onedit bearbeiten möchten muss die CSS-Klasse editable haben. Dies wird dem Element durch das Attribut class mitgeteilt:

<div class="editable">
</div>

Sollte dem Element bereits eine Klasse zugewiesen sein, kann editable natürlich einfach hinzugefügt werden:

<div class="myclass editable"></div>

Bereits bestehende Inhalte in Elementen können natürlich übernommen und direkt bearbeitet werden:

<div class="editable">
  <h1>Bearbeite mich</h1>
  Ich bin ein Text, den du in Onedit direkt bearbeiten kannst. Herrlich!
</div>

Natürlich sind nicht nur Div's möglich. Möchten Sie eine Headline zur Bearbeitung freigeben? Kein Problem:

<h1 class="editable">Ich bin eine grosse Überschrift und kann bearbeitet werden</h1>

.. oder Inhalte inmitten eines Textes - auch das ist möglich:

<p>Verpassen sie nicht unsere täglichen Angebote, wie zum Beispiel <span class="editable">heute, am 04.10.2012</span> gibt es in unserer Kantine <span class="editable">Wiener Schnitzel mit Kartoffelsalat</span>. Jetzt vorbeischauen!

Auch Bilder können bearbeiten werden:

<img src="/img/picture.jpg" width="300" height="200" alt="Ein Bild" class="editable">

Informationen zu allen möglichen Elementen gibt es weiter unten.

Damit man bei mehreren zu bearbeitenden Elementen auf einer Seite die jeweiligen Elemente unterschieden werden können, ist es ratsam jedem Element einen Titel bzw. Namen zu geben. Dies geschieht über das Attribut title:

<div class="myclass editable" title="Aktuelles Text"></div>

Alternativ kann der Title auch in den Attributen name, id oder alt angegeben werden.

<div class="myclass editable" name="Der Titel im Attribut Name"></div>
<div class="myclass editable" id="Der Titel im Attribut Id"></div>
<img class="editable" alt="Der Titel im Attribut Alt bei Grafiken" src="/img/image.png">

Im Prinzip kann mit Onedit jedes HTML-Element bzw. dessen Inhalt bearbeitet und mit der editable-Klasse versehen werden. Es empfiehlt sich jedoch bei längeren Texten ausschliesslich das Element div zu verwenden, um beispielsweisse Absätze mit einem p definieren zu können, die untereinander nicht verschachtelt werden können.

Je nach Element-Tag wird in Onedit ein entsprechendes Feld zum Bearbeiten angezeigt. Hier sehen Sie die aktuell möglichen Typen:

HTML-Tags Onedit Editor-Typ
div, p WYSIWYG-Editor
a Link mit URL und Text
img Bild-Upload
h1-h6, span und alle weiteren Elemente. Text-Feld
Folgende Tags sollten nicht verwendet werden: html, head, body, table, tr, ul, ol

Um Bilder zur Bearbeitung freizugeben, muss diesen ebenso die CSS-Klasse editable hinzugefügt werden. Die Dateien der Bilder werden grundsätzlich NICHT überschrieben. Es wird ein automatischer Dateiname generiert und die Datei im gleichen Verzeichnis abgelegt. Mögliche Bildformate sind JPG, PNG und GIF.

<img src="/img/picture.jpg" alt="Ein Bild" class="editable">

Skalierung von Bildern

Onedit kann Bilder auch automatisch verkleinern, sofern mindestens das Attribut für die Breite des Bildes width angegeben ist:

<img src="/img/picture.jpg" alt="Ein Bild" class="editable" width="300">

Werden beide Attribute width und height angegeben, wird das Bild - sofern es grösser ist - nach dem Hochladen automatisch und genau auf die angegebene Breite und Höhe verkleinert. Wird nur width angegeben, wird die Höhe bei der Verkleinerung automatisch den Bildproportionen angepasst.

<img src="/img/picture.jpg" alt="Ein Bild" class="editable" width="300" height="200">

Beachten Sie bitte, bei Angabe beider Attribute width und height nur Bilder mit gleichen Seitenverhältnis zu verwenden, damit beim Skalieren der Bilder keine Verzerrung entsteht. Beim Beispiel oben wäre die Verwendung eines Bildes mit einer Breite von 600 und einer Höhe von 400 Pixeln völlig in Ordnung, da Höhe und Breite sich im gleichen Verhältnis auf 300x200 verkleinern lassen.

Ein sehr nützliches und extrem wertvolle Funktion in Onedit sind wiederholbare Elemente. Mit dieser Funktion können Elemente in einer Seite untereinander wiederholt werden. Für die Pflege von News, Terminen, Bilder-Gallerien oder gar einem Blog sehr hilfreich. Wiederholbare Elemente können kopiert, sortiert und natürlich auch wieder gelöscht werden.

Um ein Element wiederholbar zu machen, muss diesem die CSS-Klassen mit dem Namen editable und repeatable gegeben werden.

<div class="editable repeatable" title="News">
  <h1>Ich kann mich wiederholen und bearbeiten lassen</h1>
  Mich kann man ganz einfach bearbeiten, kopieren, sortieren und natürlich wieder entfernen.
</div>

Ein wiederholbares Element kann sogar weitere Elemente enthalten, die zu bearbeiten und mit der CSS-Klasse editable versehen sind. Beachten Sie bitte, das dann alle Elemente, die Sie innerhalb des wiederholbaren Elements bearbeiten wollen mit der CSS-Klasse editable versehen werden müssen.

<div class="editable repeatable" title="News">
  <h1 class="editable" title="Headline">Ich kann mich wiederholen und bin einzeln zu bearbeiten</h1>
  <img class="editable" title="Bild"> src="/img/news_201210.png">
  <div class="editable" title="Text">Ich bin zu bearbeiten und wiederhole mich bei Bedarf.</div>
  Ich bin bleibender Text und kann nicht bearbeitet werden.
</div>

Mehere wiederholbare Elemente auf einer Seite sind problemlos möglich.
Eine Verschachtelung mehrerer wiederholbaren Elemente ist leider nicht möglich.

Bei Onedit enspricht ein Projekt einer Webseite. Es können mit einem Pro-Account mehrere Projekte angelegt werden. Dabei spielt es keine Rolle, ob die Seiten bei einem oder verschiedenen Webhostern liegen. Pro Projekt können verschiedene Einstellungen vorgenommen und Zugangsdaten und -typen vergeben werden.

URL

Webseiten können als normale Domain, Subdomains oder Unterseiten angelegt werden. Dabei ist es wichtig, das die URL den Hauptpfad der kompletten Webseite die Sie bearbeiten möchten enthält. In den meisten Fällen ist der Pfad der URL ein Slash: /.

Eine komplette Domain - was in den meisten Fällen zutrifft - würde mit folgender URL angelegt werden:

http://www.meinedomain.xy/

Eine Subdomain:

http://meinesub.domain.xy/

Wenn Ihre komplette Webseite in einem Unterverzeichnis liegt, geben Sie bitte die URL wie im folgenden Bespiel ein:

http://www.domain.xy/pfad/zur/seite/

Zugangsdaten

Um eine Seite zu bearbeiten, muss diese zuerst angelegt werden. Hierzu muss einfach eine Datei auf dem Server ausgewählt werden. Gültige Dateieindungen sind: .html, .htm, .php, .css, .txt, .js.

Mehr Dokumentation folgt.

Dokumentation folgt.

Dokumentation folgt.

Dokumentation folgt.