De senaste versionerna av CKEditor och CKFinder kan laddas ner från den officiella webbplatsen (http://cksource.com).
Lägg de två ovanstående resurserna i webbplatsens rotkatalog: /CKEditor (här i version 3.6.2 måste du lägga _Samples\ckeditor-mappen i den komprimerade mappen) och /CKFinder (kasuskänslig, du kan lägga mappen direkt här). )
Observera att det ibland finns ett fel i genereringen. Till exempel finns det dubbletter av AssemblyTitle-typtaggar, främst eftersom webbplatsen har mer än ett AssemblyInfo.cs för att ta bort den nedladdade filen. Eller radera mappen _source. Om du har några frågor här kan du kontakta mig: my QQ: 515072775
Att använda CKEditor på en sida:
<textarea cols="80" id="prcontent" name="content" rader="50"> Hej, din användning var framgångsrik! </textarea>
<scrip remove ttype="text/javascrip remove t" >
CKEDITOR.replace('content', { height:200, width: 520 });
</scrip去掉t>. .
CKEditor har ingen uppladdningsfunktion, så den måste laddas upp med CKFinder
Steg 1: Webbplatsen behöver referera till dll:n för CKFinder (katalog: /CKFinder/bin/Release/CKFinder.dll)
Steg 2: Konfigurera CKEditorns config.js (katalog: /CKEditor/config.js) i funktionen CKEDITOR.editorConfig, och onödiga funktioner kan tas bort
CKEDITOR.editorConfig = function(config) {
config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html'; Skriv inte "~/ckfinder/..." eller "/ckfinder/..."
config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html? Typ=Bilder';
config.filebrowserFlashBrowseUrl = 'ckfinder/ckfinder.html? Typ=Flash';
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'; Storleksinställningen för popup-fönstret Bläddra i Browse Server
config.filebrowserWindowHeight = '500';
}
CKFinder.setupCKEditor(null, '.. /ckfinder/'); Observera att ckfinderens bana motsvarar den faktiska placeringen
CKFinders konfiguration:
Öppna användarkontrollen config.ascx under "ckfinder\" och ändra dess BaseUrl-sökväg:
BaseUrl = "~/ckfinder/userfiles/"; eller BaseUrl = "ckfinder/userfiles/";
Här är en extra poäng: det är användbart att testa i IIS. Annars, om uppladdningen misslyckas, kommer du att tro att det är något fel på konfigurationen.
CKEditor har en uppladdningsfunktion efter att konfigurationen är klar, men vad händer om bildfilen är det ursprungliga bildnamnet och vill ändra det till ett slumpmässigt filnamn? Titta sedan på det tredje steget.
Steg 3: Modifiera källkoden till CKFinder. CKFinder levereras med egen källkod, katalog: /CKFinde/_source
Skapa ett nytt aktuellt projekt i VS till CKFinde/_source/CKFinder.Net.sln, lösningsfilen som laddas ner här kanske inte öppnas i VS2008, du kan välja att lägga till ett nytt projekt eller använda en nyare version av VS för att öppna det.
1) Öppna filen /Settings/ConfigFile.cs
Hitta 27 rader och lägg till ett attribut: public bool RandomReName; Byt namn slumpmässigt
Lokalisera 67 rader och tilldela ett värde till egenskapen just nu: RandomReName = true; Standardvärdet är sant
Spara den stängda filen
2) Öppna filen /Connector/Config.cs
Lokalisera de 62 raderna, lägg till ett attribut:
offentlig bool RandomReName
{
get { returnSettings.ConfigFile.Current.RandomReName; }
}
Spara den stängda filen
3) Öppna filen /Connector/CommandHandlers/FileUploadCommandHandler.cs
Hitta rad 64 och lägg till en domskod:
if ( Config.Current.RandomReName) // Använd ett slumpmässigt namn
sFilnamn =DateTime.Now.ToString("yyyyMMddHHmmssfff") + "." +sExtension;
Spara den stängda filen
4) Generera projektet, skriva över /ckfinder/_source/bin/Debug/CKFinder.dll /ckfinder/bin/Release/CKFinder.dll eller ta bort tidigare tillagda referenser till webbplatsprojektet och ta bort dll:n från CKFinder.Net projektet igen
Sista steget: Öppna /ckfinder/config.ascx
Lokalisera 40 rader och lägg till ett attribut: (Faktum är att du kan lägga till detta eller inte, eftersom det fanns ett standardvärde inställt tidigare, men det måste sättas till false när du använder det ursprungliga namnet)
//上传完毕后使用随机文件名
RandomReName = sann;
Spara stängt
Okej, nu när konfigurationen har fungerat kan CKEditor ha en uppladdningsfunktion. Inställningarna för andra funktioner kommer att fortsätta studeras när du har tid~
En påminnelse till: CKEditor och CKFinder-mappar har många onödiga saker, som namn med understreck, .net-projekt behöver inte php, asp.
Om det uppstår ett fel vid uppladdning av en fil: Filen kan inte visas av säkerhetsskäl. Vänligen kontakta din systemadministratör och kontrollera CKFinder-profilen.
Du behöver ändra config.ascx-filen
public override bool CheckAuthentication()
{
reture false;
}
Modifierad till:
public override bool CheckAuthentication()
{
Formulärvalidering
returnRequest.IsAuthenticated;
}
3. Tillämpa CKEditor-kontroll på sidan [två metoder, a och b]
[A: Citerar INSTALL.html i det komprimerade paketet ]
Om du vill integrera CKEditor med din ASP.NET-sida, följ stegen nedan.
1. Gå till den officiella CKEditor-nedladdningssidan och ladda ner de senaste versionerna av både CKEditor 3.x och CKEditor för ASP.NET Control.
2. Packa upp båda installationspaketen till önskad plats Ta bort n.
3. Lägg till en referens till CKEditor för ASP.NET Control på din webbplats.
I Visual Studio, använd kommandot Add Reference och bläddra till filen bin\Release\CKEditor.NET.dll från den uppackade CKEditor för ASP.NET installationspaket. Du kan också manuellt kopiera DLL-filen till bin-mappen i ditt program.
4. Kopiera de uppackade redigeringsfilerna från CKEditor 3.x installationspaketet och klistra in dem i applikationskatalogen på din webbplats.
5. Registrera CKEditor för ASP.NET Control på din sida:
<%@ Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor" %>
6. Infoga en CKEditor-instans i sidtexten:
<CKEditor:CKEditorControl ID="CKEditor1" runat="server"></CKEditor:CKEditorControl>
【b】
1. <head>Lägg till motsvarande js-referens på sidan:
<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>Lägg sedan till följande kod på platsen där kontrollen behöver placeras, och det finns följande användningsmetoder:
(1) Lägg till det specificerade klassattributet till kontrollen
<TextArea id="Textarea1" name="editor1" class="ckeditor">hej!</textarea>
Serverkontroller:
<asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" CssClass="ckeditor"></asp:TextBox>
(2) Injicera js-kod – här skrivs js-koden bäst efter kontrollen, eller <head>i den
<textarea id="textarea1" name="editor1">hej!</textarea>
<scrip remove t type="text/javascrip remove t" >
CKEDITOR.replace('editor1', { height:400, width:800 });
</scrip去掉t>. .
Serverkontroller:
<asp:TextBox ID="mckeditor" runat="server" TextMode="MultiLine"></asp:TextBox>
<scrip remove t type="text/javascrip remove t" >
CKEDITOR.replace('<%=mckeditor. ClientID %>');
</scrip去掉t>. .
=============================================================================================================
Andra referensen:
asp.net konfigurationsmetoden för ckeditor 3.0.1 och ckfinder_aspnet_1.4.1.1
Enligt instruktionerna i http://ckeditor.com.cn/docs/ är CKEditor konfigurerad på webbsidan, och när den visas i webbläsaren tycker jag att gränssnittet i CKEditor verkligen är väldigt vackert, men när jag glatt ville prova bilduppladdningsfunktionen såg jag inte knappen för att ladda upp bilden.
När jag fortsatte söka online kom slutsatsen att "CKEditor har ingen uppladdningsfunktion i sig, och den måste integreras med CKFinder för att uppnå uppladdningsfunktionen".
Ladda sedan ner CKFinder 1.4.1.1 för Asp.net, packa upp den och lägg ckfinder-mappen i projektets rotkatalog – eftersom många källor på internet säger att det är bäst att lägga CKEditor och CKFinder i samma nivåkatalog. Och på så sätt kommer vi att ha två mappar till i vårt projekt utan anledning. Jag själv har en kodrenlighetsfetisch, tror jag,
Lämna en mapp som en gest av respekt för författaren, det räcker. Att ha två skulle göra mig väldigt obekväm.
Innan vi integrerar CKFinder i CKEditor behöver vi också konfigurera CKFinder lite. Smarta vänner borde lätt tänka att eftersom det är ett plugin för att ladda upp filer, så är det mesta som ska konfigureras vägen för att ladda upp filer.
Standarduppladdningssökvägen för CKFinder är userfiles-mappen i en egen katalog, men jag har lagt CKFinder i CKEditor-mappen, om jag lagrar bilden i userfiles måste systemet kringgå trelagersmappen för att hitta filen eller bilden, så jag planerar att ladda upp bilden till upFile-mappen i projektets rotkatalog.
För att implementera denna funktion behöver du ändra config.ascx-filen under CKFinder för att ändra BaseUrl = "/ckfinder/userfiles/" till BaseUrl = "~/upFile/". Klipp sedan ut CKFinder.dll-filerna från CKFinder/bin-mappen till bin-mappen i systemprojektet. Eller introducera CKFinder.dll i projektet genom att lägga till referenser.
Nästa steg är att använda CKEditor för filuppladdning:
Lägg CKFinder-mappen i CKEditor-mappen och importera js-filerna från båda:
<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>
Det finns två sätt att referera editorn till en kontroll:
En är att använda klientkontrolltextområdet:
<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 (redaktör, 'http://www.cnblogs.com/ckeditor/ckfinder/');
</scrip去掉t>. .
Den andra är att använda serversidans kontrolltextruta:
<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 (redaktör, 'http://www.cnblogs.com/ckeditor/ckfinder/');
Personligen</scrip去掉t> tycker jag att eftersom det är ett asp.net program, så använd serverkontrollerna. Även om det går lite långsammare än klientkontrollerna, går utvecklingen lite snabbare. Och som programmerare gillar vi alltid att prova alla möjligheter innan vi väljer den vi gillar själva.
Faktum är att du också kan tilldela värden till kontrollen utan att använda Text='<%# Bind("info") %>', och använda det direkt i backkoden
this.txtContent.Text="Initial value"
Det är också möjligt. Du kan också använda följande kod direkt för att få fram värdet:
CKFinder och CKEditor-kod. När jag kör sidan direkt med editorn ger kompilatorn följande fel:
stränginnehåll=detta.txtInnehåll.Text
Observera: TextMode="MultiLine"-attributet är avgörande, annars blir värdet null.
Jag effektiviserade inte innan jag felsökte programmet
Typ- eller namnrymdsnamnet "ControlDesigner" finns inte i namnrymden "System.Web.UI.Design" (saknar det monteringsreferens?)
Felet ligger på rad 19 i ckeditor\ckfinder\_source\FileBrowserDesigner.cs, så förenkla helt enkelt filen:
Det första steget är att effektivisera ckeditorn: ta bort mapparna _samples och _source, och endast tre språkfiler kan sparas i lang-katalogen: en.js, zh.js och zh-cn.js;
Det andra steget är att effektivisera ckfinder: radera mapparna _samples och _source och behåll endast en.js-, zh.js- och zh-cn.js-språkfilerna i lang-katalogen.
Notera den andra raden i js-koden här: CKFinder.SetupCKEditor (editor, 'http://www.cnblogs.com/ckeditor/ckfinder/'); , där "http://www.cnblogs.com/ckeditor/ckfinder/" är den relativa banan för ckfinder till den aktuella sidan,
Vänligen kopiera och klistra inte in koden direkt, annars kan följande fel dyka upp vid uppladdning av bilder:
Beskrivning: HTTP 404. Resursen du letar efter (eller en av dess beroenden) kan ha tagits bort, eller dess namn har ändrats, eller är tillfälligt otillgängligt. Vänligen kontrollera följande URL och se till att den är korrekt stavad.
Efterfrågad URL: /admin/ckeditor/ckfinder/core/connector/aspx/connector.aspx
Så om du inte vill lägga ckfinder i ckeditor-mappen som jag gjorde, är det okej, så länge du fyller i sökvägsändringarna korrekt här.
Jag trodde att detta skulle räknas som allt arbete, men när jag laddade upp bilden dök följande prompt upp:
Av säkerhetsskäl kan filen inte ses. Vänligen kontakta din systemadministratör och kontrollera CKFinder-profilen.
Det finns ingen chans, som ordspråket säger, att goda saker är svåra att äta. Jag kan bara fråga den bästa läraren – Baidu. Kopiera informationen om ovanstående prompt till Baidu-sökrutan och efter att ha gått in i bilen hittade jag ett inlägg om PHP-integration ckeditor. Så här gör du:
Modifiera config.ascx-filen under CKFinder för att ändra returvärdet för den publika överskrivningsfunktionen CheckAuthentication() från return false till return true.
Testade igen, bilden laddades upp framgångsrikt! |
Publicerad på 2015-04-18 19:11:55
|
|
|
