Denne artikkelen er en speilartikkel om maskinoversettelse, vennligst klikk her for å hoppe til originalartikkelen.

Utsikt: 15904|Svare: 0

[ASP.NET] asp.net bruker ckeditor_3.6.2+ckfinderckfinder_aspnet_2.1.1 for å sette opp bildeopplastingsfunksjonen

[Kopier lenke]
Publisert på 18.04.2015 19:11:55 | | |

De nyeste versjonene av CKEditor og CKFinder kan lastes ned fra den offisielle nettsiden (http://cksource.com).

Legg de to ovennevnte ressursene i rotkatalogen på nettsiden: /CKEditor (her i versjon 3.6.2 må du legge _Samples\ckeditor-mappen i den komprimerte mappen) og /CKFinder (kasus-sensitiv, du kan legge mappen direkte her). )

Merk at det noen ganger er en feil i genereringen. For eksempel finnes det dupliserte AssemblyTitle-tags, hovedsakelig fordi nettsiden har mer enn én AssemblyInfo.cs for å slette den nedlastede filen. Eller slette mappen _source. Hvis du har noen spørsmål her, kan du kontakte meg: min QQ: 515072775

Bruk av CKEditor på en side:

<textarea cols="80" id="prcontent" name="content" rader="50"> Hei, bruken din var vellykket! </textarea>

<scrip remove ttype="text/javascrip remove t" >

CKEDITOR.replace('content', { height:200, width: 520 });

. .</scrip去掉t>

CKEditor har ikke opplastingsfunksjon, så den må lastes opp med CKFinder

Trinn 1: Nettstedet må referere til dll-filen til CKFinder (katalog: /CKFinder/bin/Release/CKFinder.dll)

Trinn 2: Konfigurer CKEditors config.js (katalog: /CKEditor/config.js) i funksjonen CKEDITOR.editorConfig, og unødvendige funksjoner kan fjernes


CKEDITOR.editorConfig = function(config) {
config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html'; Ikke skriv "~/ckfinder/..." eller "/ckfinder/..."
config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html? type=bilder';
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';  Størrelsesinnstillingen til Bla-server-popupen
config.filebrowserWindowHeight = '500';
}
CKFinder.setupCKEditor(null, '.. /ckfinder/'); Merk at banen til ckfinderen tilsvarer den faktiske plasseringen

CKFinders konfigurasjon:

Åpne brukerkontrollen config.ascx under "ckfinder\" og endre dens BaseUrl-sti:

BaseUrl = "~/ckfinder/userfiles/"; eller BaseUrl = "ckfinder/userfiles/";





Her er et ekstra poeng: det er nyttig å teste i IIS. Ellers, hvis opplastingen mislykkes, vil du tro at det er noe galt med konfigurasjonen.

CKEditor har en opplastingsfunksjon etter at konfigurasjonen er fullført, men hva om bildefilen er det opprinnelige bildenavnet og vil endre det til et tilfeldig filnavn? Se deretter på det tredje trinnet.

Trinn 3: Endre kildekoden til CKFinder. CKFinder kommer med sin egen kildekode, katalog: /CKFinde/_source

Opprett et nytt nåværende prosjekt i VS til CKFinde/_source/CKFinder.Net.sln, løsningsfilen som lastes ned her kan hende ikke åpnes i VS2008, du kan velge å legge til et nytt prosjekt eller bruke en nyere versjon av VS for å åpne det.

1) Åpne filen /Settings/ConfigFile.cs

Finn 27 rader og legg til et attributt: offentlig bool RandomReName; Gi nytt navn tilfeldig

Finn 67 rader og tildel en verdi til egenskapen akkurat nå: RandomReName = true; Standardverdien er sann

Lagre den lukkede filen

2) Åpne filen /Connector/Config.cs

Finn de 62 radene, legg til et attributt:

offentlig bool RandomReName

{

get { returnSettings.ConfigFile.Current.RandomReName; }

}

Lagre den lukkede filen

3) Åpne filen /Connector/CommandHandlers/FileUploadCommandHandler.cs

Finn linje 64 og legg til en domskode:

hvis ( Config.Current.RandomReName) // Bruk et tilfeldig navn

sFilnavn =DateTime.Now.ToString("yyyyMMddHHmmssfff") + "." +sExtension;


Lagre den lukkede filen
4) Regenerere prosjektet, overskrive /ckfinder/_source/bin/Debug/CKFinder.dll /ckfinder/bin/Release/CKFinder.dll eller fjerne tidligere tilføyde referanser til nettsideprosjektet og fjern dll-en fra CKFinder.Net-prosjektet på nytt
Siste steg: Åpne /ckfinder/config.ascx
Finn 40 linjer og legg til et attributt: (Faktisk kan du legge til dette eller ikke, fordi det var en standardverdi satt før, men den må settes til false når du bruker det opprinnelige navnet)

//上传完毕后使用随机文件名

