Χρησιμοποιώντας τον επεξεργαστή TinyMCE στο WordPress [Οδηγός]

Αν και μπορεί να μην γνωρίζουν το όνομά του, όλοι όσοι χρησιμοποιούν WordPress είναι εξοικειωμένοι με το Εκδότης TinyMCE. Είναι ο συντάκτης που χρησιμοποιείτε όταν δημιουργείτε ή επεξεργάζεστε το περιεχόμενό σας - αυτό με τα κουμπιά για τη δημιουργία τολμηρών κειμένων, επικεφαλίδων, ευθυγράμμισης κειμένου και ούτω καθεξής. Αυτό θα ρίξουμε μια ματιά σε αυτή τη θέση και θα σας δείξω πώς μπορείτε να προσθέσετε λειτουργικότητα και πώς μπορείτε να το χρησιμοποιήσετε στα plugins σας.

Ο επεξεργαστής είναι χτισμένος σε ένα ανεξάρτητο από την πλατφόρμα σύστημα Javascript που ονομάζεται TinyMCE το οποίο χρησιμοποιείται σε πολλά έργα στον Ιστό. Έχει ένα μεγάλο API που το WordPress σας επιτρέπει να αξιοποιήσετε για να δημιουργήσετε τα δικά σας κουμπιά και να τα προσθέσετε σε άλλες θέσεις μέσα στο WordPress.

Προσθήκη διαθέσιμων κουμπιών

Το WordPress χρησιμοποιεί κάποιες επιλογές που είναι διαθέσιμες στο TinyMCE για να απενεργοποιήσετε συγκεκριμένα κουμπιά - όπως ο επάνω, ο δείκτης και οι οριζόντιοι κανόνες - για να καθαρίσετε τη διεπαφή. Μπορούν να προστεθούν χωρίς μεγάλη αναστάτωση.

Το πρώτο βήμα είναι να δημιουργήσετε ένα plugin. Ρίξτε μια ματιά στον κώδικα WordPress για το πώς να το κάνετε αυτό. Με λίγα λόγια, μπορείτε να δημιουργήσετε ένα φάκελο που ονομάζεται 'my-mce-plugin' στο φάκελο wp-content / plugins. Δημιουργήστε ένα αρχείο με το ίδιο όνομα, με επέκταση PHP: my-mce-plugin.php.

Μέσα σε αυτό το αρχείο επικολλήστε τα εξής:

  
Αφού γίνει, θα πρέπει να μπορείτε να επιλέξετε αυτό το plugin στο WordPress και να το ενεργοποιήσετε. Όλος ο κώδικας από εδώ και πέρα ​​μπορεί να επικολληθεί μέσα σε αυτό το αρχείο.
 
Έτσι, πίσω στο επιτρέποντας κάποια ενσωματωμένα αλλά κρυμμένα κουμπιά. Εδώ είναι ο κώδικας που μας επιτρέπει να ενεργοποιήσουμε τα 3 κουμπιά που ανέφερα:
 
 add_filter ('mce_buttons_2', 'my_tinymce_buttons'); λειτουργία my_tinymce_buttons (κουμπιά $) $ κουμπιά [] = 'υπερκείμενο'; $ κουμπιά [] = 'δείκτης'; $ κουμπιά [] = hr; επιστροφή κουμπιών $.  
 
 
 
Για να μάθετε ποια κουμπιά μπορούν να προστεθούν και τι καλούνται, ρίξτε μια ματιά στη λίστα που βρίσκεται στην τεκμηρίωση TinyMCE για στοιχεία ελέγχου.
 
Δημιουργώντας τα δικά μας κουμπιά
 
Τι γίνεται με τη δημιουργία των δικών μας κουμπιών από την αρχή; Πολλοί ιστότοποι χρησιμοποιούν Prism για την επισήμανση κώδικα, η οποία χρησιμοποιεί μια πολύ σημασιολογική προσέγγιση για την επισήμανση των τμημάτων κώδικα. Θα πρέπει να τυλίξετε τον κωδικό σας μέσα  και 
 ετικέτες, κάτι σαν αυτό:
 
$ variable = 'αξία'
 
Ας δημιουργήσουμε ένα κουμπί που θα το κάνει αυτό για εμάς!
 
Πρόκειται για μια διαδικασία τριών βημάτων. Θα χρειαστεί να προσθέσετε ένα κουμπί, να φορτώσετε ένα αρχείο javascript και να γράψετε το περιεχόμενο του αρχείου Javascript. Ας αρχίσουμε!
 
