Die neuesten Versionen von CKEditor und CKFinder können von der offiziellen Website (http://cksource.com) heruntergeladen werden.
Leg die oben genannten beiden Ressourcen in das Root-Verzeichnis der Website: /CKEditor (hier in Version 3.6.2 musst du den _Samples\ckeditor-Ordner in den komprimierten Ordner legen) und /CKFinder (kleinschreibungsunsensitiv, du kannst den Ordner direkt hier ablegen). )
Beachten Sie, dass es hier manchmal einen Fehler in der Erzeugung gibt. Zum Beispiel gibt es doppelte AssemblyTitle-Tags, hauptsächlich weil die Website mehr als einen AssemblyInfo.cs hat, um die heruntergeladene Datei zu löschen. Oder lösche den Ordner _source. Wenn Sie hier Fragen haben, können Sie mich kontaktieren: mein QQ: 515072775
Verwendung von CKEditor auf einer Seite:
<textarea cols="80" id="prcontent" name="content" zeilen="50"> Hallo, Ihre Nutzung war erfolgreich! </textarea>
<scrip remove ttype="text/javascrip remove t" >
CKEDITOR.replace('content', { height:200, width: 520 });
. .</scrip去掉t>
CKEditor verfügt nicht über eine Upload-Funktion, daher muss er mit CKFinder hochgeladen werden
Schritt 1: Die Website muss auf die dll von CKFinder verweisen (Verzeichnis: /CKFinder/bin/Release/CKFinder.dll)
Schritt 2: Konfigurieren Sie die config.js des CKEditor (Verzeichnis: /CKEditor/config.js) in der Funktion CKEDITOR.editorConfig, und unnötige Funktionen können entfernt werden
CKEDITOR.editorConfig = function(config) {
config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html'; Schreib nicht "~/ckfinder/..." oder "/ckfinder/..."
config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html? Typ=Bilder';
config.filebrowserFlashBrowseUrl = 'ckfinder/ckfinder.html? Typ=Blitz';
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'; Die Größeneinstellung des Browse Server-Popups
config.filebrowserWindowHeight = '500';
}
CKFinder.setupCKEditor(null, '.. /ckfinder/'); Beachten Sie, dass der Weg des Ckfinder der tatsächlichen Platzierung entspricht
CKFinders Konfiguration:
Öffne die Benutzersteuerung config.ascx unter "ckfinder\" und ändere den BaseUrl-Pfad:
BaseUrl = "~/ckfinder/userfiles/"; oder BaseUrl = "ckfinder/userfiles/";
Hier ein zusätzlicher Punkt: Es ist nützlich, im IIS zu testen. Andernfalls denkst du, dass bei einem Upload etwas mit der Konfiguration nicht stimmt.
CKEditor hat nach Abschluss der Konfiguration eine Upload-Funktion, aber was ist, wenn die Bilddatei den ursprünglichen Bildnamen hat und er in einen zufälligen Dateinamen wechseln möchte? Dann schau dir den dritten Schritt an.
Schritt 3: Ändern Sie den Quellcode von CKFinder. CKFinder hat einen eigenen Quellcode, das Verzeichnis: /CKFinde/_source
Erstelle ein neues aktuelles Projekt in VS zu CKFinde/_source/CKFinder.Net.sln, die hier heruntergeladene Lösungsdatei öffnet sich möglicherweise nicht in VS2008, du kannst ein neues Projekt hinzufügen oder eine neuere Version von VS verwenden, um es zu öffnen.
1) Öffne die /Settings/ConfigFile.cs-Datei
Finde 27 Zeilen und füge ein Attribut hinzu: public bool RandomReName; Umbenennen zufällig
Finde 67 Zeilen und weise der Eigenschaft gerade einen Wert zu: RandomReName = true; Der Standardwert ist wahr
Speichere die geschlossene Datei
2) Öffnen Sie die /Connector/Config.cs-Datei
Finde die 62 Zeilen, füge ein Attribut hinzu:
öffentlicher Bool RandomReName
{
get { returnSettings.ConfigFile.Current.RandomReName; }
}
Speichere die geschlossene Datei
3) Öffnen Sie die /Connector/CommandHandlers/FileUploadCommandHandler.cs-Datei
Finden Sie Zeile 64 und fügen Sie einen Urteilscode hinzu:
wenn ( Config.Current.RandomReName) // Verwenden Sie einen zufälligen Namen
sFileName =DateTime.Now.ToString("yyyyMMddHHmmssfff") + "." +sExtension;
Speichere die geschlossene Datei
4) Das Projekt neu generieren, /ckfinder/_source/bin/Debug/CKFinder.dll /ckfinder/bin/Release/CKFinder.dll überschreiben oder die zuvor hinzugefügten Referenzen auf das Website-Projekt entfernen und die DLL erneut aus dem CKFinder.Net-Projekt entfernen
Letzter Schritt: /ckfinder/config.ascx öffnen
Finde 40 Zeilen und füge ein Attribut hinzu: (Tatsächlich kannst du das hinzufügen oder nicht, da es vorher einen Standardwert gab, der aber beim Originalnamen auf falsch gesetzt werden muss)
//上传完毕后使用随机文件名
RandomReName = true;
Speichern geschlossen
Okay, jetzt wo die Konfiguration erfolgreich war, kann CKEditor eine Upload-Funktion haben. Die Einstellungen anderer Funktionen werden weiterhin studiert, wenn du Zeit hast~
Noch eine Erinnerung: Die Ordner CKEditor und CKFinder enthalten viele unnötige Dinge, wie Namen mit Unterstärkungen, .net-Projekte benötigen kein PHP, ASP.
Wenn es einen Fehler beim Hochladen einer Datei gibt: Die Datei kann aus Sicherheitsgründen nicht angezeigt werden. Bitte wenden Sie sich an Ihren Systemadministrator und prüfen Sie das CKFinder-Profil.
Du musst die config.ascx-Datei modifizieren.
Public Override bool CheckAuthentication()
{
Zurücke false;
}
Modifiziert zu:
Public Override bool CheckAuthentication()
{
Formularvalidierung
returnRequest.IsAuthenticated;
}
3. Wenden Sie die CKEditor-Steuerung auf der Seite an [zwei Methoden, a und b]
[A: Zitat der INSTALL.html im komprimierten Paket ]
Wenn Sie CKEditor in Ihre ASP.NET-Seite integrieren möchten, folgen Sie den unten aufgeführten Schritten.
1. Gehen Sie auf die offizielle CKEditor-Download-Seite und laden Sie die neuesten Versionen sowohl von CKEditor 3.x als auch des CKEditor für ASP.NET Control herunter.
2. Entpacken Sie beide Installationspakete auf eine gewünschte Locatio Remove n.
3. Füge deiner Website einen Verweis zum CKEditor for ASP.NET Control hinzu.
In Visual Studio verwenden Sie den Befehl Add Reference und durchsuchen Sie die Datei bin\Release CKEditor.NET.dll\ aus dem ungepackten CKEditor für ASP.NET Installationspaket. Du kannst die DLL-Datei auch manuell in den BIN-Ordner deiner Anwendung kopieren.
4. Kopieren Sie die entpackten Editordateien aus dem CKEditor 3.x-Installationspaket und fügen Sie sie in das Anwendungsverzeichnis Ihrer Website ein.
5. Registrieren Sie den CKEditor für ASP.NET Control auf Ihrer Seite:
<%@ Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor" %>
6. Fügen Sie eine CKEditor-Instanz in den Seitentext ein:
<CKEditor:CKEditorControl ID="CKEditor1" runat="server"></CKEditor:CKEditorControl>
【b】
1. <head>Fügen Sie der Seite die entsprechende js-Referenz hinzu:
<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>Fügen Sie dann den folgenden Code an die Stelle hinzu, an der die Steuerung platziert werden muss, und es gibt die folgenden Nutzungsmethoden:
(1) Fügen Sie das angegebene Klassenattribut zur Steuerung hinzu
<textarea id="textarea1" name="editor1" class="ckeditor">hallo!</textarea>
Serversteuerungen:
<asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" CssClass="ckeditor"></asp:TextBox>
(2) Injizieren von js-Code – hier wird der js-Code am besten nach der Steuerung geschrieben oder <head>darin
<textarea id="textarea1" name="editor1">hallo!</textarea>
<scrip remove t type="text/javascrip remove t" >
CKEDITOR.replace('editor1', { height:400, width:800 });
. .</scrip去掉t>
Serversteuerungen:
<asp:TextBox ID="mckeditor" runat="server" TextMode="MultiLine"></asp:TextBox>
<scrip remove t type="text/javascrip remove t" >
CKEDITOR.replace('<%=mckeditor. ClientID %>');
. .</scrip去掉t>
=============================================================================================================
Zweite Referenz:
asp.net die Konfigurationsmethode von ckeditor 3.0.1 und ckfinder_aspnet_1.4.1.1
Laut den Anweisungen des http://ckeditor.com.cn/docs/ ist CKEditor auf der Webseite konfiguriert, und wenn man sie im Browser betrachtet, finde ich, dass die Benutzeroberfläche von CKEditor tatsächlich sehr schön ist, aber als ich gerne die Bild-Upload-Funktion ausprobieren wollte, habe ich den Button zum Hochladen des Bildes nicht gesehen.
Bei weiteren Online-Recherchen kam das Fazit, dass "CKEditor selbst keine Upload-Funktion hat und mit CKFinder integriert werden muss, um die Upload-Funktion zu erreichen".
Dann laden Sie CKFinder 1.4.1.1 für Asp.net herunter, entpacken Sie es und legen Sie den Ckfinder-Ordner in das Root-Verzeichnis des Projekts – denn viele Quellen im Internet empfehlen, CKEditor und CKFinder im selben Verzeichnis zu speichern. Und so werden wir ohne Grund zwei weitere Ordner in unserem Projekt haben. Ich selbst habe einen Fetisch für Sauberkeit eines Codes, glaube ich,
Hinterlasse einen Ordner als Zeichen des Respekts für den Autor, das wird ausreichen. Zwei zu behalten, würde mich sehr unwohl fühlen lassen.
Bevor wir CKFinder in CKEditor integrieren, müssen wir CKFinder auch etwas konfigurieren. Kluge Freunde sollten leicht denken, dass es sich um ein Plug-in zum Hochladen von Dateien handelt und die meisten zu konfigurierenden Dinge der Weg zum Hochladen sind.
Der Standard-Upload-Pfad von CKFinder ist der Userfiles-Ordner in einem eigenen Verzeichnis, aber ich habe CKFinder in den CKEditor-Ordner gelegt. Wenn ich das Image in den Userfiles speichere, muss das System den dreischichtigen Ordner umgehen, um die Datei oder das Image zu finden, daher plane ich, das Image in den upFile-Ordner im Root-Verzeichnis des Projekts hochzuladen.
Um diese Funktion zu implementieren, musst du die config.ascx-Datei unter CKFinder ändern, um BaseUrl = "/ckfinder/userfiles/" in BaseUrl = "~/upFile/" zu ändern. Dann schneide ich die CKFinder.dll-Dateien aus dem CKFinder/bin-Ordner in den bin-Ordner des Systemprojekts. Oder führe CKFinder.dll ins Projekt ein, indem du Referenzen hinzufügst.
Als Nächstes können wir CKEditor zum Dateihochladen verwenden:
Legen Sie den CKFinder-Ordner in den CKEditor-Ordner und importieren Sie auf der Seite die js-Dateien beider:
<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>
Es gibt zwei Möglichkeiten, den Editor auf eine Steuerung zu verweisen:
Eine Möglichkeit ist, den Client-Control-Textbereich zu verwenden:
<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 (Herausgeber, 'http://www.cnblogs.com/ckeditor/ckfinder/');
. .</scrip去掉t>
Die zweite ist die Verwendung des serverseitigen Steuerungstextfelds:
<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 (Herausgeber, 'http://www.cnblogs.com/ckeditor/ckfinder/');
Persönlich denke</scrip去掉t> ich, da es ein asp.net Programm ist, solltest du die serverseitigen Steuerungen verwenden. Obwohl es etwas langsamer läuft als Client-Steuerungen, ist die Entwicklung etwas schneller. Und als Programmierer probieren wir immer gerne alle Möglichkeiten aus, bevor wir uns für die entscheiden, die uns gefällt.
Tatsächlich kann man der Steuerung auch Werte zuweisen, ohne Text='<%# Bind("info") %>' zu verwenden, und sie direkt im Backcode verwenden
this.txtContent.Text="Anfangswert"
Es ist auch möglich. Du kannst auch den folgenden Code direkt verwenden, um den Wert zu erhalten:
CKFinder und CKEditor-Code. Wenn ich die Seite direkt mit dem Editor ausführe, liefert der Compiler folgenden Fehler:
string content=this.txtContent.Text
Hinweis: Das Attribut TextMode="MultiLine" ist unerlässlich, sonst wäre der Wert null.
Ich habe vor dem Debuggen des Programms nicht optimiert
Der Typ- oder Namensraumname "ControlDesigner" existiert nicht im Namensraum "System.Web.UI.Design" (fehlt ihm die Assemblerreferenz?)
Der Fehler befindet sich in Zeile 19 von ckeditor\ckfinder\_source\FileBrowserDesigner.cs, also vereinfacht man die Datei einfach:
Der erste Schritt besteht darin, den ckeditor zu optimieren: Löschen Sie die Ordner _samples und _source, und im lang-Verzeichnis können nur drei Sprachdateien gespeichert werden: en.js, zh.js und zh-cn.js;
Der zweite Schritt ist, ckfinder zu optimieren: Löschen Sie die Ordner _samples und _source und behalten Sie nur die en.js-, zh.js- und zh-cn.js-Sprachdateien im lang-Verzeichnis.
Beachten Sie hier die zweite Zeile des JS-Codes: CKFinder.SetupCKEditor (Editor, 'http://www.cnblogs.com/ckeditor/ckfinder/'); , wobei das "http://www.cnblogs.com/ckeditor/ckfinder/" der relative Pfad von ckfinder zur aktuellen Seite ist,
Bitte kopieren und fügen Sie den Code nicht direkt ein, sonst kann beim Hochladen von Bildern folgender Fehler auftreten:
Beschreibung: HTTP 404. Die Ressource, nach der du suchst (oder eine ihrer Abhängigkeiten), könnte entfernt worden sein, ihr Name wurde geändert oder sie ist vorübergehend nicht verfügbar. Bitte überprüfen Sie die folgende URL und stellen Sie sicher, dass sie korrekt geschrieben ist.
Angeforderte URL: /admin/ckeditor/ckfinder/core/connector/aspx/connector.aspx
Wenn du den ckfinder also nicht wie ich in den ckeditor-Ordner legen möchtest, ist das in Ordnung, solange du die Pfadänderungen hier korrekt ausfüllst.
Ich dachte, das würde als die ganze Arbeit gelten, aber als ich das Bild hochgeladen habe, erschien folgende Aufforderung:
Aus Sicherheitsgründen kann die Akte nicht eingesehen werden. Bitte wenden Sie sich an Ihren Systemadministrator und prüfen Sie das CKFinder-Profil.
Wie man so schön sagt, gibt es keine Möglichkeit, dass gute Dinge schwer zu essen sind. Ich kann nur den besten Lehrer fragen – Baidu. Kopiere die obigen Prompt-Informationen in das Baidu-Suchfeld, und nachdem ich das Auto betreten hatte, fand ich einen Beitrag über die PHP-Integration von ckeditor. So machen Sie das:
Ändere die config.ascx-Datei unter CKFinder, um den Rückgabewert der öffentlichen Überschreibungsfunktion CheckAuthentication() von return false auf return true zu ändern.
Beim erneuten Test wurde das Bild erfolgreich hochgeladen! |
Veröffentlicht am 18.04.2015 19:11:55
|
|
|
