Come aggiungere stili a TinyMCE e Markdown Content
Molti scrittori preferiscono lavorando in Markdown perché è un linguaggio più semplice con meno ostacoli da scalare. Certo è tutt'altro che perfetto, ma offre a vista più pulita del tuo testo con la facilità di esportando in HTML.
Sfortunatamente, gli stili di Markdown predefiniti sono solitamente piuttosto noiosi. Ma con il libreria wysiwyg.css, Puoi avere un documento vibrante in nessun tempo.
Questa libreria CSS gratuita trasforma tutti i contenuti di base di TinyMCE o Markdown in blocchi di HTML formattati e facili da leggere.
Non è necessario conoscere alcun complesso HTML / CSS per utilizzare questo plugin. Semplicemente avvolgere il contenuto generato in un div con la classe .wysiwyg
, e sei tutto pronto.
La vera difficoltà sta nella creazione di un'app che automatizzi questo processo o che aggiunga questa libreria al back-end per un pannello di amministrazione utente.
Tuttavia, le possibilità sono infinite e potresti persino usarlo per lavori di scrittura locali se preferisci esportare i tuoi contenuti da Markdown a HTML.
Per impostazione predefinita, questa libreria CSS ha supporto per tutti i principali tag HTML immaginabile. Questo include tutte le intestazioni, elenchi, link, tag pre / code, figure e anche tag semi-oscuri come e
. C'è un lista completa nel repository GitHub se si desidera verificarlo.
Se definisci i tuoi stili tipografici, questi possono anche riscrivi le impostazioni predefinite nel foglio di stile. Quindi puoi ottenere tutti i vantaggi di wysiwyg.css mescolato con le tue scelte di carattere.
La libreria non potrebbe essere più semplice da configurare. Appena scarica una copia localmente o tiralo direttamente utilizzando npm installa wysiwyg.css
Da lì, tu solo includere il file CSS nella testa del tuo documento, e fallo correre. Mirerà solo al contenuto all'interno di un contenitore con la classe .wysiwyg
, quindi questa classe dovrebbe avvolgere qualsiasi contenitore tu voglia.
La biblioteca è ancora in corso aggiornato semi-frequentemente, così puoi trova aggiornamenti recenti nel principale repo GitHub. E se hai suggerimenti o idee per nuovi aggiornamenti sentiti libero di condividere con il creatore Jeremy Thomas sulla sua pagina Twitter @jgthms.