Κατά τη γνώμη μου, το CKEditor είναι ένας από τους καλύτερους συντάκτες wysiwyg για ιστότοπους. Πρόσφαταέχουν εμφανιστεί πολλές ασυναρτησίες για να απλοποιήσει τη ζωή του χρήστη, κάτι που τελικά παρεμποδίζει, για παράδειγμα το ACF. Ξέρω ήδη πώς να το επεξεργαστώ και να το απενεργοποιήσω. Αλλά ας επιστρέψουμε στο θέμα του άρθρου μας: πώς να εγκαταστήσετε πρόσθετα στο CKEditor.

Εδώ βλέπω δύο προσεγγίσεις.

Αρχικά, πηγαίνουμε στον ιστότοπο του συντάκτη και αναδημιουργούμε το CKeditor για εμάς, συμπεριλαμβανομένων των πρόσθετων που χρειαζόμαστε. Αυτό γίνεται ως εξής. Πηγαίνουμε στον ιστότοπο ckeditor.com, πηγαίνουμε στην καρτέλα λήψης. Στη συνέχεια, επιλέξτε Ή επιτρέψτε μου να προσαρμόσω το CKEditor

Αλλά σε αυτήν την περίπτωση, δεν εμφανίζονται όλα τα πρόσθετα. Για να συμπεριλάβετε τυχόν νέα ή ειδικά πρόσθετα στο build σας, θα πρέπει να δημιουργήσετε το build σας λίγο διαφορετικά. Μεταβείτε στα Πρόσθετα -> Προσθήκες και δείτε το παρακάτω κινούμενο μενού στα δεξιά

Όταν κάνετε κλικ στο κουμπί προσθήκη στον επεξεργαστή μου, το πρόσθετο προστίθεται στη συναρμολόγηση. Όταν τελειώσετε, κάντε κλικ στην επιλογή Δημιουργία του επεξεργαστή μου και αντικαταστήστε τον ενσωματωμένο επεξεργαστή μας με τον δημιουργημένο.

Η δεύτερη προσέγγιση είναι για όσους ενδιαφέρονται να εμβαθύνουν στον κώδικα οι ίδιοι.

Στον ιστότοπο ckeditor.com, μεταβείτε στην ενότητα πρόσθετα->προσθήκες και κάντε κλικ στην απαιτούμενη προσθήκη.

Επιλέξτε Λήψη και ακολουθήστε τις οδηγίες από τον ιστότοπο. Ως επί το πλείστον, είτε καταλήγουν στο γεγονός ότι πρέπει να εγκαταστήσετε εξαρτήσεις για ένα δεδομένο πρόσθετο και να καταχωρήσετε το ίδιο το πρόσθετο στο πεδίο αρχείο ρυθμίσεων config.js και την προσθήκη από την οποία εξαρτάται το πρόγραμμα εγκατάστασης, διαχωρισμένα με κόμμα, για παράδειγμα,

Config.extraPlugins = "codemirror,youtube,imagerotate";

Το CKEditor είναι ένα έτοιμο προς χρήση πρόγραμμα επεξεργασίας κειμένου HTML που έχει σχεδιαστεί για να απλοποιεί τη δημιουργία περιεχομένου ιστοσελίδας. Αυτό είναι ένα πρόγραμμα επεξεργασίας WYSIWYG που παρέχει λειτουργίες επεξεργασίας κειμένου απευθείας στις ιστοσελίδες σας.

Το CKEditor είναι μια εφαρμογή ανοιχτού κώδικα πηγαίος κώδικας, δηλαδή μπορεί να αλλάξει κατόπιν αιτήματός σας. Η χρησιμότητά του προέρχεται από μια ενεργή κοινότητα που δεν σταματά ποτέ να αναπτύσσει εφαρμογές με δωρεάν πρόσθετα και μια διαφανή διαδικασία ανάπτυξης.

3-Κατεβάστε το CKEditor

