Πώς να προσθέσετε στυλ στο περιεχόμενο TinyMCE & Markdown

Πολλοί συγγραφείς προτιμούν που εργάζονται στο Markdown γιατί είναι μια απλούστερη γλώσσα με λιγότερα εμπόδια για να αναρριχηθεί. Χορηγεί ότι είναι μακριά από τέλεια, αλλά προσφέρει ένα καθαρότερη προβολή του κειμένου σας με την ευκολία του εξαγωγή σε HTML.

Δυστυχώς, τα προεπιλεγμένα στυλ Markdown είναι συνήθως αρκετά βαρετά. Αλλά με το wysiwyg.css βιβλιοθήκη, μπορείς έχετε ένα ζωντανό έγγραφο σε χρόνο μηδέν.

Αυτή η ελεύθερη βιβλιοθήκη CSS μετατρέπει όλα τα βασικά περιεχόμενα TinyMCE ή Markdown μορφοποιημένα, ευανάγνωστα μπλοκ HTML.

Δεν χρειάζεται να γνωρίζετε κανένα σύνθετο HTML / CSS για να χρησιμοποιήσετε αυτό το πρόσθετο. Απλά τυλίξτε το περιεχόμενο που δημιουργείται σε ένα div με την τάξη .wysiwyg, και είστε έτοιμοι.

Η πραγματική δυσκολία είναι η δημιουργία μιας εφαρμογής που θα αυτοματοποιήσει αυτή τη διαδικασία ή την προσθήκη αυτής της βιβλιοθήκης στο backend για ένα πάνελ διαχείρισης χρήστη.

Ωστόσο, οι δυνατότητες είναι ατελείωτες και θα μπορούσατε να το χρησιμοποιήσετε για την τοπική εργασία γραφής εάν προτιμάτε να εξάγετε το περιεχόμενό σας από Markdown σε HTML.

Από προεπιλογή, αυτή η βιβλιοθήκη CSS έχει υποστήριξη για κάθε σημαντική ετικέτα HTML νοητός. Αυτό περιλαμβάνει όλες τις κεφαλίδες, λίστες, συνδέσμους, ετικέτες προ / κωδικού, στοιχεία και ακόμη και ημι-σκοτεινές ετικέτες όπως και . Υπάρχει μια πλήρη λίστα στο GitHub repo, αν θέλετε να το ελέγξετε.

Αν καθορίσετε τα δικά σας τυπογραφικά στυλ, αυτά μπορούν ακόμη και επανεγγραφή των προεπιλεγμένων ρυθμίσεων στο φύλλο στυλ. Έτσι μπορείτε να πάρετε όλα τα οφέλη του wysiwyg.css αναμειγνύονται με τις δικές σας επιλογές γραμματοσειράς.

Η βιβλιοθήκη δεν μπορούσε να είναι ευκολότερη στη ρύθμιση ούτε. Μόλις κατεβάστε ένα αντίγραφο τοπικά ή τραβήξτε την απευθείας χρησιμοποιώντας npm install wysiwyg.css

Από εκεί, απλά συμπεριλάβετε το αρχείο CSS στο κεφάλι του εγγράφου και αφήστε το να τρέξει. Θα στοχεύσει μόνο τα περιεχόμενα μέσα σε ένα δοχείο με την τάξη .wysiwyg, έτσι αυτή η τάξη πρέπει να τυλίξει ό, τι κιβώτιο που θέλετε.

Η βιβλιοθήκη είναι ακόμα ενημερώθηκε μερικώς, ώστε να μπορείτε να βρείτε πρόσφατες ενημερώσεις στο κύριο GitHub repo. Και αν έχετε προτάσεις ή ιδέες για νέες ενημερώσεις μην διστάσετε να μοιραστείτε με τον δημιουργό Jeremy Thomas στη σελίδα Twitter του @jgthms.