Μπορείτε να κατεβάσετε τις πιο πρόσφατες εκδόσεις του CKEditor και του CKFinder από τον επίσημο ιστότοπο (http://cksource.com).
Τοποθετήστε τους δύο παραπάνω πόρους στον ριζικό κατάλογο του ιστότοπου: /CKEditor (εδώ στην έκδοση 3.6.2, πρέπει να τοποθετήσετε το φάκελο _Samples\ckeditor στον συμπιεσμένο φάκελο) και /CKFinder (χωρίς διάκριση πεζών-κεφαλαίων, μπορείτε να βάλετε το φάκελο εδώ απευθείας). )
Σημειώστε ότι εδώ μερικές φορές υπάρχει ένα σφάλμα στη δημιουργία. Για παράδειγμα, υπάρχουν διπλότυπες ετικέτες τύπου AssemblyTitle, κυρίως επειδή ο ιστότοπος έχει περισσότερες από μία AssemblyInfo.cs για τη διαγραφή του ληφθέντος αρχείου. Εναλλακτικά, διαγράψτε το φάκελο _source. Εάν έχετε οποιεσδήποτε ερωτήσεις εδώ, μπορείτε να επικοινωνήσετε μαζί μου: το QQ μου: 515072775
Χρήση του CKEditor σε μια σελίδα:
<textarea cols="80" id="prcontent" name="content" rows="50"> Γεια σας, η χρήση σας ήταν επιτυχής! </textarea>
<scrip remove ttype="text/javascrip remove t" >
CKEDITOR.replace('περιεχόμενο', { ύψος:200, πλάτος: 520 });
</scrip去掉t>. . .
Το CKEditor δεν συνοδεύεται από λειτουργία μεταφόρτωσης, επομένως πρέπει να μεταφορτωθεί με το CKFinder
Βήμα 1: Ο ιστότοπος πρέπει να αναφέρει το dll του CKFinder (κατάλογος: /CKFinder/bin/Release/CKFinder.dll)
Βήμα 2: Διαμορφώστε το config.js του CKEditor (κατάλογος: /CKEditor/config.js) στη συνάρτηση CKEDITOR.editorConfig και οι περιττές λειτουργίες μπορούν να αφαιρεθούν
CKEDITOR.editorConfig = συνάρτηση(config) {
config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html'; Μην γράψετε "~/ckfinder/..." ή "/ckfinder/..."
config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html? Τύπος=Εικόνες';
config.filebrowserFlashBrowseUrl = 'ckfinder/ckfinder.html? Τύπος=Φλας';
config.filebrowserUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files';
config.filebrowserImageUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images';
config.filebrowserFlashUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';
config.filebrowserWindowWidth = '800'; Η ρύθμιση μεγέθους του αναδυόμενου παραθύρου Browse Server
config.filebrowserWindowHeight = '500';
}
CKFinder.setupCKEditor(null, '.. /ckfinder/'); Σημειώστε ότι η διαδρομή του ckfinder αντιστοιχεί στην πραγματική τοποθέτηση
Διαμόρφωση του CKFinder:
Ανοίξτε το στοιχείο ελέγχου χρήστη config.ascx στο "ckfinder\" και αλλάξτε τη διαδρομή BaseUrl:
BaseUrl = "~/ckfinder/userfiles/"; ή BaseUrl = "ckfinder/userfiles/";
Εδώ είναι ένα επιπλέον σημείο: είναι χρήσιμο να κάνετε δοκιμές στις υπηρεσίες IIS. Διαφορετικά, εάν η μεταφόρτωση είναι ανεπιτυχής, θα νομίζετε ότι κάτι δεν πάει καλά με τη διαμόρφωση.
Το CKEditor έχει μια λειτουργία μεταφόρτωσης μετά την ολοκλήρωση της διαμόρφωσης, αλλά τι γίνεται αν το αρχείο εικόνας είναι το αρχικό όνομα εικόνας και θέλει να το αλλάξει σε ένα τυχαίο όνομα αρχείου; Στη συνέχεια, κοιτάξτε το τρίτο βήμα.
Βήμα 3: Τροποποιήστε τον πηγαίο κώδικα του CKFinder. Το CKFinder συνοδεύεται από τον δικό του πηγαίο κώδικα, κατάλογο: /CKFinde/_source
Δημιουργήστε ένα νέο τρέχον έργο στο VS στο CKFinde/_source/CKFinder.Net.sln, το αρχείο λύσης που κατεβάσατε εδώ ενδέχεται να μην ανοίξει στο VS2008, μπορείτε να επιλέξετε να προσθέσετε ένα νέο έργο ή να χρησιμοποιήσετε μια νεότερη έκδοση του VS για να το ανοίξετε.
1) Ανοίξτε το αρχείο /Settings/ConfigFile.cs
Εντοπίστε 27 σειρές και προσθέστε ένα χαρακτηριστικό: public bool RandomReName; Μετονομασία τυχαία
Εντοπίστε 67 γραμμές και αντιστοιχίστε μια τιμή στην ιδιότητα μόλις τώρα: RandomReName = true; Η προεπιλεγμένη τιμή είναι true
Αποθηκεύστε το κλειστό αρχείο
2) Ανοίξτε το αρχείο /Connector/Config.cs
Εντοπίστε τις 62 σειρές, προσθέστε ένα χαρακτηριστικό:
δημόσιο bool RandomReName
{
get { returnSettings.ConfigFile.Current.RandomReName; }
}
Αποθηκεύστε το κλειστό αρχείο
3) Ανοίξτε το αρχείο /Connector/CommandHandlers/FileUploadCommandHandler.cs
Εντοπίστε τη γραμμή 64 και προσθέστε έναν κωδικό κρίσης:
if ( Config.Current.RandomReName) // Χρησιμοποιήστε ένα τυχαίο όνομα
sFileName =DateTime.Now.ToString("yyyyMMddHHmmssfff") + "." +sExtension;
Αποθηκεύστε το κλειστό αρχείο
4) Αναδημιουργήστε το έργο, αντικαταστήστε το /ckfinder/_source/bin/Debug/CKFinder.dll /ckfinder/bin/Release/CKFinder.dll ή αφαιρέστε τις αναφορές που προστέθηκαν προηγουμένως στο έργο του ιστότοπου και αφαιρέστε ξανά το dll από το έργο CKFinder.Net
Τελευταίο βήμα: Ανοίξτε το /ckfinder/config.ascx
Εντοπίστε 40 γραμμές και προσθέστε ένα χαρακτηριστικό: (Στην πραγματικότητα, μπορείτε να το προσθέσετε ή όχι, επειδή υπήρχε μια προεπιλεγμένη τιμή που είχε οριστεί πριν, αλλά πρέπει να οριστεί σε false όταν χρησιμοποιείτε το αρχικό όνομα)
//上传完毕后使用随机文件名
RandomReName = αληθές;
Αποθήκευση κλειστή
Εντάξει, τώρα που η διαμόρφωση ήταν επιτυχής, το CKEditor μπορεί να έχει μια λειτουργία μεταφόρτωσης. Οι ρυθμίσεις άλλων λειτουργιών θα συνεχίσουν να μελετώνται όταν έχετε χρόνο~
Μια ακόμη υπενθύμιση: Οι φάκελοι CKEditor και CKFinder έχουν πολλά περιττά πράγματα, όπως ονόματα με υπογράμμιση, τα έργα .net δεν χρειάζονται php, asp.
Εάν υπάρχει σφάλμα κατά τη μεταφόρτωση ενός αρχείου: Δεν είναι δυνατή η προβολή του αρχείου για λόγους ασφαλείας. Επικοινωνήστε με τον διαχειριστή του συστήματός σας και ελέγξτε το προφίλ CKFinder.
Πρέπει να τροποποιήσετε το αρχείο config.ascx
δημόσια παράκαμψη bool CheckAuthentication()
{
reture false?
}
Τροποποιήθηκε σε:
δημόσια παράκαμψη bool CheckAuthentication()
{
επικύρωση φόρμας
returnRequest.IsAuthenticated;
}
3. Εφαρμόστε τον έλεγχο CKEditor στη σελίδα [δύο μέθοδοι, α και β]
[Α: Παραθέτοντας το INSTALL.html στη συμπιεσμένη συσκευασία ]
Εάν θέλετε να ενσωματώσετε το CKEditor στη σελίδα ASP.NET σας, ακολουθήστε τα βήματα που περιγράφονται παρακάτω.
1. Μεταβείτε στον επίσημο ιστότοπο λήψης του CKEditor και πραγματοποιήστε λήψη των πιο πρόσφατων εκδόσεων τόσο του CKEditor 3.x όσο και του CKEditor για ASP.NET Control.
2. Αποσυσκευάστε και τα δύο πακέτα εγκατάστασης σε μια επιθυμητή τοποθεσία Αφαιρέστε το n.
3. Προσθέστε μια αναφορά στο CKEditor for ASP.NET Control στον ιστότοπό σας.
Στο Visual Studio χρησιμοποιήστε την εντολή Add Reference και μεταβείτε στο αρχείο bin\Release\CKEditor.NET.dll από το αποσυμπιεσμένο πακέτο εγκατάστασης CKEditor για ASP.NET. Μπορείτε επίσης να αντιγράψετε με μη αυτόματο τρόπο το αρχείο DLL στο φάκελο bin της εφαρμογής σας.
4. Αντιγράψτε τα μη συσκευασμένα αρχεία επεξεργασίας από το πακέτο εγκατάστασης CKEditor 3.x και επικολλήστε τα στον κατάλογο εφαρμογών του ιστότοπού σας.
5. Καταχωρίστε το CKEditor για έλεγχο ASP.NET στη σελίδα σας:
<%@ Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor" %>
6. Εισαγάγετε μια παρουσία CKEditor στο σώμα της σελίδας:
<CKEditor:CKEditorControl ID="CKEditor1" runat="διακομιστής"></CKEditor:CKEditorControl>
【β】
1. <head>Προσθέστε την αντίστοιχη αναφορά js στη σελίδα:
<scrip remove t type="text/javascrip remove t" language="javascrip remove t" src="ckfinder/ckfinder.js"></scrip去掉t>
<scrip remove t type="text/javascrip remove t" language="javascrip remove t" src="ckeditor/ckeditor.js"></scrip去掉t>
2. Στη συνέχεια<body>, προσθέστε τον ακόλουθο κώδικα στη θέση όπου πρέπει να τοποθετηθεί το στοιχείο ελέγχου και υπάρχουν οι ακόλουθες μέθοδοι χρήσης:
(1) Προσθέστε το καθορισμένο χαρακτηριστικό κλάσης στο στοιχείο ελέγχου
<textarea id="textarea1" name="editor1" class="ckeditor">γεια!</textarea>
Στοιχεία ελέγχου διακομιστή:
<asp:TextBox ID="TextBox1" runat="διακομιστής" TextMode="MultiLine" CssClass="ckeditor"></asp:TextBox>
(2) Εισαγωγή κώδικα js - εδώ ο κώδικας js γράφεται καλύτερα μετά τον έλεγχο ή <head>σε αυτόν
<textarea id="textarea1" name="editor1">γεια!</textarea>
<scrip remove t type="text/javascrip remove t" >
CKEDITOR.replace('editor1', { ύψος:400, πλάτος:800 });
</scrip去掉t>. . .
Στοιχεία ελέγχου διακομιστή:
<asp:TextBox ID="mckeditor" runat="server" TextMode="MultiLine"></asp:TextBox>
<scrip remove t type="text/javascrip remove t" >
CKEDITOR.replace('<%=mckeditor. ClientID %>');
</scrip去掉t>. . .
=============================================================================================================
Δεύτερη αναφορά:
asp.net τη μέθοδο διαμόρφωσης του ckEditor 3.0.1 και ckfinder_aspnet_1.4.1.1
Σύμφωνα με τις προτροπές του http://ckeditor.com.cn/docs/, το CKEditor έχει ρυθμιστεί στην ιστοσελίδα και όταν προβάλλεται στο πρόγραμμα περιήγησης, πιστεύω ότι η διεπαφή του CKEditor είναι πράγματι πολύ όμορφη, αλλά όταν ήθελα με χαρά να δοκιμάσω τη λειτουργία μεταφόρτωσης εικόνας, δεν είδα το κουμπί για να ανεβάσω την εικόνα.
Συνεχίζοντας την αναζήτηση στο διαδίκτυο, το συμπέρασμα ήταν ότι «το CKEditor δεν έχει από μόνο του λειτουργία μεταφόρτωσης και πρέπει να ενσωματωθεί στο CKFinder για να επιτευχθεί η λειτουργία μεταφόρτωσης».
Στη συνέχεια, κατεβάστε το CKFinder 1.4.1.1 για Asp.net, αποσυμπιέστε το και τοποθετήστε το φάκελο ckfinder στον ριζικό κατάλογο του έργου - επειδή πολλές πηγές στο Διαδίκτυο λένε ότι είναι καλύτερο να τοποθετήσετε το CKEditor και το CKFinder στον ίδιο κατάλογο επιπέδου. Και με αυτόν τον τρόπο, θα έχουμε δύο ακόμη φακέλους στο έργο μας χωρίς λόγο. Εγώ ο ίδιος έχω ένα φετίχ με τον κώδικα καθαριότητας, νομίζω,
Αφήστε ένα φάκελο ως ένδειξη σεβασμού προς τον συγγραφέα, αυτό θα είναι αρκετό. Το να κρατήσω δύο θα με έκανε να νιώσω πολύ άβολα.
Πριν ενσωματώσουμε το CKFinder στο CKEditor, πρέπει επίσης να διαμορφώσουμε λίγο το CKFinder. Οι έξυπνοι φίλοι θα πρέπει εύκολα να σκεφτούν ότι δεδομένου ότι είναι ένα πρόσθετο για τη μεταφόρτωση αρχείων, τα περισσότερα από τα πράγματα που πρέπει να ρυθμιστούν είναι η διαδρομή για τη μεταφόρτωση αρχείων.
Η προεπιλεγμένη διαδρομή μεταφόρτωσης του CKFinder είναι ο φάκελος αρχείων χρήστη στον δικό του κατάλογο, αλλά έχω βάλει το CKFinder στο φάκελο CKEditor, εάν αποθηκεύσω την εικόνα στα αρχεία χρήστη, το σύστημα πρέπει να παρακάμψει το φάκελο τριών επιπέδων για να βρει το αρχείο ή την εικόνα, οπότε σκοπεύω να ανεβάσω την εικόνα στο φάκελο upFile στον ριζικό κατάλογο του έργου.
Για να εφαρμόσετε αυτήν τη λειτουργία, πρέπει να τροποποιήσετε το αρχείο config.ascx στο CKFinder για να αλλάξετε το BaseUrl = "/ckfinder/userfiles/" σε BaseUrl = "~/upFile/". Στη συνέχεια, κόψτε τα αρχεία CKFinder.dll από το φάκελο CKFinder/bin στο φάκελο bin του έργου συστήματος. Ή εισάγετε CKFinder.dll στο εγχείρημα προσθέτοντας παραπομπές.
Στη συνέχεια, μπορούμε να χρησιμοποιήσουμε το CKEditor με μεταφόρτωση αρχείων:
Τοποθετήστε το φάκελο CKFinder στο φάκελο CKEditor και στη σελίδα, εισαγάγετε τα αρχεία js και των δύο:
<scrip remove tsrc="http://www.cnblogs.com/ckeditor/ckeditor.js" type="text/javascrip remove t"></scrip去掉t>
<scrip remove t src="http://www.cnblogs.com/ckeditor/ckfinder/ckfinder.js" type="text/javascrip remove t"></scrip去掉t>
Υπάρχουν δύο τρόποι για να αναφέρετε το πρόγραμμα επεξεργασίας σε ένα στοιχείο ελέγχου:
Το ένα είναι να χρησιμοποιήσετε την περιοχή κειμένου ελέγχου πελάτη:
<textarea rows="20" cols="40" name="txtContent" id="txtContent"></textarea>
<scrip remove t type="text/javascrip remove t" >
var editor = CKEDITOR.replace('txtContent');
CKFinder.SetupCKEditor(επεξεργαστής, 'http://www.cnblogs.com/ckeditor/ckfinder/');
</scrip去掉t>. . .
Το δεύτερο είναι να χρησιμοποιήσετε το πλαίσιο κειμένου ελέγχου από την πλευρά του διακομιστή:
<asp:TextBox id="txtContent" TextMode="MultiLine" Text='<%# Bind("info") %>' runat="server"></asp:TextBox>
<scrip remove t type="text/javascrip remove t" >
var editor = CKEDITOR.replace('txtContent');
CKFinder.SetupCKEditor(επεξεργαστής, 'http://www.cnblogs.com/ckeditor/ckfinder/');
</scrip去掉t>Προσωπικά, πιστεύω ότι αφού είναι ένα asp.net πρόγραμμα, χρησιμοποιήστε τα στοιχεία ελέγχου από την πλευρά του διακομιστή. Αν και τρέχει λίγο πιο αργά από τα στοιχεία ελέγχου πελάτη, η ανάπτυξη είναι λίγο πιο γρήγορη. Και, ως προγραμματιστές, μας αρέσει πάντα να δοκιμάζουμε όλες τις δυνατότητες πριν επιλέξουμε αυτό που μας αρέσει.
Στην πραγματικότητα, μπορείτε επίσης να εκχωρήσετε τιμές στο στοιχείο ελέγχου χωρίς να χρησιμοποιήσετε το Text='<%# Bind("info") %>' και να το χρησιμοποιήσετε απευθείας στον backcode
this.txtContent.Text="Αρχική τιμή"
Είναι επίσης δυνατό. Μπορείτε επίσης να χρησιμοποιήσετε απευθείας τον ακόλουθο κώδικα για να λάβετε την τιμή:
Κωδικός CKFinder και CKEditor. Όταν εκτελώ τη σελίδα απευθείας με τον επεξεργαστή, ο μεταγλωττιστής δίνει το ακόλουθο σφάλμα:
συμβολοσειρά content=this.txtContent.Text
Σημείωση: Το χαρακτηριστικό TextMode="MultiLine" είναι απαραίτητο, διαφορετικά η τιμή θα είναι μηδενική.
Δεν έκανα βελτιστοποίηση πριν από τον εντοπισμό σφαλμάτων του προγράμματος
Ο τύπος ή το όνομα του χώρου ονομάτων "ControlDesigner" δεν υπάρχει στο χώρο ονομάτων "System.Web.UI.Design" (λείπει η αναφορά συναρμολόγησης;)
Το λάθος βρίσκεται στη γραμμή 19 του ckeditor\ckfinder\_source\FileBrowserDesigner.cs, οπότε απλά απλοποιήστε το αρχείο:
Το πρώτο βήμα είναι να βελτιστοποιήσετε το ckeditor: διαγράψτε τους φακέλους _samples και _source και μόνο τρία αρχεία γλώσσας μπορούν να διατηρηθούν στον κατάλογο lang: en.js, zh.js και zh-cn.js.
Το δεύτερο βήμα είναι να βελτιστοποιήσετε το ckfinder: διαγράψτε τους φακέλους _samples και _source και διατηρήστε μόνο τα αρχεία γλώσσας en.js, zh.js και zh-cn.js στον κατάλογο lang.
Σημειώστε τη δεύτερη γραμμή του κώδικα js εδώ: CKFinder.SetupCKEditor(editor, 'http://www.cnblogs.com/ckeditor/ckfinder/'); , όπου το "http://www.cnblogs.com/ckeditor/ckfinder/" είναι η σχετική διαδρομή του ckfinder προς την τρέχουσα σελίδα,
Μην αντιγράφετε και επικολλάτε απευθείας τον κώδικα, διαφορετικά ενδέχεται να εμφανιστεί το ακόλουθο σφάλμα κατά τη μεταφόρτωση εικόνων:
Περιγραφή: HTTP 404. Ο πόρος που αναζητάτε (ή μία από τις εξαρτήσεις του) μπορεί να έχει καταργηθεί, το όνομά του να έχει αλλάξει ή να μην είναι διαθέσιμος προσωρινά. Ελέγξτε την ακόλουθη διεύθυνση URL και βεβαιωθείτε ότι είναι γραμμένη σωστά.
Ζητούμενη διεύθυνση URL: /admin/ckeditor/ckfinder/core/connector/aspx/connector.aspx
Έτσι, αν δεν θέλετε να βάλετε το ckfinder στο φάκελο ckeditor όπως έκανα εγώ, δεν πειράζει, αρκεί να συμπληρώσετε σωστά τις αλλαγές διαδρομής εδώ.
Νόμιζα ότι αυτό θα θεωρούνταν όλη η δουλειά, αλλά όταν ανέβασα την εικόνα, εμφανίστηκε η ακόλουθη προτροπή:
Για λόγους ασφαλείας, δεν είναι δυνατή η προβολή του αρχείου. Επικοινωνήστε με τον διαχειριστή του συστήματός σας και ελέγξτε το προφίλ CKFinder.
Δεν υπάρχει περίπτωση, όπως λέει και η παροιμία, τα καλά πράγματα να τρώγονται δύσκολα. Μπορώ μόνο να ρωτήσω τον καλύτερο δάσκαλο - τον Baidu. Αντιγράψτε τις παραπάνω πληροφορίες προτροπής στο πλαίσιο αναζήτησης Baidu και αφού μπήκα στο αυτοκίνητο, βρήκα μια ανάρτηση σχετικά με την ενσωμάτωση PHP ckeditor. Δείτε πώς να το κάνετε:
Τροποποιήστε το αρχείο config.ascx στο CKFinder για να αλλάξετε την τιμή επιστροφής της δημόσιας παράκαμψης της συνάρτησης bool CheckAuthentication() από return false σε return true.
Δοκιμάστηκε ξανά, η εικόνα ανέβηκε με επιτυχία! |
Δημοσιεύτηκε στις 18/4/2015 7:11:55 μ.μ.
|
|
|