Έχετε 4 επιλογές για τη λήψη του CKEditor.

Λήψη αποτελέσματος:

Μπορείτε να δείτε παραδείγματα του CKEditor στον φάκελο δείγματα:

4- Βασικά παραδείγματα:

Όλα τα παραδείγματα αυτού του άρθρου περιέχονται στον φάκελο δείγματαστο CKEditor που κατεβάσατε. Αλλά θα προσπαθήσω να το κάνω πιο εύκολο για να σας είναι πιο εύκολο.

Δημιουργήστε ένα φάκελο παραδείγματα μου, τα παραδείγματα σε αυτό το άρθρο θα βρίσκονται σε αυτόν τον φάκελο.

4.1- Αντικαταστήστε τα στοιχεία Textarea χρησιμοποιώντας JavaScript

Ένα απλό παράδειγμα είναι η χρήση του CKEditor.replace(..) για αντικατάσταση μέσω του CKEditor .

replacebycode.html

Αντικαταστήστε το Textarea με κώδικα Αντικαταστήστε τα στοιχεία Textarea χρησιμοποιώντας κώδικα JavaScript

Γεια σου CKEditor

CKEDITOR.replace("editor1");

Δείτε παράδειγμα:

Αποτελέσματα εκτέλεσης του παραδείγματος:

4.2- Αντικατάσταση στοιχείων textarea με κλάση ονόματος

Με την ιδιότητα όνομα,και το class="ckeditor" θα αντικατασταθεί αυτόματα από το CKEditor.

Κείμενο

replacebyclass.html

Αντικαταστήστε το Textareas με το όνομα κλάσης Αντικαταστήστε το Textarea Elements με το όνομα κλάσης

Γεια σου CKEditor

Εκτελώντας το παράδειγμα:

4.3- Δημιουργία CKEditor με jQuery

Ένα παράδειγμα δημιουργίας CKEditor χρησιμοποιώντας JQuery.

Προσαρμογέας jQuery - CKEditor Sample $(document).ready(function() ( $("#editor1").ckeditor(); )); συνάρτηση setValue() ( $("#editor1").val($("input#val").val()); ) Δημιουργία συντακτών με το jQuery

Γεια σου CKEditor

Όπως μπορείτε να δείτε, οι διαμορφώσεις ορίζονται από ένα απλό αντικείμενο JavaScript που μεταβιβάζεται στη μέθοδο create().

Αφαίρεση χαρακτηριστικών

Οι εκδόσεις έρχονται με όλες τις δυνατότητες που περιλαμβάνονται στο πακέτο διανομής ενεργοποιημένες από προεπιλογή. Ορίζονται ως πρόσθετα για το CKEditor.

Σε ορισμένες περιπτώσεις, μπορεί να χρειαστεί να έχετε διαφορετικές ρυθμίσεις επεξεργασίας στην εφαρμογή σας, όλες βασισμένες στην ίδια έκδοση. Για αυτόν τον σκοπό, χρειάζεσαιγια να ελέγξετε τα πρόσθετα που είναι διαθέσιμα στο πρόγραμμα επεξεργασίας κατά το χρόνο εκτέλεσης.

Στο παρακάτω παράδειγμα, οι προσθήκες Επικεφαλίδας και Σύνδεσης καταργούνται:

// Καταργήστε μερικά πρόσθετα από την προεπιλεγμένη ρύθμιση. ClassicEditor .create(document .querySelector("#editor" ), ( removePlugins : [ "Heading" , "Link" ], γραμμή εργαλείων : [ "bold" , "italic" , "bulletedList" , "numberedList" , "blockQuote" ] )).catch(error => ( κονσόλα .log(error); ));