Η προσθήκη του κουμπιού και η φόρτωση του αρχείου Javascript είναι αρκετά απλή, εδώ είναι ο κώδικας που χρησιμοποίησα για να το τελειώσω:
 
 add_filter ('mce_buttons', 'pre_code_add_button'); λειτουργία pre_code_add_button (κουμπιά $) $ κουμπιά [] = 'pre_code_button'; επιστροφή κουμπιών $.  add_filter ('mce_external_plugins', 'pre_code_add_javascript'). συνάρτηση pre_code_add_javascript ($ plugin_array) $ plugin_array ['pre_code_button'] = get_template_directory_uri (). '/tinymce-plugin.js'; επιστροφή $ plugin_array;  
 
Όταν βλέπω tutorials σχετικά με αυτό βλέπω συχνά 2 προβλήματα.
 
Παραλείπουν να το αναφέρω το όνομα κουμπιού που προστέθηκε στη συνάρτηση pre_code_add_button () πρέπει να είναι το ίδιο με το κλειδί για τη μεταβλητή $ plugin_array στη συνάρτηση pre_code_add_javascript (). Θα χρειαστεί επίσης χρησιμοποιήστε την ίδια συμβολοσειρά στη Javascript αργότερα.
 
Μερικά μαθήματα επίσης χρησιμοποιήστε ένα επιπλέον άγκιστρο admin_head για να ολοκληρώσετε τα πάντα. Ενώ αυτό θα λειτουργήσει, δεν απαιτείται και δεδομένου ότι ο Κώδικας δεν το χρησιμοποιεί, θα πρέπει πιθανώς να αποφευχθεί.
 
