Οι καλύτερες εφαρμογές ανοιχτού κώδικα για επεξεργασία HTML WYSIWYG

στον Κόσμο Κωδικοποίηση και προγραμματισμός Υπάρχουν δύο τύποι επεξεργασίας κώδικα - απλός επεξεργαστής Βασισμένο σε κείμενο και WYSIWYG (συντομογραφία του wizzy-wig ή αυτό που βλέπετε είναι αυτό που παίρνετε). Στο προηγούμενο άρθρο μας, συζητήσαμε μερικά από τα Οι καλύτερες εφαρμογές επεξεργασίας HTML ανοιχτού κώδικα Όπου γράφετε τον κωδικό χειροκίνητα. Αν και δεν υπάρχουν προβλήματα με τους επεξεργαστές κειμένου HTML, είναι παλιό σχολείο. Και εκεί είναι που μπαίνει το πρόγραμμα επεξεργασίας φωτογραφιών του WYSIWYG. Έχει γίνει εξαιρετικά δημοφιλής τα τελευταία χρόνια. διαφορετικός Προγραμματισμός HTML Πραγματικά και άλλα τεχνικά πράγματα Για να δημιουργήσετε τη δική σας ιστοσελίδα Οι εφαρμογές επεξεργασίας HTML WYSIWYG παρέχουν οπτικές επιλογές Για να δημιουργήσετε έναν ιστότοπο Χωρίς καμία γνώση προγραμματισμού (θυμηθείτε Διαφήμιση Wix Αυτό είναι καταπληκτικό)

Το WYSIWYG HTML Editor έχει πολλά πλεονεκτήματα σε σχέση με αυτό Εφαρμογές επεξεργασίας που βασίζονται σε κείμενο. Για να ξεκινήσετε, μπορείτε να δημιουργήσετε έναν ιστότοπο με WYSIWYG Συντάκτες Ακόμα κι αν δεν ξέρετε πώς να προγραμματίσετε. Το μόνο που έχετε να κάνετε είναι να σύρετε και να αποθέσετε τα στοιχεία στο πρόγραμμα επεξεργασίας και μόλις τελειώσετε απλώς αντιγράψτε τον κώδικα. Ωστόσο, η εύρεση ενός καλού προγράμματος επεξεργασίας HTML WYSIWYG δεν είναι εύκολη, ειδικά αν χρειάζεται να είναι ανοιχτού κώδικα και δωρεάν. Έτσι, σε αυτό το άρθρο, συγκεντρώσαμε τις καλύτερες εφαρμογές επεξεργασίας HTML WYSIWYG ανοιχτού κώδικα που μπορούμε να βρούμε. ας αρχίσουμε. εμείς;

Οι καλύτερες εφαρμογές επεξεργασίας HTML WYSIWYG ανοιχτού κώδικα

1. Πελ

Το Pell είναι ίσως το μικρότερο και απλούστερο πρόγραμμα επεξεργασίας WYSIWYG που θα συναντήσετε. Είναι κυριολεκτικά 1.38KB σε μέγεθος!

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

Θετικά:

  1. Η μικρότερη και ελαφρύτερη εφαρμογή WYSIWYG
  2. Χωρίς εξαρτήσεις
  3. Προσαρμόστε εύκολα

μειονεκτήματα:

  1. Χωρίς επεξεργασία HTML
  2. Εικόνες μόνο μέσω συνδέσμων

Ετυμηγορία:

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

δοκιμάστε Πέλ Εδώ

2. OpenWYSIWYG

Το OpenWYSIWYG είναι ένα πλούσιο πρόγραμμα επεξεργασίας κειμένου με πολλά προγράμματα περιήγησης, πλήρως κωδικοποιημένο σε JavaScript. Αντιγράφοντας μόνο μερικές γραμμές κώδικα, μπορείτε να μετατρέψετε οποιονδήποτε Ένας ισχυρός επεξεργαστής WYSIWYG για το OpenWYSIWYG.

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

Ένα άλλο υπέροχο πράγμα για το OpenWYSIWYG είναι ότι με όλες τις οπτικές επιλογές, μπορείτε ακόμα να προβάλετε τον ακατέργαστο κώδικα HTML και να κάνετε αλλαγές στον κώδικα.

Θετικά:

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

μειονεκτήματα:

  1. Δεν έχει ενημερωθεί εδώ και μερικά χρόνια

Ετυμηγορία:

Γραμμένο σε JavaScript, το OpenWYSIWYG θα πρέπει να λειτουργεί με οποιαδήποτε άλλη γλώσσα προγραμματισμού Ιστού και αν ψάχνετε για κάτι λίγο πιο ισχυρό από το Pell για να συμπεριλάβετε στην εφαρμογή Ιστού σας, αυτή είναι μια εξαιρετική επιλογή.

