Cele mai recente versiuni ale CKEditor și CKFinder pot fi descărcate de pe site-ul oficial (http://cksource.com).
Pune cele două resurse de mai sus în directorul de bază al site-ului: /CKEditor (aici, în versiunea 3.6.2, trebuie să pui folderul _Samples\ckeditor în folderul comprimat) și /CKFinder (indiferent la majuscule, poți pune folderul direct aici). )
Notă, aici uneori există o eroare în generare. De exemplu, există etichete duplicate de tip AssemblyTitle, în principal pentru că site-ul are mai multe AssemblyInfo.cs de a șterge fișierul descărcat. Sau șterge folderul _source. Dacă aveți întrebări aici, mă puteți contacta: my QQ: 515072775
Folosind CKEditor pe o pagină:
<textarea cols="80" id="prcontent" nume="conținut" rânduri="50"> Bună, utilizarea ta a fost un succes! </textarea>
<scrip remove ttype="text/javascrip remove t" >
CKEDITOR.replace('content', { height:200, width: 520 });
. .</scrip去掉t>
CKEditor nu vine cu o funcție de upload, deci trebuie încărcat cu CKFinder
Pasul 1: Site-ul trebuie să facă referire la dll al CKFinder (director: /CKFinder/bin/Release/CKFinder.dll)
Pasul 2: Configurează config.js CKEditor-ului (director: /CKEditor/config.js) în funcția CKEDITOR.editorConfig, iar funcțiile inutile pot fi eliminate
CKEDITOR.editorConfig = function(config) {
config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html'; Nu scrie "~/ckfinder/..." sau "/ckfinder/..."
config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html? Tip=Imagini;
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'; Setarea de dimensiune a pop-up-ului Browse Server
config.filebrowserWindowHeight = '500';
}
CKFinder.setupCKEditor(null, '.. /cazator/'); Rețineți că traiectoria detectorului corespunde poziționării reale
Configurația CKFinder:
Deschide controlul utilizatorului config.ascx sub "ckfinder\" și schimbă-i calea BaseUrl:
BaseUrl = "~/ckfinder/userfiles/"; sau BaseUrl = "ckfinder/userfiles/";
Iată un punct în plus: este util să testezi în IIS. Altfel, dacă încărcarea nu reușește, vei crede că este ceva în neregulă cu configurația.
CKEditor are o funcție de încărcare după ce configurarea este finalizată, dar ce se întâmplă dacă fișierul imagine este numele original al imaginii și vrea să-l schimbe într-un nume aleatoriu? Apoi uită-te la al treilea pas.
Pasul 3: Modifică codul sursă al CKFinder. CKFinder vine cu propriul său cod sursă, director: /CKFinde/_source
Creează un proiect nou curent în VS către CKFinde/_source/CKFinder.Net.sln, fișierul de soluție descărcat aici s-ar putea să nu se deschidă în VS2008, poți alege să adaugi un proiect nou sau să folosești o versiune mai nouă de VS pentru a-l deschide.
1) Deschide fișierul /Settings/ConfigFile.cs
Localizează 27 de rânduri și adaugă un atribut: public bool RandomReName; Redenumirea aleatorie
Localizează 67 de rânduri și atribuie o valoare proprietății chiar acum: RandomReName = adevărat; Valoarea implicită este adevărată
Salvează fișierul închis
2) Deschide fișierul /Connector/Config.cs
Localizează cele 62 de rânduri, adaugă un atribut:
public bool RandomReName
{
get { returnSettings.ConfigFile.Current.RandomReName; }
}
Salvează fișierul închis
3) Deschide fișierul /Connector/CommandHandlers/FileUploadCommandHandler.cs
Localizează linia 64 și adaugă un cod de hotărâre:
if ( Config.Current.RandomReName) // Folosește un nume aleatoriu
sFileName =DateTime.Now.ToString("yyyyMMddHHmmssfff") + "." +sExtensie;
Salvează fișierul închis
4) Regenera proiectul, suprascrie /ckfinder/_source/bin/Debug/CKFinder.dll /ckfinder/bin/Release/CKFinder.dll sau elimină referințele adăugate anterior la proiectul site-ului și elimină din nou dll din proiectul CKFinder.Net
Ultimul pas: Deschide /ckfinder/config.ascx
Localizează 40 de linii și adaugă un atribut: (De fapt, poți adăuga sau nu, pentru că înainte exista o valoare implicită, dar trebuie setată ca fals când folosești numele original)
//上传完毕后使用随机文件名
RandomReName = adevărat;
Salvare închisă
Bine, acum că configurația a fost reușită, CKEditor poate avea o funcție de upload. Setările altor funcții vor continua să fie studiate când vei avea timp~
Încă o reamintire: folderele CKEditor și CKFinder au multe lucruri inutile, cum ar fi nume cu sublinii, proiectele .net nu au nevoie de php, asp.
Dacă există o eroare la încărcarea unui fișier: Fișierul nu poate fi vizualizat din motive de securitate. Vă rugăm să contactați administratorul de sistem și să verificați profilul CKFinder.
Trebuie să modifici fișierul config.ascx
public override bool CheckAuthentication()
{
reture false;
}
Modificat pentru:
public override bool CheckAuthentication()
{
Validarea formularului
returnRequest.IsAuthenticated;
}
3. Aplică controlul CKEditor pe pagină [două metode, a și b]
[R: Citate INSTALL.html în pachetul comprimat]
Dacă vrei să integrezi CKEditor cu pagina ta de ASP.NET, urmează pașii menționați mai jos.
1. Accesați site-ul oficial de descărcare CKEditor și descărcați cele mai recente versiuni atât ale CKEditor 3.x, cât și ale CKEditor pentru ASP.NET Control.
2. Despachetați ambele pachete de instalare către o locație dorită Îndepărtați n.
3. Adaugă o referință la CKEditor pentru Control ASP.NET pe site-ul tău.
În Visual Studio folosește comanda Add Reference și navighează către fișierul bin\Release\CKEditor.NET.dll din pachetul de instalare CKEditor for ASP.NET unpack. Poți, de asemenea, să copiezi manual fișierul DLL în folderul bin al aplicației tale.
4. Copiați fișierele editorului despachetate din pachetul de instalare CKEditor 3.x și lipiți-le în directorul aplicației site-ului dumneavoastră.
5. Înregistrează CKEditor pentru ASP.NET Control pe pagina ta:
<%@ Asamblarea registrului="CKEditor.NET" spațiul de nume="CKEditor.NET" TagPrefix="CKEditor" %>
6. Inserați o instanță CKEditor în corpul paginii:
<CKEditor:CKEditorControl ID="CKEditor1" runat="server"></CKEditor:CKEditorControl>
【b】
1. <head>Adaugă referința js corespunzătoare pe pagină:
<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. Apoi, <body>adăugați următorul cod la locația unde trebuie plasat controlul, iar următoarele metode de utilizare există:
(1) Adaugă atributul clasei specificat la control
<textarea id="textarea1" nume="editor1" clasă="ckeditor">bună!</textarea>
Controale serverului:
<asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" CssClass="ckeditor"></asp:TextBox>
(2) Injectează cod js – aici codul js este cel mai bine scris după control sau <head>în el
<textarea id="textarea1" nume="editor1">bună!</textarea>
<scrip remove t type="text/javascrip remove t" >
CKEDITOR.replace('editor1', { height:400, width:800 });
. .</scrip去掉t>
Controale serverului:
<asp:TextBox ID="mckeditor" runat="server" TextMode="MultiLine"></asp:TextBox>
<scrip remove t type="text/javascrip remove t" >
CKEDITOR.replace('<%=mckeditor. ClientID %>');
. .</scrip去掉t>
=============================================================================================================
A doua referință:
asp.net metoda de configurare a CKEDITOR 3.0.1 și ckfinder_aspnet_1.4.1.1
Conform instrucțiunilor din http://ckeditor.com.cn/docs/, CKEditor este configurat pe pagina web, iar când este vizualizat în browser, simt că interfața CKEditor este într-adevăr foarte frumoasă, dar când am vrut cu bucurie să încerc funcția de încărcare a imaginii, nu am văzut butonul pentru încărcarea imaginii.
Continuând căutările online, concluzia a fost că "CKEditor nu are o funcție de încărcare în sine și trebuie integrată cu CKFinder pentru a atinge funcția de upload".
Apoi descarcă CKFinder 1.4.1.1 pentru Asp.net, decomprimă-l și pune folderul ckfinder în directorul rădăcină al proiectului – pentru că multe surse de pe Internet spun că este mai bine să pui CKEditor și CKFinder în același director de nivel. Și astfel, vom avea încă două foldere în proiectul nostru fără niciun motiv. Eu însumi am o fetiș pentru curățenia codurilor, cred,
Lasă un dosar ca semn de respect pentru autor, asta va fi suficient. Să păstrez două m-ar face să mă simt foarte inconfortabil.
Înainte să integrăm CKFinder în CKEditor, trebuie să configurăm puțin și CKFinder. Prietenii deștepți ar trebui să creadă ușor că, fiind un plug-in pentru încărcarea fișierelor, majoritatea celor care trebuie configurate sunt căile către încărcarea fișierelor.
Calea implicită de încărcare a CKFinder este folderul userfiles din propriul său director, dar am pus CKFinder în folderul CKEditor, dacă stochez imaginea în userfiles, sistemul trebuie să ocolească folderul cu trei straturi pentru a găsi fișierul sau imaginea, așa că plănuiesc să încarc imaginea în folderul upFile din directorul de bază al proiectului.
Pentru a implementa această funcție, trebuie să modifici fișierul config.ascx sub CKFinder pentru a schimba BaseUrl = "/ckfinder/userfiles/" în BaseUrl = "~/upFile/". Apoi, taie fișierele CKFinder.dll din folderul CKFinder/bin în folderul bin al proiectului sistemului. Sau introduce-CKFinder.dll în proiect adăugând referințe.
Apoi, putem folosi CKEditor cu încărcarea fișierelor:
Pune folderul CKFinder în folderul CKEditor, iar în pagină, importă fișierele js ale ambelor:
<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>
Există două moduri de a referi editorul la un control:
Unul este să folosești clientul control 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 (editor, 'http://www.cnblogs.com/ckeditor/ckfinder/');
. .</scrip去掉t>
Al doilea este să folosești cutia de text de control de pe partea serverului:
<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 (editor, 'http://www.cnblogs.com/ckeditor/ckfinder/');
</scrip去掉t>Personal, cred că, fiind un program asp.net, atunci să folosești controalele de pe server. Deși rulează puțin mai lent decât controalele clientului, dezvoltarea este puțin mai rapidă. Și, ca programatori, ne place întotdeauna să încercăm toate posibilitățile înainte de a alege pe cea care ne place.
De fapt, poți atribui valori controlului fără să folosești Text='<%# Bind("info") %>', și să îl folosești direct în backcode
this.txtContent.Text="Valoarea inițială"
Este posibil și asta. Poți folosi și următorul cod direct pentru a obține valoarea:
Codul CKFinder și CKEditor. Când rulez pagina direct cu editorul, compilatorul dă următoarea eroare:
string content=this.txtContent.Text
Notă: Atributul TextMode="MultiLine" este esențial, altfel valoarea va fi nulă.
Nu am simplificat înainte să depanez programul
Tipul sau numele spațiului de nume "ControlDesigner" nu există în spațiul de nume "System.Web.UI.Design" (îi lipsește o referință de asamblare?)
Greșeala este pe linia 19 din ckeditor\ckfinder\_source\FileBrowserDesigner.cs, așa că simplifică pur și simplu fișierul:
Primul pas este simplificarea editorului ck: ștergeți folderele _samples și _source, iar doar trei fișiere lingvistice pot fi păstrate în directorul lang: en.js, zh.js și zh-cn.js;
Al doilea pas este simplificarea ckfinder-ului: șterge folderele _samples și _source și păstrează doar fișierele de limbă en.js, zh.js și zh-cn.js în directorul lang.
Observați a doua linie de cod js aici: CKFinder.SetupCKEditor(editor, 'http://www.cnblogs.com/ckeditor/ckfinder/'); , unde "http://www.cnblogs.com/ckeditor/ckfinder/" este calea relativă a ckfinder-ului către pagina curentă,
Vă rugăm să nu copiați și lipiți codul direct, altfel poate apărea următoarea eroare la încărcarea imaginilor:
Descriere: HTTP 404. Resursa pe care o cauți (sau una dintre dependențele ei) poate fi eliminată, sau numele s-a schimbat, sau este temporar indisponibilă. Vă rugăm să verificați următorul URL și să vă asigurați că este scris corect.
URL solicitat: /admin/ckeditor/ckfinder/core/connector/aspx/connector.aspx
Deci, dacă nu vrei să pui ckfinder-ul în folderul ckeditor, așa cum am făcut eu, e în regulă, atâta timp cât completezi corect schimbarea de cale aici.
Am crezut că asta va fi considerat toată munca, dar când am încărcat imaginea, a apărut următorul prompt:
Din motive de securitate, fișierul nu poate fi vizualizat. Vă rugăm să contactați administratorul de sistem și să verificați profilul CKFinder.
Nu există nicio șansă, cum spune zicala, lucrurile bune să fie greu de mâncat. Pot să întreb doar cel mai bun profesor - Baidu. Copiază informațiile de mai sus în căsuța de căutare Baidu și, după ce am intrat în mașină, am găsit o postare despre integrarea PHP, ckeditor. Iată cum se face:
Modifică fișierul config.ascx sub CKFinder pentru a schimba valoarea returnării funcției publice de override bool CheckAuthentication() de la return false la return true.
Testat din nou, imaginea s-a încărcat cu succes! |
Postat pe 18.04.2015 19:11:55
|
|
|