Το επόμενο βήμα είναι να γράψουμε κάποια Javascript για να εφαρμόσουμε τη λειτουργικότητά μας. Εδώ είναι που έχω χρησιμοποιήσει για να πάρει το 
 και  tags εξόδου ταυτόχρονα.
 
 ('pre_code_button', text: 'Prism', εικονίδιο: false, onclick: function () var selected = tinymce.PluginManager.add tinyMCE.activeEditor.selection.getContent (); var content = '
'+ επιλεγμένο +'
' editor.insertContent (περιεχόμενο + "\ n"); ); ); ) (); 
 
Τα περισσότερα από αυτά υπαγορεύονται από το πώς υποτίθεται ότι ένα πρόσθετο TinyMCE έχει κωδικοποιηθεί, μπορείτε να βρείτε κάποιες πληροφορίες σχετικά με αυτό στην τεκμηρίωση TinyMCE. Προς το παρόν, το μόνο που χρειάζεται να ξέρετε είναι αυτό το όνομα του κουμπιού σας (pre_code_button) πρέπει να χρησιμοποιείται στη γραμμή 2 και 3. Η τιμή του "κειμένου" στη γραμμή 4 θα εμφανιστεί αν δεν χρησιμοποιήσετε ένα εικονίδιο (θα ρίξουμε μια ματιά στην προσθήκη εικονιδίων σε μια στιγμή).
 
Η μέθοδος onclick υπαγορεύει τι κάνει αυτό το κουμπί όταν κάνει κλικ. Θέλω να το χρησιμοποιήσω για να τυλίξω το επιλεγμένο κείμενο μέσα στη δομή HTML που συζητήθηκε νωρίτερα.
 
Το επιλεγμένο κείμενο μπορεί να αρπάζεται χρησιμοποιώντας tinyMCE.activeEditor.selection.getContent (). Στη συνέχεια, τυλίγω τα στοιχεία γύρω από το και το τοποθετώ, αντικαθιστώντας το επισημασμένο περιεχόμενο με το νέο στοιχείο. Έχω προσθέσει επίσης μια νέα γραμμή ώστε να μπορώ εύκολα να αρχίσω να γράφω μετά το στοιχείο κώδικα.
 
Αν θέλετε να χρησιμοποιήσετε ένα εικονίδιο, προτείνω να επιλέξετε ένα από το σύνολο Dashicons που συνοδεύει το WordPress. Το Developer Reference έχει ένα εξαιρετικό εργαλείο για την εύρεση των εικονιδίων και του CSS / HTML / Glyph. Βρείτε το σύμβολο κώδικα και σημειώστε το unicode κάτω από αυτό: f475.
 
Θα χρειαστεί να επισυνάψουμε ένα φύλλο στυλ στο plugin μας και στη συνέχεια να προσθέσουμε ένα απλό στυλ για να εμφανιστεί το εικονίδιό μας. Πρώτα επάνω, ας προσθέσουμε το στυλ μας στο WordPress:
 
 add_action ('admin_enqueue_scripts', 'pre_code_styles'). συνάρτηση pre_code_styles () wp_enqueue_style ('pre_code_button', plugins_url ('/style.css', __FILE__));  
 
Επιστρέψτε στο Javascript και δίπλα στο εικονίδιο στη λειτουργία addButton, αντικαταστήστε “ψευδής” με μια τάξη που θα θέλατε να έχει το κουμπί σας - χρησιμοποίησα pre_code_button.
 
Τώρα δημιουργήστε το αρχείο style.css στον κατάλογο plugin σας και προσθέστε το ακόλουθο CSS:
 
 i.mce-i-pre_code_button: πριν από την font-family: dashicons; περιεχόμενο: "\ f475";  
 
 
 
Σημειώστε ότι το κουμπί θα λάβει το mce-i- [η τάξη σας εδώ] που μπορείτε να χρησιμοποιήσετε για να στοχεύσετε και να προσθέσετε στυλ. Καθορίστε τη γραμματοσειρά ως dashicons και το περιεχόμενο χρησιμοποιώντας την τιμή unicode από νωρίτερα.
 
Χρησιμοποιώντας TinyMCE Αλλού
 
Οι προσθήκες συχνά δημιουργούν textareas για την εισαγωγή μεγαλύτερου κειμένου, δεν θα ήταν υπέροχο αν μπορούσαμε να χρησιμοποιήσουμε και το TinyMCE; Φυσικά μπορούμε, και είναι αρκετά εύκολο. Η συνάρτηση wp_editor () μας επιτρέπει να εξάγουμε ένα οπουδήποτε στο admin, εδώ είναι πώς φαίνεται:
 
wp_editor ($ initial_content, $ element_id, $ ρυθμίσεις);
 
Η πρώτη παράμετρος ορίζει το αρχικό περιεχόμενο για το πλαίσιο. Αυτό θα μπορούσε να χρησιμοποιηθεί για τη φόρτωση μιας επιλογής από τη βάση δεδομένων, για παράδειγμα. Η δεύτερη παράμετρος ορίζει το αναγνωριστικό στοιχείου HTML. Η τρίτη παράμετρος είναι μια σειρά ρυθμίσεων. Για να διαβάσετε σχετικά με τις ακριβείς ρυθμίσεις που μπορείτε να χρησιμοποιήσετε, ρίξτε μια ματιά στην τεκμηρίωση του προγράμματος επεξεργασίας wp.
 
Η πιο σημαντική ρύθμιση είναι η textarea_name. Αυτό καλύπτει την ιδιότητα ονόματος του στοιχείου textarea, επιτρέποντάς σας να αποθηκεύετε εύκολα τα δεδομένα. Δείτε πώς φαίνεται ο συντάκτης μου όταν χρησιμοποιείται σε μια σελίδα επιλογών:
 
$ settings = array ('textarea_name' => 'buyer_bio').
 
wp_editor (get_option ('buyer_bio'), 'buyer_bio', $ ρυθμίσεις).
 
Αυτό είναι ισοδύναμο με το γράψιμο του παρακάτω κώδικα, που θα οδηγούσε σε ένα απλό κείμενο:
 
<?php get_option( 'buyer_bio' ) ?>
 
συμπέρασμα
 
Ο επεξεργαστής TinyMCE είναι ένας φιλικός προς το χρήστη τρόπος για να επιτρέπει στους χρήστες μεγαλύτερη ευελιξία κατά την εισαγωγή περιεχομένου. Επιτρέπει σε όσους δεν θέλουν να μορφοποιήσουν το περιεχόμενό τους μόνο για να το πληκτρολογήσουν και να γίνουν με αυτό, και όσοι θέλουν να κυνηγήσουν γύρω από αυτό για να περάσουν όσο χρόνο χρειάζονται για να το πάρουν ακριβώς.
 
Η δημιουργία νέων κουμπιών και λειτουργιών μπορεί να γίνει με έναν πολύ αρθρωτό τρόπο και μόλις έχουμε ξύσει την επιφάνεια των δυνατοτήτων. Αν γνωρίζετε ένα ιδιαίτερα καλό plugin TinyMCE ή περίπτωση χρήσης που σας βοήθησε πολύ, ενημερώστε μας στα παρακάτω σχόλια!