Dokumentation

Schnellstart

Script einbinden:
```
<script src="rizocms.js"></script>
```
Keine Marker nötig:
Rizo CMS erkennt Überschriften, Texte, Listen, Links, Buttons und Bilder automatisch.
Edit-Modus aktivieren:
Drücke STRG + E auf dem Desktop. Auf Mobilgeräten nutzt du das Stift-Symbol.

Optionale Attribute

data-editable

Optional: Gibt einem Element einen stabilen eigenen Namen. Ohne dieses Attribut erzeugt Rizo CMS automatisch eine ID.

<p>Ohne Marker automatisch editierbarer Text</p>

data-editable-type

Definiert den Typ des editierbaren Elements. Standard ist "text".

Typ	Beschreibung
text	Standard-Textbearbeitung
html	Rich-Text mit HTML
image	Bild-Upload via File-Picker
link	Link-Bearbeitung

Tastenkürzel

`STRG` + `E`	Edit-Modus ein/ausschalten
`ESC`	Edit-Modus beenden / Modal schließen

Direkt auf dem Server speichern

Für das direkte Überschreiben deiner HTML-Seiten benötigst du PHP-Hosting. Vor jedem Speichern erstellt RizoCMS automatisch ein Backup.

Lade genau diese drei Dateien herunter: rizocms.js, login.php und save.php. Die .htaccess schützt die Systemdateien zusätzlich.
Lege alle vier Dateien in denselben Ordner wie deine HTML-Seiten, zum Beispiel index.html, about.html und contact.html.
Binde nur rizocms.js in jede HTML-Datei ein. login.php und save.php werden vom Script automatisch verwendet und müssen nicht als Script eingebunden werden.
Drücke STRG + E, lege beim ersten Login dein Passwort fest und bearbeite danach jede geöffnete HTML-Seite.
Mit „Speichern“ schreibt save.php genau die aktuell geöffnete HTML-Datei und erstellt vorher ein Backup.

Empfohlene Ordnerstruktur

/deine-website/
├── index.html
├── about.html
├── contact.html
├── rizocms.js
├── login.php
├── save.php
└── .htaccess

Alle Dateien liegen im selben Ordner. In jede HTML-Seite kommt nur dieser eine Script-Tag:

<script src="rizocms.js"></script>

Wichtig: Nach dem Speichern die öffentliche Seite prüfen. Mit „Rückgängig“ stellst du die letzte Version aus dem Backup wieder her.

SEO-Analyse

Das Rizo CMS beinhaltet einen integrierten SEO-Analyzer, der dir hilft, deine Inhalte zu optimieren:

Lesbarkeit

Flesch-Reading-Ease Score, Wörter pro Satz

Keyword-Analyse

Top Keywords mit Häufigkeit und Dichte

Überschriften-Struktur

H1/H2/H3 Hierarchie-Check

Meta-Tags

Title, Description, OG-Tags Optimierung

Vollständiges Beispiel

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Meine Webseite</title>
  <meta name="description" content="Beschreibung">
</head>
<body>
  <header>
    <h1>Willkommen</h1>
  </header>
  
  <main>
    <section>
      <h2>Über uns</h2>
      <p>Hier steht ein editierbarer Text.</p>
      <img src="bild.jpg" alt="Hero Bild" />
    </section>
  </main>
  
  <footer>
    <p data-editable="footer-text">© 2025</p>
  </footer>

  <script src="rizocms.js"></script>
</body>
</html>

Noch Fragen?

Schau dir unsere FAQ an für weitere Informationen.

Zur FAQ-Seite