Wie man Styles zu TinyMCE- und Markdown-Inhalten hinzufügt

Viele Autoren arbeiten lieber in Markdown, weil es eine einfachere Sprache mit weniger Hürden ist. Zugegeben, es ist alles andere als perfekt, aber es bietet eine sauberere Sicht auf Ihren Text mit der Leichtigkeit des Exports in HTML .

Leider sind die Standard-Markdown-Stile normalerweise ziemlich langweilig. Mit der wysiwyg.css-Bibliothek können Sie in kürzester Zeit ein dynamisches Dokument erstellen .

Diese kostenlose CSS-Bibliothek wandelt all Ihre grundlegenden TinyMCE- oder Markdown-Inhalte in formatierte, einfach zu lesende HTML-Blöcke um .

Sie brauchen kein komplexes HTML / CSS um dieses Plugin zu benutzen. Wickeln Sie einfach den generierten Inhalt in ein div mit der Klasse .wysiwyg und Sie sind .wysiwyg .

Die eigentliche Schwierigkeit besteht darin, eine App zu erstellen, die diesen Prozess automatisiert oder diese Bibliothek für ein Benutzer-Admin-Panel in das Backend einfügt.

Die Möglichkeiten sind jedoch endlos, und Sie können dies sogar für lokales Schreiben verwenden, wenn Sie Ihren Inhalt lieber von Markdown nach HTML exportieren möchten.

Standardmäßig unterstützt diese CSS-Bibliothek alle wichtigen HTML-Tags . Dazu gehören alle Header, Listen, Links, Pre- / Code-Tags, Abbildungen und sogar halb-obskure Tags wie und. Es gibt eine vollständige Liste im GitHub Repo, wenn Sie es überprüfen möchten.

Wenn Sie Ihre eigenen typografischen Stile definieren, können diese sogar die Standardeinstellungen im Stylesheet umschreiben . So können Sie alle Vorteile von wysiwyg.css mit Ihren eigenen Schriftarten kombinieren.

Die Bibliothek könnte auch nicht einfacher zu installieren sein. Laden Sie einfach eine Kopie lokal herunter oder ziehen Sie sie direkt mit npm install wysiwyg.css

Von dort fügen Sie einfach die CSS-Datei in Ihren Dokumentkopf ein und lassen sie laufen. Es .wysiwyg nur auf den Inhalt eines Containers mit der Klasse .wysiwyg sollte diese Klasse den .wysiwyg Container .wysiwyg .

Die Bibliothek wird noch immer halb aktualisiert, sodass Sie die neuesten Aktualisierungen im Haupt-GitHub-Repo finden können. Und wenn du Vorschläge oder Ideen für neue Updates hast, kannst du sie mit dem Schöpfer Jeremy Thomas auf seiner Twitter-Seite @jgthms teilen.