Οπτικός επεξεργαστής με χρήση jQuery. Ενσωματωμένη επεξεργασία με χρήση jQuery και PHP Visual editor jquery
Όπως γνωρίζετε, η ενσωματωμένη επεξεργασία, ή με άλλα λόγια, η δυνατότητα επεξεργασίας περιεχομένου απευθείας στη σελίδα, είναι ένα πολύ χρήσιμο πράγμα που πρέπει να έχετε πάντα στα χέρια σας. Θα σας πω πώς λειτουργούν όλα και θα σας δείξω επίσης πώς να ενημερώσετε αμέσως το επεξεργασμένο μέρος στη σελίδα χρησιμοποιώντας PHP και πώς να κάνετε όλες τις αλλαγές στη βάση δεδομένων.
ΚώδικαςΤώρα θα εξηγήσω τι είναι η ενσωματωμένη επεξεργασία.
Στη σελίδα επίδειξης θα δείτε ένα μπλοκ με κάποιο κείμενο. Τοποθετήστε το δείκτη του ποντικιού σας σε οποιοδήποτε μέρος αυτού του μπλοκ και θα δείτε ένα μικρό εικονίδιο επεξεργασίας. Μοιάζει με το εικονίδιο του Facebook.
Εάν κάνετε κλικ μέσα σε ένα μπλοκ με κείμενο ή στο ίδιο το εικονίδιο, το μπλοκ θα αντικατασταθεί από τη φόρμα της περιοχής κειμένου και τα κουμπιά αποθήκευσης και ακύρωσης θα εμφανιστούν στο κάτω μέρος.
Χρησιμοποίησα το δέσιμο και το λύσιμο. Με απλά λόγια, μπορούμε να συνδέσουμε ένα συμβάν κλικ του ποντικιού σε ένα στοιχείο. Αντίθετα, μπορείτε να «απομακρύνετε» αυτό το συμβάν από ένα στοιχείο. Είναι αρκετά απλό. Στην 9η γραμμή του παρακάτω κώδικα, εκχωρούμε ένα συμβάν κλικ σε όλα τα στοιχεία με την κλάση "inlineEdit" και εκχωρούμε τη συνάρτηση "updateText" ως χειριστή. Αυτό σημαίνει ότι κάθε φορά που κάνετε κλικ μέσα στο μπλοκ "inlineEdit", θα εκκινείται η λειτουργία "updateText". Αυτή η συνάρτηση αντικαθιστά ένα μπλοκ κειμένου με τη φόρμα textarea.
Τώρα ας δούμε τη συνάρτηση αποθήκευσης. Θα εκτελεστεί μόνο όταν κάνετε κλικ στο κουμπί "Αποθήκευση". Εδώ απλώς βάζουμε το επεξεργασμένο κείμενο σε μια μεταβλητή και το τρέχουμε μέσω του αρχείου update.php. Θα παρατηρήσετε ότι εμφανίζεται ένα εικονίδιο λήψης ενώ η ενημέρωση είναι σε εξέλιξη. Θα εμφανίσουμε επίσης ένα μήνυμα με την απάντηση από τη σελίδα PHP. Τέλος, θα αφαιρέσουμε την κλάση "επιλεγμένη" από το στοιχείο και στη συνέχεια θα εισαγάγουμε το ενημερωμένο κείμενο από την περιοχή κειμένου που έχει εισαχθεί από τον χρήστη στο div.
Η συνάρτηση ακύρωσης θα εκτελεστεί όταν ενεργοποιηθεί ένα στοιχείο με κλάση .revert. Αυτή η συνάρτηση απλώς αφαιρεί την κλάση "επιλεγμένη" όπως στην προηγούμενη συνάρτηση, αλλά εισάγει το αρχικό κείμενο στο div, όχι το επεξεργασμένο.
$(document).ready(function () ( function slideout() ( setTimeout(function () ( $("#response").slideUp("slow", function () ()); ), 2000); ) $ ("inlineEdit").bind("click", updateText, NewText, $(".save").live("click", function () ("#loading").fadeIn("); αργό"); NewText = $(this).siblings("form").children(".edit").val(); var id = $(this).parent().attr("id"); var data = "?id=" + id + "&text=" + NewText("update.php", data, function (response) ( $("#response").html(response); $(" #response").slideDown("slow"); slideout(); $("#loading").fadeOut("slow"); )); $(this).parent().html(NewText).removeClass( "επιλεγμένο").bind("click", updateText ) $(".revert").live("click", function () ($(this).parent().html(OrigText).removeClass (" επιλεγμένο").bind("κλικ", updateText )); συνάρτηση updateText() ( $("li").removeClass("inlineEdit"); OrigText = $(this).html(); $( this).addClass ("επιλεγμένο").html("" + OrigText + "" 
").unbind("click", updateText); ) ));
Το HTML είναι πολύ απλό και είναι ένα ενιαίο στοιχείο λίστας με την κλάση "inlineEdit" που το καθιστά επεξεργάσιμο. Μπορείτε να προσθέσετε όσα επεξεργάσιμα στοιχεία θέλετε στη σελίδα, αλλά μην ξεχάσετε να εκχωρήσετε ένα μοναδικό αναγνωριστικό σε καθένα.
jQuery Inline-Edit 
Κάντε κλικ στο παρακάτω κείμενο για να το επεξεργαστείτε.
- Lorem Ipsum....
Σίγουρα, έχετε συναντήσει πολλές φορές οπτικούς επεξεργαστές, οι οποίοι σας επιτρέπουν να διαμορφώνετε πολύ εύκολα την εμφάνιση σελίδων ή ορισμένων μηνυμάτων, για παράδειγμα, σε ένα φόρουμ. Και όχι με κωδικούς BB, αλλά αμέσως να πάρει ένα συγκεκριμένο αποτέλεσμα. Υπάρχουν πολλοί τέτοιοι συντάκτες στο Διαδίκτυο. Ένα από τα πιο δημοφιλή είναι το TinyMCE, ωστόσο, είμαι υποστηρικτής των δικών μου σεναρίων και πιστεύω ότι για κάθε εργασία πρέπει να υπάρχει η δική της λύση και όχι μια καθολική. Επομένως, σε αυτό το άρθρο θα σας πω πώς να δημιουργήσετε ένα οπτικό πρόγραμμα επεξεργασίας σε JavaScript.
Ακολουθεί ένας αρκετά καλά σχολιασμένος κώδικας:
// Εμφάνιση κουμπιών επεξεργασίας
document.write("");
document.write("");
document.write("
");
document.write(""); // Προσθήκη iframe
/* Ανάλογα με το πρόγραμμα περιήγησης, έχουμε πρόσβαση στο δημιουργημένο πλαίσιο */
var isGecko = navigator.userAgent.toLowerCase().indexOf("gecko") != -1;
var iframe = (isGecko) ? document.getElementById("frameId") : frames["frameId"];
var iWin = (isGecko) ? iframe.contentWindow: iframe.window;
var iDoc = (isGecko) ? iframe.contentDocument: iframe.document;
/* Δημιουργήστε τον κώδικα για μια κενή σελίδα HTML */
iHTML = "";
iDoc.open(); // Ανοίξτε το πλαίσιο
iDoc.write(iHTML); // Προσθέστε τον γραπτό κώδικα στο πλαίσιο
iDoc.close(); // Κλείστε το πλαίσιο
iDoc.designMode = "ενεργό"; // Ενεργοποίηση λειτουργίας επεξεργασίας καρέ
/* Λειτουργίες για τη ρύθμιση της εμφάνισης του επιλεγμένου κειμένου
Πλήρες σύνολο πιθανών εντολών: http://javascript.itsoft.ru/execcom/execCommands.html */
συνάρτηση setBold() (
iWin.focus();
iWin.document.execCommand("bold", null, "");
}
συνάρτηση setItal() (
iWin.focus();
iWin.document.execCommand("italic", null, "");
}
συνάρτηση αποθήκευση() (
/* Αποθήκευση του κώδικα HTML στο κρυφό πεδίο, ώστε αργότερα να μπορείτε να μεταβιβάσετε τον κώδικα HTML που προκύπτει στον χειριστή σεναρίων */
document.getElementById("content").value = iDoc.body.innerHTML;
επιστροφή αληθινή?
}
Με την πρώτη ματιά, ο κώδικας φαίνεται να είναι πολύ περίπλοκος. Και έτσι είναι, αλλά αν το δεις με βάση τα βασικά του στοιχεία, τότε δεν υπάρχει τίποτα περίπλοκο. Υπάρχει μια κανονική φόρμα και ένα κρυφό πεδίο, όπου αποθηκεύεται ο κώδικας HTML που δημιουργείται στον επεξεργαστή. Ο ίδιος ο επεξεργαστής είναι ένα κανονικό πλαίσιο, δηλαδή μια κανονική σελίδα HTML στην οποία μπορούμε να γράψουμε κείμενο (designMode = "on"). Και δημιουργούνται διάφορες μορφοποιήσεις χρησιμοποιώντας τη μέθοδο execCommand(), η οποία εκτελεί την εντολή που καθορίζεται στην παράμετρο. Και νομίζω ότι δεν θα σας είναι δύσκολο να δημιουργήσετε νέα κουμπιά και να συνδέσετε παρόμοιους χειριστές σε αυτά.
Δεν υπάρχει τίποτα περιττό σε αυτό το σενάριο, μόνο τα πιο σημαντικά και βασικά πράγματα, και μπορείτε να το πάρετε ως βάση για να δημιουργήσετε το δικό σας οπτικό πρόγραμμα επεξεργασίας σε JavaScript, στο οποίο δεν θα υπάρχει τίποτα περιττό, αλλά μόνο αυτό που χρειάζεστε.
Αν και οι οπτικοί επεξεργαστές WYSIWYG και Markdown έχουν περιορισμένες δυνατότητες σε σύγκριση με τους επεξεργαστές πηγαίου κώδικα, μπορούν να κάνουν την επεξεργασία βασικού περιεχομένου σελίδας πολύ πιο εύκολη. Ως εκ τούτου, σε αυτήν την ανάρτηση έχουμε συλλέξει τους καλύτερους επεξεργαστές οπτικού περιεχομένου WYSIWYG και Markdown που μπορούν να χρησιμοποιηθούν τόσο στην ανάπτυξη ιστοτόπων υποστήριξης όσο και σε frontend.
ContentToolsΤο πιο πρωτότυπο κείμενο από αυτήν τη συλλογή. Ωστόσο, δεν είναι κατάλληλο για όλα τα έργα λόγω της ιδιαιτερότητάς του.Τα ContentTools είναι ενσωματωμένα στην ίδια τη σελίδα περιεχομένου. Για να ξεκινήσετε την επεξεργασία του, πρέπει να κάνετε κλικ στο αντίστοιχο εικονίδιο και μετά θα εμφανιστεί ο πίνακας επεξεργασίας περιεχομένου. Αυτό είναι πολύ βολικό, γιατί κατά τη δημιουργία υλικού, βλέπουμε αμέσως πώς θα φαίνεται στη σελίδα.
Προσωπικά, νομίζω ότι μοιάζει αόριστα με τον επεξεργαστή Evernote, αλλά με διαφορετική γραμμή εργαλείων.
Αυτό είναι ένα πρόγραμμα επεξεργασίας που είναι πραγματικά ευχάριστο στη χρήση.
Αναζητάτε δωρεάν προγράμματα επεξεργασίας εμπλουτισμένου κειμένου; Εάν ναι, τότε είστε τυχεροί που έχετε φτάσει στη σωστή σελίδα. Σε αυτήν την κριτική, σας προσφέρουμε 10 εξαιρετικούς δωρεάν επεξεργαστές εμπλουτισμένου κειμένου. Οι επεξεργαστές εμπλουτισμένου κειμένου σάς επιτρέπουν να επεξεργάζεστε και να πληκτρολογείτε κείμενο από ένα πρόγραμμα περιήγησης ιστού. Χρησιμοποιούνται με διαφορετικούς τρόπους, παρέχοντας στον χρήστη τη δυνατότητα να δημοσιεύει δημιουργημένο και μορφοποιημένο περιεχόμενο.
Ελπίζουμε ότι η λίστα μας θα σας προσφέρει πραγματικά τις καλύτερες λύσεις. Μη διστάσετε να το μοιραστείτε με τους φίλους σας και μαζί μας τις απόψεις σας για αυτή τη συλλογή. Εδώ είναι η πλήρης λίστα.
Απολαύστε την παρακολούθηση!
Το CKEditor είναι ένα δωρεάν πρόγραμμα επεξεργασίας κειμένου HTML ανοιχτού κώδικα που έχει σχεδιαστεί για να σας διευκολύνει να γεμίσετε τον ιστότοπό σας με περιεχόμενο. Ένα πρόγραμμα επεξεργασίας WYSIWYG που σας δίνει πρόσβαση σε γνώριμες λειτουργίες επεξεργασίας κειμένου απευθείας από ιστοσελίδες. Βελτιώστε την εμπειρία του ιστότοπού σας με αυτό το πρόγραμμα επεξεργασίας που υποστηρίζεται από την κοινότητα.
markItUp! δεν προορίζεται να είναι πάντα έτοιμος να κάνει οτιδήποτε. Αυτή, αντίθετα, είναι μια πολύ συμπαγής υπηρεσία, ευέλικτη στη διαμόρφωση και τη λειτουργία, που μπορεί να εξυπηρετήσει τον προγραμματιστή κατά την αποσφαλμάτωση του CMS, των ιστολογίων, των φόρουμ ή των ιστοσελίδων του. markItUp! - δεν είναι συντάκτης WYSIWYG και δεν θα γίνει ποτέ.
Το NicEdit είναι ένα συμπαγές, πολλαπλές πλατφόρμες, ενσωματώσιμο πρόγραμμα επεξεργασίας περιεχομένου για την διαφοροποίηση του περιεχομένου ενός ιστότοπου εύκολα και απλά απευθείας στο πρόγραμμα περιήγησης.
Το TinyMCE είναι ένα εργαλείο επεξεργασίας javascript/HTML WYSIWYG εκτός πλατφόρμας που κυκλοφορεί ως πόρος ανοιχτού κώδικα που βασίζεται στον ιστό και προστατεύεται από την άδεια LGPL. Το TinyMCE μπορεί να μετατρέψει πεδία HTML TEXTAREA και άλλα στοιχεία HTML σε μονάδες επεξεργασίας.
Ένα δωρεάν πρόγραμμα επεξεργασίας WYSIWYG σε πολλαπλές πλατφόρμες, γεμάτο με όλες τις δυνατότητες επεξεργασίας πλούσιου κειμένου που χρειάζεστε για να βελτιώσετε δραματικά το σύστημα διαχείρισης περιεχομένου σας.
Το jQuery TE είναι μια λειτουργική μονάδα jQuery. Συμπαγής (19,5 KB) και πολύ βολικός επεξεργαστής HTML. Λειτουργεί σύμφωνα με το σχήμα WYSIWYG.
Και το πιο σημαντικό, μπορεί να εφαρμοστεί στο σύστημά σας σε μόλις 1 λεπτό. Και η διεπαφή του μπορεί να τροποποιηθεί με όποιον τρόπο θέλετε. Ακόμη και οι κλάσεις CSS μπορούν να αντικατασταθούν.
Ψάχνετε για ένα πρόγραμμα επεξεργασίας κειμένου εμπλουτισμένου κειμένου για πόρους jQuery χωρίς περιττά στοιχεία; Ήρθατε στο σωστό μέρος!
Ένας απλός, συμπαγής, επεκτάσιμος επεξεργαστής HTML βασισμένος στο jQuery, που λειτουργεί σύμφωνα με την αρχή WYSIWYG. Ένα εργαλείο για την εύκολη εμφάνιση ενός επεξεργαστή WYSIWYG-HTML στη θέση οποιουδήποτε στοιχείου TextArea DOM στη σελίδα. Το ελαφρύ σενάριο ζυγίζει 9,17 KB. Το CSS με τις εικόνες μαζί «τραβάει» 25,9 KB.
Το uEditor είναι ευέλικτο και εύκολο στη χρήση. Παράγει σαφή, χρησιμοποιήσιμο κώδικα (αν και απαιτεί πιστοποίηση με τον προβλεπόμενο τρόπο, μπορείτε να χρησιμοποιήσετε το δικό σας φύλλο στυλ για να εργαστείτε σε λειτουργία WYSIWYG). Η λειτουργικότητα της υπηρεσίας μπορεί να βελτιωθεί περαιτέρω χάρη σε ένα εύχρηστο σύστημα πρόσθετων μονάδων.
Το Whizzywig το κάνει εύκολο. Σας επιτρέπει να τακτοποιήσετε "πλούσιο" μορφοποιημένο κείμενο σε ένα παράθυρο web. Στην πραγματικότητα γράφει σε XHTML, αλλά δεν χρειάζεται να γνωρίζετε τη διάταξη HTML για να το χρησιμοποιήσετε. Εάν γνωρίζετε πώς να χρησιμοποιείτε επεξεργαστή κειμένου ή email, μπορείτε να το χειριστείτε αυτό.
Έψαχνα για έναν οπτικό επεξεργαστή που θα ήταν ευχάριστος στο μάτι, ώστε να μην χρειάζεται να ξανακάνω το σχέδιο και να χάσω χρόνο. Στη διαδικασία, βρήκα και δοκίμασα πολλούς οπτικούς επεξεργαστές Η εγκατάσταση οπτικών επεξεργαστών σε έναν ιστότοπο είναι ένα απλό σύστημα ενεργειών. Πρέπει να βάλετε έναν αριθμό αιτημάτων για σενάρια στην ετικέτα HEAD (μετά τη μεταφόρτωση ολόκληρου του φακέλου με το οπτικό πρόγραμμα επεξεργασίας στον διακομιστή). Τα ληφθέντα αρχεία συνήθως παρέχουν μια δοκιμαστική έκδοση χρήσης, είναι εύκολο να λάβετε τα ονόματα των απαραίτητων σεναρίων από τον κώδικα αυτής της σελίδας. Εδώ είναι ένας μικρός κώδικας που χρησιμοποιείται στη σελίδα BODY για άμεση χρήση του επεξεργαστή. Θα το τοποθετήσουμε στη θέση της φόρμας html όπου το χρειαζόμαστε.
Οι οπτικοί επεξεργαστές χωρίζονται σε τύπους που χρησιμοποιούν διαφορετική επεξεργασία. Έτσι, συνάντησα οπτικούς επεξεργαστές που βασίζονται σε jQuery, MooTools, ActiveX και απλώς JavaScript.
Οπτικοί επεξεργαστές που χρησιμοποιούν MooTools
Βρήκα μερικούς πολύ ενδιαφέροντες οπτικούς επεξεργαστές που βασίζονται σε αυτήν την τεχνολογία. Ωστόσο, λόγω ασυμβατότητας με σενάρια jQuery που χρησιμοποιούνται ήδη στον ιστότοπο για άλλες ανάγκες, συνέχισα την αναζήτηση για κάτι πιο καθολικό.
Ένα παράδειγμα του οπτικού επεξεργαστή MooEditable που χρησιμοποιεί το MooTools
Σενάρια που εισάγονται μεταξύ ετικετών:
window.addEvent("load", function())( $("textarea-1").mooEditable(); // Δημοσίευση υποβολής $("theForm").addEvent("submit", function(e)( alert( $ ("textarea-1").value return ));
Χρήση σε
Textarea 1 —Εδώ είναι το κείμενο γραμμένο σε οπτικό πρόγραμμα επεξεργασίας—
Εδώ χρησιμοποιείται η τυπική ετικέτα φόρμας TEXTAREA, η οποία θα κάνει το πεδίο εισαγωγής να λειτουργεί ακόμα και αν είναι απενεργοποιημένο
Χρήστης JavaScript (αν και όλες οι επιλογές οπτικού επεξεργαστή δεν θα λειτουργήσουν).
Κατεβάστε το οπτικό πρόγραμμα επεξεργασίας MooEditable
Παράδειγμα ggEdit, ένα οπτικό πρόγραμμα επεξεργασίας που βασίζεται στο MooTools
Στο FireFox, αυτός ο οπτικός επεξεργαστής ("ggEdit") αρνήθηκε να λειτουργήσει καθόλου. Ως χρήστης του Mozilla, αυτό δεν μου ταίριαζε καθόλου.
Ωστόσο, μου άρεσε η διεπαφή ενός τέτοιου οπτικού επεξεργαστή (παράδειγμα "ggEdit" (η πηγή μπορεί να γίνει λήψη)).
Visual editors βασισμένοι στο jQuery
Αυτός ο οπτικός επεξεργαστής (WKRTE) θα ήταν πιθανώς καλός εάν τα αρθρωτά παράθυρα (εισαγωγή εικόνας, σύνδεσμοι) δεν εμφανίζονταν έξω από το πλαίσιο της οθόνης
Παράδειγμα του WKRTE, ενός οπτικού επεξεργαστή που βασίζεται σε jQuery:
Αξίζει να σημειωθεί ότι τα κύρια σενάρια δεν εισάγονται στο ..., όπου, κυρίως, τα αιτήματα στυλ (CSS):
Τα κύρια σενάρια θα εμφανιστούν πριν από την ετικέτα κλεισίματος:
--Κάποιο περιεχόμενο-- $(document).ready(function() ( var arr = $(".wkrte-1").rte(( πλάτος: 720, ύψος: 520, controls_rte: rte_toolbar, controls_html: html_toolbar )) ;));
Οπτικός επεξεργαστής AJAX, jQuery, JavaScript
Αυτός ο οπτικός επεξεργαστής ("CKEditor") χρησιμοποιεί μια πλούσια παλέτα τεχνολογιών στις περιπτώσεις χρήσης του. Αν και το AJAX εδώ εκτελεί περισσότερες βοηθητικές - παρά βασικές - λειτουργίες του οπτικού επεξεργαστή. Κύρια βιβλιοθήκη: jQuery, JavaScript.
Δεν έχω πραγματοποιήσει αυστηρές δοκιμές για συμβατότητα μεταξύ προγραμμάτων περιήγησης, αλλά λειτουργεί εξαιρετικά στα προγράμματα περιήγησής μου, κάτι που δεν θα μπορούσε παρά να με κάνει χαρούμενο. Ένα επιπλέον πλεονέκτημα είναι η ρωσική γλώσσα!
Σενάρια: μπορεί να είναι διαφορετικά. Ένα παράδειγμα:
Κύρια βιβλιοθήκη στο HEAD:
--Μερικό περιεχόμενο-- //
