A CKEditor és CKFinder legújabb verziói letölthetők a hivatalos weboldalról (http://cksource.com).
Tedd a fenti két forrást a weboldal gyökérkönyvtárába: /CKEditor (itt, a 3.6.2-es verzióban a _Samples\ckeditor mappát a tömörített mappába kell tenni) és /CKFinder (kis- és nagybetűérzékeny, közvetlenül ide teheted a mappát). )
Fontos megjegyezni, hogy itt néha hiba történik a generációban. Például vannak duplikált AssemblyTitle típusú címkék, főként azért, mert a weboldalnak több AssemblyInfo.cs van a letöltött fájl törlésére. Vagy töröld a mappát _source. Ha bármilyen kérdésed van, felveheti a kapcsolatot: QQ: 515072775
CKEeditor használata egy oldalon:
<textarea cols="80" id="prcontent" name="content" sor="50"> Helló, sikeres volt a használata! </textarea>
<scrip remove ttype="text/javascrip remove t" >
CKEDITOR.replace('tartalom', { magasság:200, szélesség: 520 });
. .</scrip去掉t>
A CKEditoron nincs feltöltési funkció, ezért CKFinderrel kell feltölteni
1. lépés: A weboldalnak hivatkoznia kell a CKFinder dll-ére (directory: /CKFinder/bin/Release/CKFinder.dll)
2. lépés: Konfigurálni a CKEeditor config.js-jét (könyvtár: /CKEditor/config.js) a CKEDITOR.editorConfig függvényben, és a felesleges funkciók eltávolíthatók
CKEDITOR.editorConfig = function(config) {
config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html'; Ne írd "~/ckfinder/..." vagy "/ckfinder/..."
config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html? type=Images';
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'; A böngésző szerver felugró ablakának méretbeállítása
config.filebrowserWindowHeight = '500';
}
CKFinder.setupCKEditor(null, '.. /ckfinder/'); Fontos megjegyezni, hogy a ckfinder útvonala megfelel a tényleges elhelyezésnek
CKFinder konfigurációja:
Nyisd meg a config.ascx felhasználói vezérlőt a "ckfinder\" alatt, és változtasd meg annak BaseUrl útját:
BaseUrl = "~/ckfinder/userfiles/"; vagy BaseUrl = "ckfinder/userfiles/";
Itt egy plusz pont: hasznos IIS-ben tesztelni. Ellenkező esetben, ha a feltöltés sikertelen, azt fogod gondolni, hogy valami baj van a konfigurációval.
A CKEditornak van feltöltési funkciója a konfiguráció befejezése után, de mi van, ha a képfájl az eredeti képnév, és véletlenszerű fájlnévre akarja változtatni? Aztán nézd meg a harmadik lépést.
3. lépés: Módosítsd a CKFinder forráskódját. A CKFinder saját forráskóddal rendelkezik, a könyvtár: /CKFinde/_source
Hozz létre egy új, aktuális projektet a VS-ben CKFinde/_source/CKFinder.Net.sln-re, az itt letöltött megoldásfájl feltétlenül nem nyílik meg VS2008-ban, választhatsz új projektet hozzáadni, vagy egy újabb VS verziót használsz a megnyitáshoz.
1) Nyisd meg a /Settings/ConfigFile.cs fájlt
Találj meg 27 sort, és adj hozzá egy attribútumot: public bool RandomReName; Véletlenszerűen nevezze át
Találj meg 67 sort, és adj egy értéket a tulajdonságnak most: RandomReName = true; Az alapértelmezett érték igaz
Mentsd el a zárt fájlt
2) Nyisd meg a /Connector/Config.cs fájlt
Találd meg a 62 sort, adj hozzá egy attribútumot:
public bool RandomReName
{
get { returnSettings.ConfigFile.Current.RandomReName; }
}
Mentsd el a zárt fájlt
3) Nyisd meg a /Connector/CommandHandlers/FileUploadCommandHandler.cs fájlt
Keresd meg a 64-es sort, és adj hozzá egy ítéletkódot:
if ( Config.Current.RandomReName) // Használj véletlenszerű nevet
sFileName =DateTime.Now.ToString("yyyyMMddHHmmssfff") + "." +sExtension;
Mentsd el a zárt fájlt
4) Generáld újra a projektet, felülírd a /ckfinder/_source/bin/Debug/CKFinder.dll /ckfinder/bin/Release/CKFinder.dll vagy távolítsd el a korábban hozzáadott hivatkozásokat a weboldal projekthez, és újra töröld a dll-t a CKFinder.Net projektből
Utolsó lépés: Nyisd meg a /ckfinder/config.ascx
Keress 40 sort és adj hozzá egy attribútumot: (Valójában ezt vagy nem, mert korábban volt alapértelmezett érték, de az eredeti név használatában hamisnak kell lennie)
//上传完毕后使用随机文件名
RandomReName = igaz;
Mentés zárva
Rendben, most, hogy a konfiguráció sikeres, a CKEditornak lehet feltöltési funkciója. Más függvények beállításait tovább tanulmányozni fogjuk, ha van időd~
Még egy emlékeztető: a CKEditor és CKFinder mappákban sok felesleges dolog van, például aláhúzott neveket, a .net projekteknek nem kell php, asp.
Ha hiba van egy fájl feltöltésekor: A fájl biztonsági okokból nem tekinthető meg. Kérjük, vegye fel a kapcsolatot a rendszergazdájával, és ellenőrizze a CKFinder profilját.
Módosítanod kell a config.ascx fájlt
public override bool CheckAuthentication()
{
reture hamis;
}
Módosítva:
public override bool CheckAuthentication()
{
Űrlap ellenőrzése
returnRequest.IsAuthenticated;
}
3. Alkalmazzuk a CKEditor vezérlést az oldalon [két módszer, a és b]
[V: A tömörített csomagban lévő INSTALL.html idézése]
Ha integrálni szeretnéd a CKEditort a ASP.NET oldaladdal, kövesd az alábbi lépéseket.
1. Látogasson el a hivatalos CKEditor letöltő oldalra, és töltse le a CKEditor 3.x és a CKEditor legújabb verzióit a ASP.NET Control számára.
2. Bontsd ki mindkét telepítési csomagot a kívánt helyre.
3. Adj hozzá egy hivatkozást a CKEditorhoz ASP.NET Control-hoz a weboldaladra.
A Visual Studio-ban használd az Add Reference parancsot, és böngésszük a bin\Release\CKEditor.NET.dll fájlt a CKEditor for ASP.NET installációs csomagból. A DLL fájlt manuálisan is bemásolhatod az alkalmazásod bin mappájába.
4. Másold le a kicsomagolt szerkesztő fájlokat a CKEditor 3.x telepítési csomagból, és illesztsd be a weboldalad alkalmazáskönyvtárába.
5. Regisztrálja a CKEditort ASP.NET Control számára az oldalán:
<%@ Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor" %>
6. Helyezzen be egy CKEditor példányt az oldal testébe:
<CKEditor:CKEditorControl ID="CKEditor1" runat="server"></CKEditor:CKEditorControl>
【b】
1. <head>Hozzáhelyezzük a megfelelő js hivatkozást az oldalra:
<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. Ezután <body>adjuk hozzá a következő kódot arra a helyre, ahol a vezérlőt kell elhelyezni, és a következő felhasználási módszerek találhatók:
(1) Hozzáadni a megadott osztályattribútumot a vezérlőhöz
<textarea id="textarea1" name="editor1" class="ckeditor">helló!</textarea>
Szerver vezérlések:
<asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" CssClass="ckeditor"></asp:TextBox>
(2) Injektáljuk a js kódot – itt a js kódot a vezérlő után vagy benne lehet írni.<head>
<textarea id="textarea1" name="editor1">szia!</textarea>
<scrip remove t type="text/javascrip remove t" >
CKEDITOR.replace('editor1', { height:400, width:800 });
. .</scrip去掉t>
Szerver vezérlések:
<asp:TextBox ID="mckeditor" runat="server" TextMode="MultiLine"></asp:TextBox>
<scrip remove t type="text/javascrip remove t" >
CKEDITOR.replace('<%=mckeditor. ClientID %>');
. .</scrip去掉t>
=============================================================================================================
Második hivatkozás:
asp.net a ckeditor 3.0.1 és ckfinder_aspnet_1.4.1.1 konfigurációs módszere
A http://ckeditor.com.cn/docs/ utasításai szerint a CKEditor a weboldalon van konfigurálva, és amikor a böngészőben megnézem, úgy érzem, a CKEeditor felülete valóban nagyon szép, de amikor örömmel próbáltam ki a képfeltöltési funkciót, nem láttam a kép feltöltésére szolgáló gombot.
Tovább keresve az interneten, arra a következtetésre jutottunk, hogy "a CKEditornak nincs feltöltési funkciója, és integrálni kell a CKFinderrel a feltöltési funkció eléréséhez".
Ezután töltsd le a CKFinder 1.4.1.1-et Asp.net számára, nyitd ki, és tedd a ckfinder mappát a projekt gyökérkönyvtárába – mert sok internetes forrás szerint a legjobb a CKEditort és a CKFindert ugyanabban a szintű könyvtárban tárolni. Így további két mappánk lesz a projektünkben ok nélkül. Nekem is van egy kódtisztasági fetisisem, azt hiszem,
Hagyj egy mappát, hogy tiszteletet fejezzön ki a szerző iránt, az elég lesz. Kettő megtartása nagyon kényelmetlenül érezné magam.
Mielőtt integrálnánk a CKFindert a CKEditorba, egy kicsit be kell állítanunk a CKFindert is. Az okos barátok könnyen gondolhatják, hogy mivel ez egy bővítmény fájlok feltöltésére, a legtöbb beállítás a fájlok feltöltéséhez szükséges útvonal.
A CKFinder alapértelmezett feltöltési útja a userfiles mappa a saját könyvtárában, de a CKFindert a CKEditor mappába tettem, ha a képet a userfiles-ban tárolom, a rendszernek meg kell kerülnie a háromrétegű mappát, hogy megtalálja a fájlt vagy képet, ezért azt tervezem, hogy feltöltöm a képet a projekt gyökérkönyvtárában található upFile mappába.
Ennek a funkciónak a megvalósításához módosítanod kell a config.ascx fájlt a CKFinder alatt, hogy a BaseUrl = "/ckfinder/userfiles/" BaseUrl = "~/upFile/" legyen a BaseUrl. Ezután vágd le a CKFinder.dll fájlokat a CKFinder/bin mappából a rendszer projekt bin mappájába. Vagy beépítheted CKFinder.dll a projektbe hivatkozások hozzáadásával.
Ezután használhatjuk a CKEditort fájlfeltöltéssel:
Tedd a CKFinder mappát a CKEditor mappába, és az oldalon importáld mindkettő js fájljait:
<scrip eltávolítása tsrc="http://www.cnblogs.com/ckeditor/ckeditor.js" type="text/javascrip eltávolítása t"></scrip去掉t>
<scrip eltávolítása t src="http://www.cnblogs.com/ckeditor/ckfinder/ckfinder.js" type="text/javascrip eltávolítása t"></scrip去掉t>
Kétféleképpen lehet a szerkesztőt egy vezérlőre hivatkozni:
Az egyik, hogy a kliensvezérlő textarea használatát kell használni:
<textarea sorok = "20" cols = "40" name = "txtContent" id="txtContent"></textarea>
<scrip remove t type="text/javascrip remove t" >
var editor = CKEDITOR.replace('txtContent');
CKFinder.SetupCKEeditor (szerkesztő, 'http://www.cnblogs.com/ckeditor/ckfinder/');
. .</scrip去掉t>
A második a szerveroldali vezérlő szövegdoboz használata:
<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.SetupCKEeditor (szerkesztő, 'http://www.cnblogs.com/ckeditor/ckfinder/');
</scrip去掉t>Személy szerint szerintem mivel asp.net programról van szó, akkor használd a szerveroldali vezérlőket. Bár kicsit lassabban fut, mint a kliensvezérlők, a fejlesztés valamivel gyorsabb. És programozóként mindig szeretünk minden lehetőséget kipróbálni, mielőtt azt választjuk, amit szeretünk.
Valójában értékeket is rendelhetsz a vezérlőhez anélkül, hogy Text='<%# Bind("info") %>' használnád, és közvetlenül a backcode-ban is használhatod
this.txtContent.Text="Kezdeti érték"
Ez is lehetséges. Az alábbi kódot közvetlenül is használhatod az érték megszerzéséhez:
CKFinder és CKEditor kód. Amikor közvetlenül az szerkesztővel futtatom az oldalt, a fordító a következő hibát adja:
string content=this.txtContent.Text
Megjegyzés: A TextMode="MultiLine" attribútuma elengedhetetlen, különben az érték nulla lesz.
Nem egyszerűsítettem a programot a hibakeresés előtt
A "ControlDesigner" típus- vagy névtér név nem létezik a "System.Web.UI.Design" névtérben (hiányzik belőle az assembly referencia?)
A hiba a ckeditor\ckfinder\_source\FileBrowserDesigner.cs 19. sorában van, így egyszerűen egyszerűsítsd a fájlt:
Az első lépés a ckeditor egyszerűsítése: töröld a _samples és _source mappákat, és csak három nyelvi fájl maradhat meg a lang könyvtárban: en.js, zh.js és zh-cn.js;
A második lépés a ckfinder egyszerűsítése: töröld a _samples és _source mappákat, és csak a en.js, zh.js és zh-cn.js nyelvi fájlokat tartsd meg a lang könyvtárban.
Figyeld meg a js kód második sorát itt: CKFinder.SetupCKEditor(szerkesztő, 'http://www.cnblogs.com/ckeditor/ckfinder/'); , ahol a "http://www.cnblogs.com/ckeditor/ckfinder/" a ckfinder relatív útvonala az aktuális oldalhoz,
Kérjük, ne másolja és illesztse be közvetlenül a kódot, különben a következő hiba megjelenhet képek feltöltésekor:
Leírás: HTTP 404. Lehet, hogy a keresett forrás (vagy valamelyik függősége) eltávolítva, megváltozott a neve, vagy ideiglenesen nem elérhető. Kérjük, ellenőrizze az alábbi URL-t, és győződjön meg róla, hogy helyesen van írva.
Kért URL: /admin/ckeditor/ckfinder/core/connector/aspx/connector.aspx
Szóval, ha nem akarod a ckfindert a ckeditor mappába tenni, mint én, az rendben van, amíg helyesen töltöd ki az útváltozásokat itt.
Azt hittem, ez lesz az összes munka, de amikor feltöltöttem a képet, a következő felhívás jelent meg:
Biztonsági okokból a fájl nem tekinthető meg. Kérjük, vegye fel a kapcsolatot a rendszergazdájával, és ellenőrizze a CKFinder profilját.
Ahogy a mondás tartja, nincs az a mód, hogy a jó dolgokat nehéz megenni. Csak a legjobb tanárt kérdezhetem – Baidut. Másold át a fenti prompt információkat a Baidu keresőmezőbe, és miután beléptem az autóba, találtam egy bejegyzést a PHP integrációs ckeditorról. Íme, hogyan lehet ezt csinálni:
Módosítsuk a config.ascx fájlt a CKFinder alatt, hogy a nyilvános felülírás bool CheckAuthentication() függvény visszatérési értékét a return false helyett true vissza állítsa vissza.
Újra teszteltem, a kép sikeresen feltöltött! |
Közzétéve 2015. 04. 18. 19:11:55
|
|
|