OpenWYSIWYG Η επίδειξη είναι διαθέσιμη εδώ

3. TinyMCE (Έκδοση Κοινότητας)

Ο επόμενος επεξεργαστής στη λίστα μας είναι το TinyMCE, το πλήρες πρόγραμμα επεξεργασίας WYSIWYG για τον ιστό. Είναι επίσης γραμμένο εξ ολοκλήρου σε JavaScript και παρέχει διεπαφή χρήστη και εμπειρία όπως οι περισσότεροι επεξεργαστές κειμένου.

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

Οι προγραμματιστές έχουν διατηρήσει τις τιμές των premium μοντέλων ανάλογα με τον αριθμό των χρηστών που έχετε, δηλαδή όσο περισσότερους χρήστες έχετε, τόσο περισσότερα πρέπει να πληρώσετε. Ορισμένες από τις premium λειτουργίες περιλαμβάνουν τη μεταφόρτωση και τη διαχείριση όλων των αρχείων σας από το Google Drive ή το Microsoft Azure αντί από τον δικό σας διακομιστή, υποστήριξη για προσθήκες, ορθογραφικό έλεγχο, έλεγχο συνδέσμων και επίσης premium τεχνική υποστήριξη.

Θετικά:

  1. Υποστήριξη προσθηκών
  2. Διαχείριση αρχείων
  3. Τεχνική υποστήριξη
  4. Επεξεργαστής κώδικα στυλ IDE για HTML

μειονεκτήματα:

  1. Η τιμή
  2. Όχι εντελώς ανοιχτού κώδικα

Ετυμηγορία:

Το TinyMCE με την επιλογή εύκολης ενσωμάτωσης, το εύχρηστο περιβάλλον χρήστη και τις πολλές δυνατότητες, συμπεριλαμβανομένης της τεχνικής υποστήριξης, είναι ένα πλήρες πακέτο. Εάν θέλετε απλώς να χρησιμοποιήσετε τον επεξεργαστή ανοιχτού κώδικα WYSIWYG HTML με πιο πλούσιο σε χαρακτηριστικά και δεν έχετε κανένα πρόβλημα να ξοδέψετε χρήματα, το TinyMCE είναι ο καλύτερος τρόπος. Προσφέρουν επίσης μια δωρεάν δοκιμή ενός μήνα για το Pro μοντέλο τους που μπορείτε πάντα να ελέγξετε!

δοκιμάστε Επίδειξη TinyMCE Εδώ

4. Judit

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

Το Jodit είναι ένας από τους πιο φιλικούς προς το χρήστη συντάκτες WYSIWYG εκεί έξω, με επιλογές όπως αντιγραφή, επικόλληση και απόθεση εικόνας. Μπορείτε επίσης να επισυνάψετε ή να ενσωματώσετε βίντεο YouTube ή Vimeo μέσω ενός συνδέσμου.

Το καλύτερο πράγμα που μου άρεσε στο Jodit είναι ότι συνοδεύεται από ένα πρόγραμμα επεξεργασίας ACE εκτός συσκευασίας και με ένα κουμπί, μπορείτε να κάνετε εναλλαγή μεταξύ του πραγματικού εικονιδίου και της λειτουργίας προεπισκόπησης. Μπορείτε να κάνετε αλλαγές απευθείας στον κώδικα ή απλώς να τον αντιγράψετε και να τον επικολλήσετε στον ιστότοπό σας.

Θετικά:

  1. Ελαφρύ, χωρίς βιβλιοθήκες
  2. Σύρετε και αποθέστε
  3. ACE Editor out of the box
  4. Επιλογή τεχνικής υποστήριξηςεπί πληρωμή)

Ετυμηγορία:

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

δοκιμάστε Judit 

5. Summernote

Το Summernote είναι ένα πολύ απλό πρόγραμμα επεξεργασίας WYSIWYG που βασίζεται σε jQuery και βασίζεται στο Bootstrap. Δεδομένου ότι υποστηρίζει το Bootstrap, μπορείτε να χρησιμοποιήσετε όλα τα στυλ και τα θέματα που υποστηρίζονται στον επεξεργαστή σας από το Bootswatch.

Το ίδιο το πρόγραμμα επεξεργασίας έχει ένα πολύ καθαρό και ελάχιστο περιβάλλον χρήστη και μπορείτε ακόμη και να επεξεργαστείτε ή να προσθέσετε επιλογές μορφοποίησης σύμφωνα με τις ανάγκες σας. Με τη λειτουργία Air-mode του Summernote, μπορείτε ακόμη και να αποκρύψετε ολόκληρη τη γραμμή εργαλείων και να επεξεργαστείτε το έγγραφό σας με ιλιγγιώδη ταχύτητα. Μαζί με όλες τις βασικές επιλογές μορφοποίησης, μεταφορά και απόθεση, αντιγραφή/επικόλληση εικόνων, μετατρέπει αυτόματα όλες τις εικόνες σε base64, ώστε να μην χρειάζεται να εφαρμόσετε καθόλου επεξεργασία εικόνας.

