Jak dodawać style do treści TinyMCE i Markdown

Wielu pisarzy woli pracuje w Markdown ponieważ jest to prostszy język z mniejszą ilością przeszkód do pokonania. Przyznane, że jest dalekie od doskonałości, ale oferuje czystszy widok tekstu z łatwością eksport do HTML.

Niestety, domyślne style Markdown są zwykle dość nudne. Ale z biblioteka wysiwyg.css, możesz mieć żywy dokument w krótkim czasie.

Ta bezpłatna biblioteka CSS przekształca wszystkie podstawowe treści TinyMCE lub Markdown w sformatowane, łatwe do odczytania bloki HTML.

Aby korzystać z tej wtyczki, nie musisz znać żadnego skomplikowanego HTML / CSS. Po prostu zawiń wygenerowaną treść w div z klasą .wysiwyg, i jesteś gotowy.

Prawdziwą trudnością jest zbudowanie aplikacji, która zautomatyzuje ten proces lub dodanie tej biblioteki do zaplecza dla panelu administracyjnego użytkownika.

Jednak możliwości są nieograniczone, a nawet można to wykorzystać do lokalnej pracy pisarskiej jeśli wolisz eksportować swoje treści od Markdown do HTML.

Domyślnie ta biblioteka CSS ma obsługa każdego znacznika HTML wyobrażalny. Obejmuje to wszystkie nagłówki, listy, linki, znaczniki przed / kodowe, liczby, a nawet pół-niejasne znaczniki, takie jak i . Jest pełna lista w repozytorium GitHub, jeśli chcesz to sprawdzić.

Jeśli zdefiniujesz własne style typograficzne, mogą one nawet przepisać ustawienia domyślne w arkuszu stylów. Więc możesz uzyskać wszystkie korzyści wysiwyg.css zmieszane z własnymi wyborami czcionek.

Nie można też łatwiej skonfigurować biblioteki. Właśnie pobierz kopię lokalnie lub pociągnij go bezpośrednio za pomocą npm zainstaluj wysiwyg.css

Stamtąd po prostu dołącz plik CSS w głowie dokumentu i pozwól mu działać. Dotyczy tylko zawartości wewnątrz pojemnika z klasą .wysiwyg, więc ta klasa powinna zawijać dowolny kontener.

Biblioteka nadal jest aktualizowany częściowo często, więc możesz znajdź najnowsze aktualizacje w głównym repozytorium GitHub. A jeśli masz sugestie lub pomysły na nowe aktualizacje, możesz podzielić się nimi z twórcą Jeremy Thomasem na jego stronie na Twitterze @jgthms.