So fügen Sie Stile zu TinyMCE- und Markdown-Inhalten hinzu
Viele Schriftsteller bevorzugen in Markdown arbeiten weil es eine einfachere Sprache ist, mit weniger Hürden zu klettern. Zugegeben, es ist alles andere als perfekt, aber es bietet a saubere Sicht auf Ihren Text mit der Leichtigkeit von in HTML exportieren.
Leider sind die Standard-Markdown-Stile normalerweise ziemlich langweilig. Aber mit dem wysiwyg.css-Bibliothek, Sie können habe ein lebendiges Dokument in kürzester Zeit.
Diese kostenlose CSS-Bibliothek wandelt alle grundlegenden Inhalte von TinyMCE oder Markdown in ein formatierte, leicht lesbare HTML-Blöcke.
Sie müssen kein komplexes HTML / CSS kennen, um dieses Plugin verwenden zu können. Einfach umhüllen Sie den generierten Inhalt in ein div mit der klasse .wysiwyg, und du bist fertig.
Die eigentliche Schwierigkeit besteht darin, eine App zu erstellen, die diesen Prozess automatisiert, oder diese Bibliothek für ein Benutzerverwaltungsfeld dem Backend hinzuzufügen.
Die Möglichkeiten sind jedoch endlos und Sie könnten dies sogar nutzen für lokale Schreibarbeit wenn Sie Ihren Inhalt lieber exportieren möchten von Markdown zu HTML.
Diese CSS-Bibliothek verfügt standardmäßig über Unterstützung für alle wichtigen HTML-Tags denkbar. Dies umfasst alle Header, Listen, Links, Pre- / Code-Tags, Zahlen und sogar halb-obskure Tags und . Da ist ein volle Liste im GitHub-Repo, wenn Sie es ausprobieren möchten.
Wenn Sie Ihre eigenen typografischen Stile definieren, können diese sogar Schreibe die Standardeinstellungen neu im Stylesheet. So können Sie alle Vorteile von wysiwyg.css nutzen gemischt mit Ihren eigenen Schriftarten.
Die Bibliothek könnte auch nicht einfacher einzurichten sein. Gerade Laden Sie eine Kopie lokal herunter oder zieh es direkt mit npm install wysiwyg.css
Von dort aus geht es dir nur Fügen Sie die CSS-Datei ein in Ihrem Dokumentenkopf und lassen Sie es laufen. Es wird nur der Inhalt anvisiert in einem Container mit der Klasse .wysiwyg, Diese Klasse sollte also den gewünschten Container umschließen.
Die Bibliothek ist immer noch dabei semi-regelmäßig aktualisiert, also kannst du Finden Sie die neuesten Updates im Haupt GitHub Repo. Und wenn Sie Vorschläge oder Ideen für neue Updates haben, können Sie ihn gerne auf seiner Twitter-Seite @jgthms mit dem Ersteller Jeremy Thomas teilen.
