Current project WYSIWYG Editor

Link einfügen

Web-Link E-Mail (mailto)

URL Anzeigetext (optional)

In neuem Tab öffnen

Link als Button

Bild einfügen

Bild-URL Oder lokale Datei wählen

Breite

Höhe

Größenverhältnis beibehalten

Lokales Bild komprimieren (JPEG)

Max. Breite bei Komprimierung (px)

Bild als Link einfügen

Alternativtext (optional)

Sonderzeichen

Emoji

VBA-Code einfügen

Dark Mode Light Mode

Schriftart

Schriftgröße (px)

VBA-Code hier einfügen

Rahmen (1px schwarz)

Block-Hintergrund

Farbe

Tabelle einfügen

2 × 2

Zeilen

Spalten

Mit Rahmen

Erste Zeile als Kopfzeile

Zellrahmen

Welche Kante(n)? (Boxen zeigen die aktuelle Farbe)

oben

links

alle

rechts

unten

Stärke (px) Stil Farbe

Zellhintergrund

Farbe

Größe

Wert

Info

HTML Studio – WYSIWYG Editor
Version

Autor
www.DIETERLE-programmierung.de

E-Mail
marcus@dieterle-programmierung.de

Hilfe – alle Funktionen

HTML Studio ist ein WYSIWYG-Editor: Du schreibst und formatierst wie in einer Textverarbeitung, im Hintergrund entsteht sauberes HTML. Der Editor besteht aus der Menüzeile (oben), der Werkzeugleiste (Cluster mit Schaltflächen), dem Editorbereich (WYSIWYG) und – per Umschalter – der HTML-Quelltext-Ansicht.

Schnellstart

Text eintippen und mit dem Cluster Text (Fett/Kursiv/…) formatieren.
Über Einfügen Links, Bilder, Tabellen, Sonderzeichen, Emojis oder VBA-Code einsetzen.
Mit </>HTML (Cluster „Ansicht") jederzeit zwischen WYSIWYG und Quelltext wechseln.
Das Design rechts im Cluster Ansicht wählen – die Auswahl wird gemerkt.
Speichern über Datei → Speichern (HTML) bzw. Strg+S.

Menü „Datei"

Neu – leeres Dokument (mit Rückfrage).
Öffnen – lädt eine .html/.htm/.txt-Datei.
Speichern (HTML) – speichert das HTML so, wie es in der HTML-Ansicht steht (Strg+S).
Speichern als Text / Speichern als PDF / Drucken (HTML) / Drucken (HTML-Text).
Sanitizer beim Speichern (✓) – säubert beim Speichern automatisch (sichere Tags/Attribute).
Komplettes HTML-Dokument (✓) – speichert ein ganzes Dokument inkl. <html><head><body>.

Menü „Bearbeiten"

Rückgängig/Wiederholen, Ausschneiden/Kopieren/Einfügen (Einfügen säubert Word-Müll).
Suchen & Ersetzen (Strg+F), Formatierung entfernen.

Menü „Einfügen"

Link (Web/mailto, optional als Button), Bild (Größe, Komprimierung, als Link).
Sonderzeichen, Emoji (Gruppen + Suche).
VBA-Code – farbiger Codeblock; Dark/Light, Schriftart & -größe, optionaler Rahmen. Sprungmarken werden als Normaltext dargestellt. Per Rechtsklick wieder bearbeitbar und per Anfasser skalier-/ausrichtbar.
Horizontale Linie / Block-Hintergrund / Tabelle.

Menü „Tabelle"

Einfügen – über das Raster die Spalten-/Zeilenzahl wählen.
Zeilen/Spalten – ober-/unterhalb bzw. links/rechts einfügen, einzeln löschen.
Zellen verbinden / Verbindung aufheben.
Kopfzeile und Zebra-Streifen umschalten.
Ausrichtung der Zelle (oben/mittig/unten).
Rahmen (Zellrahmen je Kante mit Farbwahl) und Zellhintergrund.
Maße – Zeilenhöhe, Spaltenbreite, Tabellenhöhe/-breite.

Menü „Ansicht"

HTML-Ansicht umschalten (Strg+Umschalt+H), Formatiere HTML.

Menü „Prüfen"

HTML prüfen (Tag-Struktur), HTML säubern (Sanitizer).

Bild & VBA-Block direkt im Editor

Anklicken → Rahmen mit Eck-Anfassern und Leiste: Block links/zentriert/rechts, Umfließen links/rechts, Rahmen an/aus, Löschen. (Bilder behalten das Seitenverhältnis, VBA-Blöcke werden frei skaliert.)

Rechtsklick

Auf Bild / Link / Button / Block-Hintergrund / VBA-Block → öffnet den jeweiligen Editor (mit Löschen).
In einer Tabelle → Kontextmenü. Auf Emoji/Sonderzeichen → Picker (markiert; anklicken ersetzt).

Werkzeugleiste (Cluster)

Verlauf – Rückgängig, Wiederholen, Formatierung entfernen.
Text – Fett, Kursiv, Unterstrichen, Durchgestrichen.
Schrift – Schriftart, Größe, Textfarbe, Highlight.
Listen – Aufzählung, Nummerierung (1.,2.,3.), Buchstaben (a.,b.,c.).
Ausrichtung – links/zentriert/rechts, Ein-/Ausrücken.
Einfügen – Link, Bild, Sonderzeichen, Emoji, VBA-Code, Linie, Block-Hintergrund, Tabelle.
Ansicht – HTML-Umschalter, Suchen, Design-Auswahl.

Designs / Farbschemata

Light, Dark – klassisch hell bzw. dunkel.
Glas hell / Glas dunkel – blaue Glas-Optik (transluzent, weichgezeichnet).
Glas Hellgrau / Glas Dunkelgrau – neutrale graue Glas-Optik.
Glas Sepia – warmer, augenschonender Glas-Ton.
Die zuletzt gewählte Variante wird automatisch gespeichert und beim nächsten Start geladen.

Menü „Hilfe"

Hilfe – dieses Fenster. Info – Version und Kontakt.

Tastenkürzel

Strg+B / Strg+I / Strg+U – Fett / Kursiv / Unterstrichen.
Strg+Z / Strg+Y – Rückgängig / Wiederholen.
Strg+S – Speichern (HTML).
Strg+F – Suchen & Ersetzen.
Strg+Umschalt+H – HTML-Ansicht umschalten.
Esc – Dialoge/Menüs/Suche schließen.

Tipps & Problemlösung

Word-/Web-Inhalte werden beim Einfügen automatisch von überflüssigem Code befreit.
Sieht das HTML „unaufgeräumt" aus: Ansicht → Formatiere HTML oder Prüfen → HTML säubern.
Tabellen-Funktionen erscheinen per Rechtsklick in einer Zelle.
Bilder/VBA-Blöcke zum Positionieren anklicken (Eck-Anfasser + Leiste).