So fügen Sie HTML-Code in Confluence ein: Ein Schritt-für-Schritt-Tutorial

Hier ist ein ausführliches Tutorial, wie du HTML-Code in Confluence einfügen kannst – unterteilt in die verschiedenen Versionen (Cloud vs. Data Center) und Anwendungsfälle.

Confluence ist ein mächtiges Tool für die Zusammenarbeit, aber manchmal reichen die Standard-Formatierungen nicht aus. Ob Sie ein externes Widget einbetten, spezielles CSS-Styling anwenden oder ein interaktives Element hinzufügen möchten – hier erfahren Sie, wie es geht.

Methode 1: Das HTML-Makro (Standard-Weg für Data Center/Server)

In der selbstgehosteten Version von Confluence gibt es ein natives HTML-Makro. Wichtig: Dieses Makro ist aus Sicherheitsgründen (Schutz vor Cross-Site-Scripting) oft standardmäßig deaktiviert und muss von einem Administrator aktiviert werden.

Schritt-für-Schritt-Anleitung:

1. Editor öffnen: Gehen Sie auf die Seite, die Sie bearbeiten möchten, und klicken Sie auf Bearbeiten (oder drücken Sie E).
2. Makro suchen: Geben Sie im Editor an der gewünschten Stelle {html ein oder klicken Sie auf das + Symbol in der Werkzeugleiste und wählen Sie Andere Makros.
3. HTML wählen: Suchen Sie nach „HTML“ und wählen Sie das Makro aus.
4. Code einfügen: Es öffnet sich ein Container auf der Seite. Tippen oder kopieren Sie Ihren HTML-Code direkt in diesen Kasten.
   • Beispiel: <div style="color: red;">Hallo Welt!</div>
5. Speichern: Klicken Sie auf Einfügen und anschließend auf Veröffentlichen.

Methode 2: HTML in Confluence Cloud (Eingeschränkte Möglichkeiten)

In der Cloud-Version hat Atlassian das native HTML-Makro aus Sicherheitsgründen entfernt. Sie haben hier drei Möglichkeiten:

A. Das Code-Block-Makro (Nur zum Anzeigen)

Wenn Sie den Code nur anzeigen möchten (damit andere ihn kopieren können), aber nicht ausführen wollen:

1. Geben Sie /code ein.
2. Wählen Sie als Sprache „HTML“ aus.
3. Fügen Sie Ihren Code ein.

B. Das IFrame-Makro (Für externe Inhalte)

Wenn Sie eine externe Webseite oder ein Widget einbetten möchten:

1. Geben Sie /iframe ein.
2. Geben Sie die URL der Quelle an (z. B. eine Google Maps Karte oder ein YouTube-Video).

C. Apps vom Marketplace (Für vollen HTML-Support)

Um echten HTML-Code in der Cloud auszuführen, benötigen Sie eine Drittanbieter-App (z. B. „HTML for Confluence“).

1. Gehen Sie zu Apps > Neue Apps finden.
2. Suchen Sie nach „HTML“.
3. Nach der Installation finden Sie ein neues Makro (z. B. html-script), in das Sie Ihren Code einfügen können.

Methode 3: Für Administratoren – HTML-Makro aktivieren (Data Center)

Falls Sie Administrator sind und das Makro für Ihre Nutzer freischalten möchten:

1. Gehen Sie zur Confluence-Administration (Zahnrad-Symbol).
2. Wählen Sie Allgemeine Konfiguration.
3. Klicken Sie auf Sicherheitskonfiguration.
4. Klicken Sie auf Bearbeiten und setzen Sie das Häkchen bei HTML-Makro zulassen.
5. Speichern Sie die Einstellungen.

Wichtige Tipps und Sicherheitshinweise

• Sicherheit: Seien Sie vorsichtig beim Einfügen von JavaScript innerhalb des HTML-Makros. Bösartiger Code könnte Sitzungscookies stehlen. Erlauben Sie das HTML-Makro nur vertrauenswürdigen Autoren.
• Vorschau: Nutzen Sie immer die Vorschaufunktion des Makros, um sicherzustellen, dass das Layout der Seite durch den HTML-Code nicht „zerstört“ wird (besonders bei ungeschlossenen <div>-Tags).
• Responsive Design: Wenn Sie HTML-Tabellen oder Container einfügen, nutzen Sie CSS (z.B. width: 100%;), damit die Inhalte auch auf Mobilgeräten gut aussehen.

Zusammenfassung: Welches Makro für welchen Zweck?