Hoe stijlen toevoegen aan TinyMCE en Markdown Content
Veel schrijvers geven de voorkeur werken in Markdown omdat het een eenvoudiger taal is met minder hordes om te beklimmen. Toegegeven, het is verre van perfect, maar het biedt een schonere weergave van uw tekst met het gemak van exporteren naar HTML.
Helaas zijn de standaard Markdown-stijlen meestal behoorlijk saai. Maar met de wysiwyg.css bibliotheek, jij kan hebben een levendig document in geen tijd.
Deze gratis CSS-bibliotheek transformeert al je standaard TinyMCE- of Markdown-inhoud naar opgemaakte, gemakkelijk leesbare HTML-blokken.
U hoeft geen complexe HTML / CSS te kennen om deze plug-in te gebruiken. eenvoudigweg verpak de gegenereerde inhoud in een div met de klas .wysiwyg, en je bent er helemaal klaar voor.
De echte moeilijkheid is het bouwen van een app die dit proces zou automatiseren, of het toevoegen van deze bibliotheek aan de backend voor een paneel voor gebruikersbeheer.
De mogelijkheden zijn echter eindeloos en je zou dit zelfs kunnen gebruiken voor lokaal schrijfwerk als u uw inhoud liever exporteert van Markdown tot HTML.
Standaard heeft deze CSS-bibliotheek ondersteuning voor elke grote HTML-tag denkbaar. Dit omvat alle headers, lijsten, links, pre- / codetags, figuren en zelfs semi-obscure tags zoals en . Er is een volle lijst in de GitHub repo als je het wilt bekijken.
Als u uw eigen typografische stijlen definieert, kunnen deze zelfs herschrijf de standaardinstellingen in het stylesheet. U kunt dus alle voordelen van wysiwyg.css verkrijgen gemengd met je eigen lettertype-keuzes.
De bibliotheek kan ook niet eenvoudiger worden ingesteld. Net lokaal een kopie downloaden of trek het direct gebruik makend van npm install wysiwyg.css
Vanaf daar, je gewoon inclusief het CSS-bestand in je documentkop en laat hem lopen. Het richt zich alleen op de inhoud in een container met de klas .wysiwyg, dus deze klasse moet elke gewenste verpakking omwikkelen.
De bibliotheek is nog steeds bezig semi-frequent bijgewerkt, dus je kunt het vind recente updates in de hoofdrepos van GitHub. En als je suggesties of ideeën hebt voor nieuwe updates, kun je deze delen met de maker Jeremy Thomas op zijn Twitter-pagina @jgthms.