Για μένα, το καλύτερο πράγμα για το Summernote είναι η εργατική ομάδα προγραμματιστών πίσω από αυτό που ακούει πάντα την κοινότητα και προσθέτει νέες αλλαγές, όπως υποστήριξη plug-in, έκδοση lite ή vanilla του Summernote που δεν απαιτεί Bootstrap.

Θετικά:

  1. Ελάχιστη καμπύλη μάθησης
  2. Λειτουργία αέρα για γρήγορη απελευθέρωση
  3. Υποστηρίζει Bootstrap 3.xx έως 4.xx
  4. Προβολή και επεξεργασία σε HTML

Αρνητικά:

  1. Δεν υπάρχει υποστήριξη plugin
  2. Απαιτεί Bootstrap

Ετυμηγορία:

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

δοκιμάστε Επίδειξη Summernote

6. Φροάλα

Και τελευταίο αλλά όχι λιγότερο σημαντικό, ένας συντάκτης Φροάλα , ένα όμορφο WYSIWYG γραμμένο σε JavaScript. Το Froala είναι ένα από τα πιο δημοφιλή εργαλεία αυτής της λίστας και η δημοτικότητά του στους προγραμματιστές έχει πιστωθεί με την εύκολη ενσωμάτωση και τον καθαρό σχεδιασμό του.

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

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

Θετικά:

  1. Ισχυρός ελαφρύς επεξεργαστής
  2. Ενσωματωμένη επεξεργασία
  3. Πολλά έξτρα

Αρνητικά:

  1. Όχι τόσο μεγάλη εφαρμογή τηλεφώνου/ιστοτόπου

Ετυμηγορία:

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

Επίδειξη: Δοκιμάστε Φροάλα Εδώ

7. Συντάκτης ΚΚΕ

Το CKEditor είναι πολύ δημοφιλές μεταξύ των χρηστών επειδή είναι ανοιχτού κώδικα και όμορφα σχεδιασμένο πρόγραμμα επεξεργασίας WYSIWYG HTML. Έρχεται με περισσότερα από 21 κουίζ για να σας βοηθήσει να μάθετε HTML σε ένα εύχρηστο σχέδιο. Υπάρχει λεπτομερής τεκμηρίωση που θα σας βοηθήσει να βελτιώσετε περαιτέρω τις δεξιότητές σας. Μερικά από τα μεγαλύτερα ονόματα στον κλάδο της τεχνολογίας που εμπιστεύεστε.

Σημειώστε ότι θα πρέπει να διατηρήσετε τις σημειώσεις πνευματικών δικαιωμάτων σε κάθε αρχείο χωρίς να διαγράψετε το αρχείο LICENSE.md που βρίσκεται στο φάκελο εγκατάστασης του CKEditor. Αυτό δεν είναι μειονέκτημα, ειδικά όταν λαμβάνετε μεγάλη αξία σε αντάλλαγμα.

Υπάρχει υποστήριξη για επεκτάσεις, @mention, emoji, παλαιότερα προγράμματα περιήγησης, ακόμη και αυτόματη συμπλήρωση που μπορεί να εξοικονομήσει πολύ χρόνο.

Διεπαφή χρήστη CKEditor

Θετικά:

  1. Αναλυτική τεκμηρίωση, τεστ και ερωτήσεις
  2. συνεργασία
  3. Αυτόματη συμπλήρωση

Αρνητικά:

  1. Διατήρηση αρχείου άδειας

Να πάρει Συντάκτης CKE

Ειδική ειδοποίηση:

1. MediumEditor Είναι ένας κλώνος ανοιχτού κώδικα του ενσωματωμένου επεξεργαστή WYSIWYG για το Medium.com. Είναι απλό, ελαφρύ και έρχεται χωρίς εξαρτήσεις. Αν και δεν είναι τόσο ισχυρό, μπορεί να λειτουργήσει ως ένα εξαιρετικό ενσωματωμένο εργαλείο επεξεργασίας για έγγραφα που σχετίζονται με κείμενο.

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

Καλύτερος επεξεργαστής ανοιχτού κώδικα WYSIWYG HTML

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

Αυτή λοιπόν ήταν μια από τις καλύτερες εφαρμογές επεξεργασίας HTML WYSIWYG ανοιχτού κώδικα που μπορείτε να χρησιμοποιήσετε σήμερα. Ποιο επιλέγετε ή ποιο χρησιμοποιείτε ήδη; Πείτε μας στην παρακάτω ενότητα σχολίων.

Κουμπί μετάβασης στην κορυφή