# Inline CMS v2.0 - Server Persistence Edition

Vollständig eigenständiges Inline CMS mit Server-Speicherung via PHP und JSON.

## Features

- Live Bearbeitung von Texten, Bildern und HTML
- Server-Speicherung mit automatischem localStorage Fallback
- Mobile Edit Button
- Keyboard Shortcuts (STRG+E)
- HTML Export Funktion
- Kein React, keine Dependencies - Pure Vanilla JavaScript
- PHP Backend ohne Datenbank

## Installation

### 1. Auf Webserver hochladen

Lade den kompletten `v2.0` Ordner auf deinen Webserver:

```
/v2.0/
  ├── index.html
  ├── rizocms.js
  ├── api.php
  ├── uploads/ (wird automatisch erstellt)
  └── README.md
```

### 2. Berechtigungen setzen

```bash
chmod 755 api.php
chmod 777 uploads/
```

### 3. Testen

Öffne im Browser: `https://deine-domain.com/v2.0/`

### 4. Edit Mode aktivieren

**Desktop:** STRG+E drücken
**Mobile:** Auf den blauen Button unten rechts tippen

## Verwendung

### Eigene Seite erstellen

1. Kopiere `index.html` oder erstelle neue HTML-Datei
2. Füge `data-editable` Attribute hinzu:

```html
<!-- Editierbarer Text -->
<h1 data-editable="titel" data-editable-type="text">Mein Titel</h1>

<!-- Editierbares Bild -->
<div data-editable="hero-bild" data-editable-type="image">
  <img src="bild.jpg" alt="Hero">
</div>

<!-- Editierbares HTML -->
<div data-editable="content" data-editable-type="html">
  <p>Inhalt...</p>
</div>
```

3. Binde das Script ein:

```html
<script src="rizocms.js"></script>
<script>
  const cms = new InlineCMS({
    apiEndpoint: 'api.php',
    storageMode: 'server', // oder 'local'
    autoSave: true,
    debug: false
  });
  cms.init();
</script>
```

## Konfiguration

```javascript
{
  apiEndpoint: 'api.php',     // Pfad zur API
  storageMode: 'server',      // 'server' oder 'local'
  autoSave: true,             // Automatisch speichern
  debug: false,               // Debug-Logs in Console
  storageKey: 'inline-cms-v2-data' // localStorage Key
}
```

## Server Anforderungen

- PHP 7.4 oder höher
- Schreibrechte im v2.0 Ordner
- mod_rewrite (optional, für Clean URLs)

## Storage Modes

### Server Mode (Empfohlen)
- Speichert in `content.json` auf Server
- Persistent über alle Geräte
- Automatischer localStorage Fallback

### Local Mode
- Speichert nur im Browser localStorage
- Funktioniert offline
- Nicht über Geräte synchronisiert

## API Endpoints

### POST /api.php

**Ping:**
```json
{ "action": "ping" }
```

**Save:**
```json
{
  "action": "save",
  "data": {
    "edits": { "element-id": "content" },
    "timestamp": 1234567890
  }
}
```

**Load:**
```json
{ "action": "load" }
```

**Reset:**
```json
{ "action": "reset" }
```

## Sicherheit

### Passwortschutz hinzufügen

Füge in `api.php` am Anfang hinzu:

```php
<?php
$password = 'dein-sicheres-passwort';
if (!isset($_SERVER['PHP_AUTH_PW']) || $_SERVER['PHP_AUTH_PW'] !== $password) {
    header('WWW-Authenticate: Basic realm="CMS"');
    header('HTTP/1.0 401 Unauthorized');
    echo 'Access denied';
    exit;
}
// ... rest of code
```

### .htaccess Schutz

```apache
<Files "api.php">
    Require valid-user
    AuthType Basic
    AuthName "Protected Area"
    AuthUserFile /pfad/zu/.htpasswd
</Files>