Να είστε προσεκτικοί όταν αφαιρείτε πρόσθετα από εκδόσεις του CKEditor χρησιμοποιώντας το config.removePlugins . Εάν οι προσθήκες που καταργήθηκαν παρείχαν κουμπιά γραμμής εργαλείων, η προεπιλεγμένη διαμόρφωση γραμμής εργαλείων που περιλαμβάνεται σε μια έκδοση θα καταστεί άκυρη. Σε αυτήν την περίπτωση, πρέπει να παρέχετε την ενημερωμένη διαμόρφωση της γραμμής εργαλείων όπως στο παραπάνω παράδειγμα.

Λίστα προσθηκών

Κάθε έκδοση έχει έναν αριθμό από πρόσθετα διαθέσιμα. Μπορείτε εύκολα να παραθέσετε όλα τα πρόσθετα που είναι διαθέσιμα στο build σας:

ClassicEditor.builtinPlugins.map(plugin => plugin.pluginName);

Προσθήκη σύνθετων χαρακτηριστικών

Καθώς οι εκδόσεις του CKEditor δεν περιλαμβάνουν όλες τις πιθανές δυνατότητες, ο μόνος τρόπος για να προσθέσετε περισσότερες δυνατότητες σε αυτές είναι να δημιουργήσετε μια προσαρμοσμένη έκδοση .

Προσθήκη απλών (αυτόνομων) λειτουργιών

Υπάρχει μια εξαίρεση σε κάθε κανόνα. Παρόλο που είναι αδύνατο να προσθέσετε προσθήκες που έχουν εξαρτήσεις στο @ckeditor/ckeditor5-core ή στο @ckeditor/ckeditor5-engine (που περιλαμβάνει σχεδόν όλα τα υπάρχοντα επίσημα πρόσθετα) χωρίς να ξαναχτίσετε το build, εξακολουθείτε να είναι δυνατή η προσθήκη απλών προσθηκών χωρίς εξάρτηση .