RandomReName = true;


Lagre lukket

Ok, nå som konfigurasjonen har vært vellykket, kan CKEditor ha en opplastingsfunksjon. Innstillingene til andre funksjoner vil fortsette å bli studert når du har tid~

En påminnelse til: CKEditor- og CKFinder-mapper har mange unødvendige ting, som navn med understreker, .net-prosjekter trenger ikke php, asp.

Hvis det oppstår en feil ved opplasting av en fil: Filen kan ikke vises av sikkerhetsgrunner. Vennligst kontakt systemadministratoren din og sjekk CKFinder-profilen.

Du må endre config.ascx-filen

offentlig override bool CheckAuthentication()
{
reture false;
}
Modifisert til:

offentlig override bool CheckAuthentication()
{

Formvalidering
returnRequest.IsAuthenticated;

}



3. Bruk CKEditor-kontroll på siden [to metoder, a og b]

[A: Siterer INSTALL.html i den komprimerte pakken]

Hvis du ønsker å integrere CKEditor med ASP.NET-siden din, følg trinnene nedenfor.

1. Gå til den offisielle nedlastingssiden for CKEditor og last ned de nyeste versjonene av både CKEditor 3.x og CKEditor for ASP.NET Control.
2. Pakk ut begge installasjonspakkene til et ønsket sted Fjern n.
3. Legg til en referanse til CKEditor for ASP.NET Control på nettsiden din.
     I Visual Studio bruk Add Reference-kommandoen og bla til bin\Release\CKEditor.NET.dll-filen fra den upakkede CKEditor for ASP.NET installasjonspakke. Du kan også manuelt kopiere DLL-filen til bin-mappen i applikasjonen din.
4. Kopier de utpakkede redigeringsfilene fra CKEditor 3.x installasjonspakken og lim dem inn i applikasjonskatalogen på nettstedet ditt.
5. Registrer CKEditor for ASP.NET Control på siden din:
<%@ Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefiks="CKEditor" %>
6. Sett inn en CKEditor-instans i sideinnholdet:
<CKEditor:CKEditorControl ID="CKEditor1" runat="server"></CKEditor:CKEditorControl>
【b】

1. <head>Legg til den tilsvarende js-referansen på siden:

    <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. Legg <body>deretter til følgende kode på stedet der kontrollen må plasseres, og det finnes følgende bruksmetoder:

(1) Legg til det spesifiserte klasseattributtet til kontrollen
    <textarea id="textarea1" name="editor1" class="ckeditor">hallo!</textarea>
Serverkontroller:
    <asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" CssClass="ckeditor"></asp:TextBox>

(2) Injisér js-kode – her skrives js-koden best etter kontrollen, eller <head>i den
    <textarea id="textarea1" name="editor1">hallo!</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>
=============================================================================================================
Andre referanse:
asp.net konfigurasjonsmetoden til ckeditor 3.0.1 og ckfinder_aspnet_1.4.1.1
Ifølge instruksjonene i http://ckeditor.com.cn/docs/ er CKEditor konfigurert på nettsiden, og når jeg ser på det i nettleseren, synes jeg at grensesnittet i CKEditor virkelig er veldig vakkert, men da jeg gjerne ville prøve bildeopplastingsfunksjonen, så jeg ikke knappen for å laste opp bildet.

Ved å fortsette søket på nettet var konklusjonen at «CKEditor har ikke en opplastingsfunksjon selv, og den må integreres med CKFinder for å oppnå opplastingsfunksjonen».
Last deretter ned CKFinder 1.4.1.1 for Asp.net, pakk det ut, og legg ckfinder-mappen i prosjektets rotkatalog – fordi mange kilder på Internett sier at det er best å plassere CKEditor og CKFinder i samme nivåkatalog. Og på denne måten vil vi ha to mapper til i prosjektet vårt uten noen grunn. Jeg har selv en kode-renhetsfetisj, tror jeg,
Legg igjen en mappe som et tegn på respekt for forfatteren, det er nok. Å beholde to ville gjort meg veldig ukomfortabel.


Før vi integrerer CKFinder i CKEditor, må vi også konfigurere CKFinder litt. Smarte venner bør lett tenke at siden det er et plugin for opplasting av filer, er det meste som må konfigureres veien for å laste opp filer.

Standard opplastingssti for CKFinder er userfiles-mappen i sin egen mappe, men jeg har lagt CKFinder i CKEditor-mappen. Hvis jeg lagrer bildet i userfiles, må systemet omgå tre-lags mappen for å finne filen eller bildet, så jeg planlegger å laste opp bildet til upFile-mappen i rotmappen til prosjektet.
For å implementere denne funksjonen må du endre config.ascx-filen under CKFinder for å endre BaseUrl = "/ckfinder/userfiles/" til BaseUrl = "~/upFile/". Deretter klipper du CKFinder.dll-filene fra CKFinder/bin-mappen til bin-mappen til systemprosjektet. Eller introdusere CKFinder.dll i prosjektet ved å legge til referanser.
Deretter kan vi bruke CKEditor med filopplasting:

Legg CKFinder-mappen i CKEditor-mappen, og importer js-filene fra begge:

<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 finnes to måter å referere editoren til en kontroll:

En er å bruke klientkontroll-tekstområ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 andre er å bruke serverside-kontrolltekstboksen:

<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/');

Personlig tror</scrip去掉t> jeg at siden det er et asp.net program, bør man bruke serverkontrollene. Selv om det går litt tregere enn klientkontroller, går utviklingen litt raskere. Og som programmerere liker vi alltid å prøve alle muligheter før vi velger den vi liker.

Faktisk kan du også tildele verdier til kontrollen uten å bruke Text='<%# Bind("info") %>', og bruke det direkte i bakkoden

this.txtContent.Text="Initial value"
    Det er også mulig. Du kan også bruke følgende kode direkte for å hente verdien:

CKFinder og CKEditor-kode. Når jeg kjører siden direkte med editoren, gir kompilatoren følgende feil:

strenginnhold=denne.txtInnhold.Tekst
    Merk: TextMode="MultiLine"-attributtet er essensielt, ellers vil verdien være null.

Jeg strømlinjeformet ikke før jeg feilsøkte programmet

Type- eller navneromsnavnet "ControlDesigner" eksisterer ikke i navnerommet "System.Web.UI.Design" (mangler det assemblerreferanse?)

Feilen er på linje 19 i ckeditor\ckfinder\_source\FileBrowserDesigner.cs, så forenkle filen enkelt:

Det første steget er å effektivisere ckeditoren: slett _samples- og _source-mappene, og kun tre språkfiler kan beholdes i lang-katalogen: en.js, zh.js og zh-cn.js;

Det andre steget er å effektivisere ckfinder: slett _samples- og _source-mappene, og behold kun filene en.js, zh.js og zh-cn.js språket i lang-katalogen.

Legg merke til den andre linjen i js-koden her: CKFinder.SetupCKEditor (editor, 'http://www.cnblogs.com/ckeditor/ckfinder/'); , hvor "http://www.cnblogs.com/ckeditor/ckfinder/" er den relative banen til ckfinder til den nåværende siden,
Vennligst ikke kopier og lim inn koden direkte, ellers kan følgende feil dukke opp ved opplasting av bilder:

Beskrivelse: HTTP 404. Ressursen du leter etter (eller en av dens avhengigheter) kan ha blitt fjernet, navnet har endret seg, eller den er midlertidig utilgjengelig. Vennligst sjekk følgende URL og sørg for at den er stavet riktig.

Forespurt URL: /admin/ckeditor/ckfinder/core/connector/aspx/connector.aspx

Så hvis du ikke vil legge ckfinder i ckeditor-mappen slik jeg gjorde, er det greit, så lenge du fyller inn stiendringene riktig her.

Jeg trodde dette ville regnes som alt arbeidet, men da jeg lastet opp bildet, dukket følgende prompt opp:

Av sikkerhetsgrunner kan ikke filen vises. Vennligst kontakt systemadministratoren din og sjekk CKFinder-profilen.

Det finnes ingen måte, som ordtaket sier, at gode ting er vanskelige å spise. Jeg kan bare spørre den beste læreren – Baidu. Kopier promptinformasjonen ovenfor til Baidu-søkeboksen, og etter å ha gått inn i bilen, fant jeg et innlegg om PHP-integrasjon med ckeditor. Slik gjør du det:

Endre config.ascx-filen under CKFinder for å endre returverdien til den offentlige overstyringsfunksjonen CheckAuthentication() fra return false til return true.

Testet igjen, bildet lastet opp vellykket!

Score

Antall deltakere1MB+2 bidra+2 Sammenbrudd grunn
Whoami + 2 + 2 Veldig kraftig!

Se alle vurderinger





Foregående:asp.net plass nedtrekksliste bindedatabase
Neste:Hvordan bruker jeg kode for å gjøre autentiseringskontrollen utilgjengelig i Asp.Net?
Ansvarsfraskrivelse:
All programvare, programmeringsmateriell eller artikler publisert av Code Farmer Network er kun for lærings- og forskningsformål; Innholdet ovenfor skal ikke brukes til kommersielle eller ulovlige formål, ellers skal brukerne bære alle konsekvenser. Informasjonen på dette nettstedet kommer fra Internett, og opphavsrettstvister har ingenting med dette nettstedet å gjøre. Du må fullstendig slette innholdet ovenfor fra datamaskinen din innen 24 timer etter nedlasting. Hvis du liker programmet, vennligst støtt ekte programvare, kjøp registrering, og få bedre ekte tjenester. Hvis det foreligger noen krenkelse, vennligst kontakt oss på e-post.

Mail To:help@itsvse.com