Ako pridať štýly do obsahu TinyMCE & Markdown

Mnoho spisovateľov uprednostňuje pracovať v Markdown pretože je to jednoduchší jazyk s menším počtom prekážok na lezenie. Udelil to zďaleka nie je dokonalý, ale ponúka a čistší pohľad na váš text s ľahkosťou export do HTML.

Bohužiaľ, predvolené štýly Markdown sú zvyčajne dosť nudné. Ale s wysiwyg.css knižnica, môžeš mať živý dokument okamžite.

Táto bezplatná knižnica CSS transformuje všetky vaše základné TinyMCE alebo Markdown obsah do formátované a ľahko čitateľné bloky HTML.

Nemusíte vedieť žiadne zložité HTML / CSS na použitie tohto pluginu. jednoducho zabaliť vygenerovaný obsah do divu s triedou .WYSIWYG, a vy ste všetci pripravení.

Skutočnou ťažkosťou je vytvorenie aplikácie, ktorá by automatizovala tento proces alebo pridala túto knižnicu na backend pre administrátorský panel používateľov.

Možnosti sú však nekonečné a mohli by ste to dokonca použiť pre miestne písacie práce ak chcete exportovať svoj obsah od Markdown až po HTML.

Táto knižnica CSS je predvolene podpora pre každú hlavnú značku HTML si možno predstaviť. Zahŕňa to všetky hlavičky, zoznamy, odkazy, predbežné / kódové značky, čísla a dokonca aj polopriesknuté značky a . Je tu a úplný zoznam v GitHub repo, ak si to chcete pozrieť.

Ak definujete svoje vlastné typografické štýly, tieto môžu dokonca prepísať predvolené nastavenia v štýle šablón. Takže môžete získať všetky výhody wysiwyg.css v kombinácii s vlastnými možnosťami písma.

Knižnicu nebolo možné jednoduchšie nastaviť. proste stiahnite kópiu lokálne alebo ťahajte priamo použitím npm install wysiwyg.css

Odtiaľ ste práve zahrnúť súbor CSS v hlave dokumentu a nechajte ho bežať. Bude sa zameriavať iba na obsah vo vnútri kontajnera s triedou .WYSIWYG, takže táto trieda by mala zabaliť akýkoľvek kontajner, ktorý chcete.

Knižnica je stále aktualizované polhodinou, Takže môžeš nájsť najnovšie aktualizácie v hlavnom repo GitHub. A ak máte návrhy alebo nápady na nové aktualizácie, neváhajte a podeľte sa s tvorcom Jeremyho Thomasom na jeho Twitter stránke @jgthms.