εισαγωγή ClassicEditor από το "@ckeditor/ckeditor5-build-classic" ; συνάρτηση MyUploadAdapterPlugin ( editor ) ( editor.plugins.get("FileRepository" ).createUploadAdapter = λειτουργία ( loader ) ( // ...); ) // Φόρτωση του προσαρμοσμένου προσαρμογέα μεταφόρτωσης ως πρόσθετο του προγράμματος επεξεργασίας. ClassicEditor .create(document .querySelector("#editor" ), ( extraPlugins : [ MyUploadAdapterPlugin ], // ... )) .catch(error => ( console .log(error); )); Ρύθμιση γραμμής εργαλείων

Σε εκδόσεις που περιέχουν γραμμές εργαλείων ορίζεται μια βέλτιστη προεπιλεγμένη διαμόρφωση για αυτό. Μπορεί να χρειαστείτε μια διαφορετική διάταξη γραμμής εργαλείων, ωστόσο, και αυτό μπορεί να επιτευχθεί μέσω της διαμόρφωσης.

Κάθε πρόγραμμα επεξεργασίας μπορεί να έχει διαφορετικό σχήμα διαμόρφωσης γραμμής εργαλείων, επομένως συνιστάται να ελέγξετε την τεκμηρίωσή του. Σε κάθε περίπτωση, το ακόλουθο παράδειγμα μπορεί να σας δώσει μια γενική ιδέα:

ClassicEditor .create(document .querySelector("#editor" ), ( γραμμή εργαλείων : [ "bold" , "italic" , "link" ] )) .catch(error => (console .log(error); ));

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

Καταχώριση διαθέσιμων στοιχείων

Μπορείτε να χρησιμοποιήσετε το ακόλουθο απόσπασμα για να ανακτήσετε όλα τα στοιχεία της γραμμής εργαλείων που είναι διαθέσιμα στο πρόγραμμα επεξεργασίας σας:

Πίνακας .from(editor.ui.componentFactory.names());

Χρησιμοποίησα το BUEditor στον ιστότοπό μου - ένα απλό, βολικό πρόγραμμα επεξεργασίας, αλλά δεν είναι πολύ βολικό για τους χρήστες. Συχνά σκεφτόμουν να εγκαταστήσω το CKEditor, αλλά μου φαινόταν σαν κάποιο τέρας, αλλά στην πραγματικότητα όλα αποδείχτηκαν όχι τόσο τρομακτικά.

Διαβάστε πώς να εγκαταστήσετε τη μονάδα.

Αφού συνδεθείτε μέσω της ενότητας σας, στη σελίδα admin/config/content/ckeditor/edit/profile_assignment στην καρτέλα ΕΜΦΑΝΙΣΗ ΤΟΥ ΣΥΝΤΑΚΤΗ, Στο κεφάλαιο ΠρόσθεταΘα εμφανιστεί ένα πλαίσιο ελέγχου ενεργοποίησης. Ενεργοποιήστε, αποθηκεύστε, ελέγξτε.

3. Εισαγωγή συνδέσμων. Εκτός του πλαισίου, το πλαίσιο διαλόγου εισαγωγής συνδέσμου περιέχει μια δέσμη περιττών και ασαφών στοιχείων. Το αντικαθιστούμε με το πρόσθετο Simple link. Πώς να εγκαταστήσετε, δείτε το βήμα 2. Σύνδεση (δείτε σημείο 1):

Config.extraPlugins = "SimpleLink";

Θα εμφανιστεί επίσης ένα νέο εικονίδιο προσθήκης (κουμπί).

4. Εισαγωγή εικόνων. Εδώ όλα είναι ίδια με τους συνδέσμους· μπορείτε να εγκαταστήσετε το πρόσθετο Simple Image για να εισάγετε εικόνες μέσω συνδέσμων.

Config.extraPlugins = "SimpleImage";

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

Το μόνο που θέλω να προσθέσω είναι ότι το πρόσθετο Enhanced Image απαιτεί δύο ακόμη πρόσθετα Widget και Lineutils.

Δεν μπορούσα να καταλάβω γιατί η προσθήκη δεν ξεκίνησε μέχρι που κοίταξα το αρχείο καταγραφής

5. Εμφάνιση. Το δέρμα Moono χρησιμοποιείται από προεπιλογή, αλλά ήθελα να φέρω την εμφάνιση στην εμφάνιση του BUEditor.

έτσι έμοιαζε το BUEditor

7. Placeholder. Για να προσθέσετε ένα σύμβολο κράτησης θέσης, εγκαταστήστε το πρόσθετο (δείτε σημείο 2) Βοήθεια ρύθμισης παραμέτρων. Σύνδεση (δείτε σημείο 1):

Config.extraPlugins = "confighelper"; config.placeholder = "Το κείμενό μας"; // текст нашего placeholder !}

8. Χαμόγελα. Το πρόσθετο Insert Smiley είναι υπεύθυνο για τα χαμόγελα στο CKEditor· περιλαμβάνεται στο τυπικό πακέτο - Πλήρες πακέτο.

Έτσι μοιάζουν τα smileys out of the box:

Για να τα αντικαταστήσετε με τα δικά σας, πρέπει να καθορίσετε τη διαδρομή προς το φάκελο με εικόνες smiley_path στη διαμόρφωση (δείτε βήμα 1):

Config.smiley_path = "/sites/default/files/smileys/";

Εισαγάγετε τα ονόματα των αρχείων (εικόνων) που θα εμφανίζονται smiley_images :

Config.smiley_images = ["smile_1.png","smile_2.png"];

Και περιγραφή (περιγραφή αιώρησης) smiley_descriptions

Config.smiley_descriptions = ["description-1", "description-2"];

Μπορείτε επίσης να καθορίσετε πόσες στήλες θα εμφανίζονται τα smileys (προεπιλογή: 8) smiley_columns

Config.smiley_columns = 6;

Να τι πήρα

9. Ορθογραφικός έλεγχος προγράμματος περιήγησης. Όπως έγραψε το UksusoFF στο CKEditor, ο ορθογραφικός έλεγχος του προγράμματος περιήγησης είναι απενεργοποιημένος. Για να απενεργοποιήσετε αυτήν την απενεργοποίηση (λίγο ταυτολογία), πρέπει να γράψετε στη διαμόρφωση:

Config.disableNativeSpellChecker = false;

10. Μενού περιβάλλοντος. Στο CKEditor, όταν πατάτε το RMB, ανοίγει ένα μενού περιβάλλοντος και όχι το εγγενές μενού του προγράμματος περιήγησης

Επιλογές λήψης

Υπάρχουν πολλές επιλογές για λήψη των εκδόσεων CKEditor 5:

Αφού κατεβάσετε το πρόγραμμα επεξεργασίας, μεταβείτε στον οδηγό Basic API για να δείτε πώς να δημιουργήσετε επεξεργαστές.

CDN

Οι εκδόσεις μπορούν να φορτωθούν σε σελίδες απευθείας από το , το οποίο είναι βελτιστοποιημένο για παγκόσμια εξαιρετικά γρήγορη παράδοση περιεχομένου. Όταν χρησιμοποιείτε το CDN, δεν χρειάζεται πραγματικά λήψη.

npm

Όλες οι εκδόσεις κυκλοφορούν στο npm. Χρησιμοποιήστε αυτόν τον σύνδεσμο αναζήτησης για να δείτε όλα τα επίσημα πακέτα έκδοσης που είναι διαθέσιμα σε npm.

Η εγκατάσταση μιας κατασκευής με npm είναι τόσο απλή όσο η κλήση μιας από τις ακόλουθες εντολές στο έργο σας:

Npm install --save @ckeditor/ckeditor5-build-classic # Ή: npm install --save @ckeditor/ckeditor5-build-inline # Ή: npm install --save @ckeditor/ckeditor5-build-balloon # Ή: npm εγκατάσταση --save @ckeditor/ckeditor5-build-balloon-block # Ή: npm install --save @ckeditor/ckeditor5-build-decoupled-document

Στη συνέχεια, το CKEditor θα είναι διαθέσιμο στη διεύθυνση node_modules/@ckeditor/ckeditor5-build-/build/ckeditor.js. Μπορεί επίσης να εισαχθεί απευθείας στον κώδικά σας μέσω του require("@ckeditor/ckeditor5-build-") .

Λήψη zip

Μεταβείτε στο και κατεβάστε την προτιμώμενη έκδοση. Για παράδειγμα, μπορείτε να κάνετε λήψη του αρχείου ckeditor5-build-classic-1.0.0.zip για την έκδοση του Classic Editor.

Εξαγάγετε το αρχείο .zip σε έναν αποκλειστικό κατάλογο μέσα στο έργο σας. Συνιστάται να συμπεριλάβετε την έκδοση του προγράμματος επεξεργασίας στο όνομα του καταλόγου για να διασφαλίσετε τη σωστή ακύρωση της προσωρινής μνήμης μόλις εγκατασταθεί μια νέα έκδοση του CKEditor.

Συμπεριλαμβανόμενα αρχεία

• ckeditor.js – Το έτοιμο προς χρήση πακέτο επεξεργασίας, που περιέχει τον επεξεργαστή και όλα τα πρόσθετα.
• ckeditor.js.map – Ο χάρτης πηγής για το πακέτο επεξεργασίας.
• μεταφράσεις/ – Μεταφράσεις διεπαφής χρήστη του επεξεργαστή (δείτε Ρύθμιση γλώσσας διεπαφής χρήστη).
• README.md και LICENSE.md

Φόρτωση του API

Αφού κατεβάσετε και εγκαταστήσετε ένα build CKEditor 5 στην εφαρμογή σας, ήρθε η ώρα να κάνετε το API του επεξεργαστή διαθέσιμο στις σελίδες σας. Για το σκοπό αυτό, αρκεί να φορτώσετε το σενάριο σημείου εισόδου API:

Μόλις φορτωθεί το σενάριο του CKEditor, μπορείτε