De nieuwste versies van CKEditor en CKFinder kunnen worden gedownload van de officiële website (http://cksource.com).
Zet bovenstaande twee bronnen in de rootmap van de website: /CKEditor (hier in versie 3.6.2 moet je de map _Samples\ckeditor in de gecomprimeerde map zetten) en /CKFinder (hoofdletter-ongevoelig, je kunt de map direct hier plaatsen). )
Let op, hier is er soms een fout in de generatie. Er zijn bijvoorbeeld dubbele AssemblyTitle-tags, vooral omdat de website meer dan één AssemblyInfo.cs heeft om het gedownloade bestand te verwijderen. Of verwijder de map _source. Als je hier vragen hebt, kun je contact met mij opnemen: mijn QQ: 515072775
CKEditor gebruiken op een pagina:
<textarea cols="80" id="prcontent" name="content" rijen="50"> Hallo, uw gebruik is geslaagd! </textarea>
<scrip remove ttype="text/javascrip remove t" >
CKEDITOR.replace('content', { height:200, width: 520 });
. .</scrip去掉t>
CKEditor heeft geen uploadfunctie, dus het moet met CKFinder worden geüpload
Stap 1: De website moet de dll van CKFinder (directory: /CKFinder/bin/Release/CKFinder.dll) verwijzen
Stap 2: Configureer de config.js van de CKEditor (directory: /CKEditor/config.js) in de functie CKEDITOR.editorConfig, en onnodige functies kunnen worden verwijderd
CKEDITOR.editorConfig = function(config) {
config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html'; Schrijf niet "~/ckfinder/..." of "/ckfinder/..."
config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html? Type=Afbeeldingen';
config.filebrowserFlashBrowseUrl = 'ckfinder/ckfinder.html? Type = 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'; De grootte-instelling van de Browse Server-pop-up
config.filebrowserWindowHeight = '500';
}
CKFinder.setupCKEditor(null, '.. /ckfinder/'); Let op dat het pad van de ckfinder overeenkomt met de werkelijke plaatsing
CKFinder's configuratie:
Open de user control config.ascx onder "ckfinder\" en wijzig het BaseUrl-pad:
BaseUrl = "~/ckfinder/userfiles/"; of BaseUrl = "ckfinder/userfiles/";
Hier is een extra punt: het is handig om te testen in IIS. Anders, als de upload niet lukt, denk je dat er iets mis is met de configuratie.
CKEditor heeft een uploadfunctie nadat de configuratie is voltooid, maar wat als het afbeeldingsbestand de oorspronkelijke afbeeldingsnaam heeft en deze wil veranderen in een willekeurige bestandsnaam? Kijk dan naar de derde stap.
Stap 3: Pas de broncode van CKFinder aan. CKFinder wordt geleverd met een eigen broncode, map: /CKFinde/_source
Maak een nieuw huidig project aan in VS naar CKFinde/_source/CKFinder.Net.sln, het oplossingsbestand dat hier is gedownload opent mogelijk niet in VS2008, je kunt ervoor kiezen een nieuw project toe te voegen of een nieuwere versie van VS te gebruiken om het te openen.
1) Open het bestand /Settings/ConfigFile.cs
Zoek 27 rijen en voeg een attribuut toe: public bool RandomReName; Willekeurig hernoemen
Zoek 67 rijen op en ken nu een waarde toe aan de eigenschap: RandomReName = true; De standaardwaarde is waar
Sla het gesloten bestand op
2) Open het bestand /Connector/Config.cs
Zoek de 62 rijen op, voeg een attribuut toe:
publieke bool RandomReName
{
get { returnSettings.ConfigFile.Current.RandomReName; }
}
Sla het gesloten bestand op
3) Open het bestand /Connector/CommandHandlers/FileUploadCommandHandler.cs
Zoek regel 64 en voeg een oordeelscode toe:
if ( Config.Current.RandomReName) // Gebruik een willekeurige naam
sBestandsnaam =DatumTijd.Nu.AanStreng("yyyyMMddHHmmssfff") + "." +sExtensie;
Sla het gesloten bestand op
4) Het project opnieuw genereren, /ckfinder/_source/bin/Debug/CKFinder.dll /ckfinder/bin/Release/CKFinder.dll overschrijven of de eerder toegevoegde verwijzingen naar het websiteproject verwijderen en de dll opnieuw uit het CKFinder.Net project verwijderen
Laatste stap: Open /ckfinder/config.ascx
Zoek 40 regels en voeg een attribuut toe: (Je kunt dit toevoegen of niet, want er was eerder een standaardwaarde ingesteld, maar deze moet op false staan bij gebruik van de oorspronkelijke naam)
//上传完毕后使用随机文件名
RandomReName = waar;
Opgeslagen gesloten
Oké, nu de configuratie succesvol is, kan CKEditor een uploadfunctie hebben. De instellingen van andere functies worden bestudeerd als je tijd hebt~
Nog een herinnering: mappen CKEditor en CKFinder bevatten veel onnodige dingen, zoals namen met onderscores, .net-projecten hebben geen php nodig, asp.
Als er een fout is bij het uploaden van een bestand: Het bestand kan om veiligheidsredenen niet worden bekeken. Neem contact op met uw systeembeheerder en bekijk het CKFinder-profiel.
Je moet het config.ascx-bestand aanpassen
publieke override bool CheckAuthentication()
{
Retoure false;
}
Aangepast tot:
publieke override bool CheckAuthentication()
{
Formuliervalidatie
returnRequest.IsAuthenticated;
}
3. Pas CKEditor-controle toe op de pagina [twee methoden, a en b]
[A: Het citeren van de INSTALL.html in het gecomprimeerde pakket ]
Als je CKEditor wilt integreren met je ASP.NET pagina, volg dan de onderstaande stappen.
1. Ga naar de officiële CKEditor downloadsite en download de nieuwste versies van zowel CKEditor 3.x als de CKEditor voor ASP.NET Control.
2. Pak beide installatiepakketten uit naar een gewenste locatie. Verwijder n.
3. Voeg een verwijzing toe aan de CKEditor for ASP.NET Control aan je website.
Gebruik in Visual Studio het Add Reference-commando en blader naar het bin\Release\CKEditor.NET.dll-bestand vanuit de unpacked CKEditor voor ASP.NET installatiepakket. Je kunt het DLL-bestand ook handmatig kopiëren naar de bin-map van je applicatie.
4. Kopieer de unpacked editorbestanden uit het CKEditor 3.x installatiepakket en plak ze in de applicatiemap van je website.
5. Registreer de CKEditor voor ASP.NET Control op je pagina:
<%@ Register Assembly="CKEditor.NET" naamruimte="CKEditor.NET" TagPrefix="CKEditor" %>
6. Voeg een CKEditor-instantie in de paginabody in:
<CKEditor:CKEditorControl ID="CKEditor1" runat="server"></CKEditor:CKEditorControl>
【b】
1. <head>Voeg de bijbehorende js-referentie toe aan de pagina:
<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. Voeg <body>vervolgens de volgende code toe aan de locatie waar de besturing geplaatst moet worden, en er zijn de volgende gebruiksmethoden:
(1) Voeg het gespecificeerde klasse-attribuut toe aan de controle
<Textarea ID="Textarea1" naam="Editor1" klasse="ckeditor">hallo!</textarea>
Serverbesturing:
<asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" CssClass="ckeditor"></asp:TextBox>
(2) Injecteer js-code - hier wordt de js-code het beste geschreven na de controle, of <head>erin
<textarea id="textarea1" name="editor1">hallo!</textarea>
<scrip remove t type="text/javascrip remove t" >
CKEDITOR.replace('editor1', { hoogte:400, breedte:800 });
. .</scrip去掉t>
Serverbesturing:
<asp:TextBox ID="mckeditor" runat="server" TextMode="MultiLine"></asp:TextBox>
<scrip remove t type="text/javascrip remove t" >
CKEDITOR.replace('<%=mckeditor. ClientID %>');
. .</scrip去掉t>
=============================================================================================================
Tweede referentie:
asp.net de configuratiemethode van ckeditor 3.0.1 en ckfinder_aspnet_1.4.1.1
Volgens de instructies van de http://ckeditor.com.cn/docs/ is CKEditor geconfigureerd op de webpagina, en wanneer ik het in de browser bekijk, vind ik de interface van CKEditor inderdaad erg mooi, maar toen ik graag de uploadfunctie wilde proberen, zag ik de knop om de afbeelding te uploaden niet.
Verder zoeken online concludeerde de conclusie dat "CKEditor zelf geen uploadfunctie heeft, en dat deze geïntegreerd moet worden met CKFinder om de uploadfunctie te bereiken".
Download vervolgens CKFinder 1.4.1.1 voor Asp.net, pak het uit en plaats de ckfinder-map in de hoofdmap van het project – omdat veel bronnen op internet zeggen dat het het beste is om CKEditor en CKFinder in dezelfde levelmap te plaatsen. En op deze manier hebben we zonder reden twee extra mappen in ons project. Ik heb zelf een fetisj voor code netheid, denk ik,
Laat een map achter als teken van respect voor de auteur, dat is genoeg. Twee houden zou me erg ongemakkelijk maken.
Voordat we CKFinder integreren in CKEditor, moeten we CKFinder ook een beetje configureren. Slimme vrienden zouden gemakkelijk moeten denken dat omdat het een plug-in is voor het uploaden van bestanden, de meeste dingen die geconfigureerd moeten worden het pad zijn om bestanden te uploaden.
Het standaard uploadpad van CKFinder is de userfiles-map in een eigen map, maar ik heb CKFinder in de CKEditor-map gezet; als ik de image in de userfiles opsla, moet het systeem de drielaagse map omzeilen om het bestand of de image te vinden, dus ik ben van plan de image te uploaden naar de upFile-map in de rootmap van het project.
Om deze functie te implementeren, moet je het config.ascx-bestand onder CKFinder aanpassen om BaseUrl = "/ckfinder/userfiles/" te veranderen in BaseUrl = "~/upFile/". Knip vervolgens de CKFinder.dll-bestanden uit de CKFinder/bin-map naar de bin-map van het systeemproject. Of CKFinder.dll introduceren in het project door referenties toe te voegen.
Vervolgens kunnen we CKEditor gebruiken met het uploaden van bestanden:
Plaats de CKFinder-map in de CKEditor-map en importeer op de pagina de js-bestanden van beide:
<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>
Er zijn twee manieren om de editor naar een besturing te verwijzen:
Eén daarvan is het gebruik van het clientcontrole-tekstgebied:
<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 (redacteur, 'http://www.cnblogs.com/ckeditor/ckfinder/');
. .</scrip去掉t>
De tweede is het gebruik van het server-side control textbox:
<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 (redacteur, 'http://www.cnblogs.com/ckeditor/ckfinder/');
Persoonlijk denk</scrip去掉t> ik dat, omdat het een asp.net programma is, je de server-side besturing moet gebruiken. Hoewel het iets langzamer draait dan clientcontroles, gaat de ontwikkeling iets sneller. En als programmeurs proberen we altijd alle mogelijkheden uit voordat we de keuze kiezen die we leuk vinden.
Je kunt zelfs waarden aan de besturing toewijzen zonder Text='<%# Bind("info") %>' te gebruiken, en deze direct in de backcode gebruiken
this.txtContent.Text="Initiële waarde"
Het is ook mogelijk. Je kunt ook direct de volgende code gebruiken om de waarde te krijgen:
CKFinder en CKEditor-code. Wanneer ik de pagina direct met de editor uitvoer, geeft de compiler de volgende foutmelding:
string content=dit.txtContent.Text
Opmerking: Het attribuut TextMode="MultiLine" is essentieel, anders is de waarde nul.
Ik heb het programma niet gestroomlijnd voordat ik het debuggde.
De type- of naamruimtenaam "ControlDesigner" bestaat niet in de naamruimte "System.Web.UI.Design" (ontbreekt er assemblyreferentie?)
De fout staat op regel 19 van ckeditor\ckfinder\_source\FileBrowserDesigner.cs, dus vereenvoudig het bestand simpelweg:
De eerste stap is het stroomlijnen van de ckeditor: verwijder de mappen _samples en _source, en er kunnen slechts drie taalbestanden in de lang-map worden bewaard: en.js, zh.js en zh-cn.js;
De tweede stap is het stroomlijnen van ckfinder: verwijder de mappen _samples en _source, en bewaar alleen de bestanden van de en.js, zh.js en zh-cn.js taal in de lang-map.
Let op de tweede regel van de js-code hier: CKFinder.SetupCKEditor(editor, 'http://www.cnblogs.com/ckeditor/ckfinder/'); , waarbij de "http://www.cnblogs.com/ckeditor/ckfinder/" het relatieve pad is van ckfinder tot de huidige pagina,
Kopieer en plak de code alstublieft niet direct, anders kan de volgende foutmelding verschijnen bij het uploaden van afbeeldingen:
Beschrijving: HTTP 404. De bron die je zoekt (of een van de afhankelijkheden) kan verwijderd zijn, de naam is veranderd, of tijdelijk niet beschikbaar. Controleer alstublieft de volgende URL en zorg dat deze correct gespeld is.
Aangevraagde URL: /admin/ckeditor/ckfinder/core/connector/aspx/connector.aspx
Dus als je de ckfinder niet in de ckeditor-map wilt zetten zoals ik deed, is dat prima, zolang je de padwijzigingen hier correct invult.
Ik dacht dat dit als het werk zou worden beschouwd, maar toen ik de afbeelding uploadde, verscheen de volgende prompt:
Om veiligheidsredenen kan het bestand niet worden bekeken. Neem contact op met uw systeembeheerder en bekijk het CKFinder-profiel.
Er is geen manier dat, zoals het gezegde luidt, goede dingen moeilijk te eten zijn. Ik kan alleen de beste leraar vragen - Baidu. Kopieer bovenstaande promptinformatie naar het Baidu-zoekvak, en nadat ik de auto had binnengegaan, vond ik een bericht over PHP-integratie met ckeditor. Zo doe je het:
Pas het config.ascx-bestand onder CKFinder aan om de returnwaarde van de public override-functie CheckAuthentication() te veranderen van return false naar return true.
Opnieuw getest, de afbeelding werd succesvol geüpload! |
Geplaatst op 18-04-2015 19:11:55
|
|
|
