Le ultime versioni di CKEditor e CKFinder possono essere scaricate dal sito ufficiale (http://cksource.com).
Metti le due risorse sopra descritte nella directory root del sito: /CKEditor (qui nella versione 3.6.2, devi mettere la cartella _Samples\ckeditor nella cartella compressa) e /CKFinder (insensibile alla maiuscolo, puoi mettere la cartella direttamente qui). )
Nota, qui a volte c'è un errore nella generazione. Ad esempio, esistono tag duplicati di tipo AssemblyTitle, principalmente perché il sito web ha più AssemblyInfo.cs per eliminare il file scaricato. Oppure elimina la cartella _source. Se hai domande qui, puoi contattarmi: my QQ: 515072775
Usare CKEditor su una pagina:
<textarea cols="80" id="prcontent" name="content" righes="50"> Ciao, il tuo utilizzo è stato un successo! </textarea>
<scrip remove ttype="testo/javascrip remove t" >
CKEDITOR.replace('content', { height:200, width: 520 });
. .</scrip去掉t>
CKEditor non include una funzione di upload, quindi deve essere caricato tramite CKFinder
Passo 1: Il sito web deve fare riferimento alla dll di CKFinder (directory: /CKFinder/bin/Release/CKFinder.dll)
Passo 2: Configura il config.js CKEditor (directory: /CKEditor/config.js) nella funzione CKEDITOR.editorConfig, e le funzioni non necessarie possono essere rimosse
CKEDITOR.editorConfig = function(config) {
config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html'; Non scrivere "~/ckfinder/..." o "/ckfinder/..."
config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html? Tipo=Immagini';
config.filebrowserFlashBrowseUrl = 'ckfinder/ckfinder.html? Tipo=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'; L'impostazione dimensione del pop-up Browse Server
config.filebrowserWindowHeight = '500';
}
CKFinder.setupCKEditor(null, '.. /cacciatore di schermo/'); Si noti che il percorso del ckfinder corrisponde alla posizione effettiva
Configurazione di CKFinder:
Apri il controllo utente config.ascx sotto "ckfinder\" e cambia il suo percorso BaseUrl:
BaseUrl = "~/ckfinder/userfiles/"; oppure BaseUrl = "ckfinder/userfiles/";
Ecco un punto in più: è utile testarlo in IIS. Altrimenti, se il caricamento non va bene, penserai che ci sia qualcosa che non va nella configurazione.
CKEditor ha una funzione di caricamento dopo che la configurazione è completata, ma cosa succede se il file immagine è il nome originale e vuole cambiarlo con un nome casuale? Poi guarda il terzo passo.
Passo 3: Modifica il codice sorgente di CKFinder. CKFinder è fornito con un proprio codice sorgente, la directory: /CKFinde/_source
Crea un nuovo progetto attuale in VS su CKFinde/_source/CKFinder.Net.sln, il file di soluzione scaricato qui potrebbe non aprirsi in VS2008, puoi scegliere di aggiungere un nuovo progetto o usare una versione più recente di VS per aprirlo.
1) Apri il file /Settings/ConfigFile.cs
Localizza 27 righe e aggiungi un attributo: bool pubblico RandomReName; Rinomina casuale
Individua 67 righe e assegna un valore alla proprietà appena fatta: RandomReName = true; Il valore predefinito è vero
Salva il file chiuso
2) Apri il file /Connector/Config.cs
Individua le 62 righe, aggiungi un attributo:
bool pubblico RandomReName
{
get { returnSettings.ConfigFile.Current.RandomReName; }
}
Salva il file chiuso
3) Aprire il file /Connector/CommandHandlers/FileUploadCommandHandler.cs
Trova la riga 64 e aggiungi un codice di giudizio:
if ( Config.Current.RandomReName) // Usa un nome casuale
sFileName =DateTime.Now.ToString("yyyyMMddHHmmssfff") + "." +sExtension;
Salva il file chiuso
4) Rigenerare il progetto, sovrascrivere /ckfinder/_source/bin/Debug/CKFinder.dll /ckfinder/bin/Release/CKFinder.dll oppure rimuovere i riferimenti aggiunti in precedenza al progetto web e rimuovere la dll dal progetto CKFinder.Net
Ultimo passo: Apri /ckfinder/config.ascx
Individua 40 righe e aggiungi un attributo: (In effetti, puoi aggiungerlo o meno, perché prima c'era un valore predefinito impostato, ma deve essere impostato su falso quando usi il nome originale)
//上传完毕后使用随机文件名
RandomReName = vero;
Salva chiuso
Ok, ora che la configurazione è andata bene, CKEditor può avere una funzione di upload. Le impostazioni di altre funzioni continueranno a essere studiate quando avrai tempo~
Un altro promemoria: le cartelle CKEditor e CKFinder contengono molte cose inutili, come nomi con sottoline, i progetti .net non richiedono php, asp.
Se c'è un errore nel caricamento di un file: il file non può essere visualizzato per motivi di sicurezza. Per favore, contatta il tuo amministratore di sistema e controlla il profilo CKFinder.
Devi modificare il file config.ascx
override pubblico bool CheckAuthentication()
{
reture false;
}
Modificato in:
override pubblico bool CheckAuthentication()
{
Validazione della forma
returnRequest.IsAuthenticated;
}
3. Applicare il controllo CKEditor sulla pagina [due metodi, a e b]
[R: Citazione della INSTALL.html nel pacchetto compresso]
Se vuoi integrare CKEditor con la tua pagina ASP.NET, segui i passaggi descritti di seguito.
1. Vai sul sito ufficiale di download di CKEditor e scarica le ultime versioni sia di CKEditor 3.x che di CKEditor per ASP.NET Control.
2. Discompatta entrambi i pacchetti di installazione fino alla posizione desiderata Rimuovi n.
3. Aggiungi un riferimento al CKEditor per il controllo ASP.NET sul tuo sito web.
In Visual Studio usa il comando Add Reference e naviga fino al file bin\Release\CKEditor.NET.dll dal pacchetto di installazione SCOMPOST CKEditor for ASP.NET installazione. Puoi anche copiare manualmente il file DLL nella cartella bin della tua applicazione.
4. Copia i file dell'editor non imballati dal pacchetto di installazione CKEditor 3.x e incollali nella directory applicativa del tuo sito web.
5. Registra il CKEditor per ASP.NET Control nella tua pagina:
<%@ Register assembly="CKEditor.NET" namespace="CKEditor.NET" TagPrefix="CKEditor" %>
6. Inserire un'istanza CKEditor nel corpo della pagina:
<CKEditor:CKEditorControl: ID="CKEditor1" runat="server"></CKEditor:CKEditorControl>
【b】
1. <head>Aggiungere il riferimento js corrispondente alla 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. Poi, <body>aggiungi il seguente codice alla posizione in cui il controllo deve essere posizionato, e ci sono i seguenti metodi di utilizzo:
(1) Aggiungere l'attributo di classe specificato al controllo
<textarea id="textarea1" nome="editor1" class="ckeditor">ciao!</textarea>
Controlli del server:
<asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" CssClass="ckeditor"></asp:TextBox>
(2) Inietta codice js - qui il codice js è meglio scritto dopo il controllo, o <head>in esso
<textarea id="textarea1" nome="editor1">ciao!</textarea>
<scrip remove t type="text/javascrip remove t" >
CKEDITOR.replace('editor1', { altezza:400, larghezza:800 });
. .</scrip去掉t>
Controlli del server:
<asp:TextBox ID="mckeditor" runat="server" TextMode="MultiLine"></asp:TextBox>
<scrip remove t type="text/javascrip remove t" >
CKEDITOR.replace('<%=mckeditor. ClientID %>');
. .</scrip去掉t>
=============================================================================================================
Seconda riferimento:
asp.net il metodo di configurazione di CKEDITOR 3.0.1 e ckfinder_aspnet_1.4.1.1
Secondo i prompt del http://ckeditor.com.cn/docs/, CKEditor è configurato sulla pagina web e, quando lo visualizzo nel browser, sento che l'interfaccia di CKEditor è davvero molto bella, ma quando volevo voler provare la funzione di caricamento immagine, non ho visto il pulsante per caricare l'immagine.
Continuando la ricerca online, la conclusione fu che "CKEditor non ha una funzione di upload in sé, e deve essere integrata con CKFinder per ottenere la funzione di upload".
Poi scarica CKFinder 1.4.1.1 per Asp.net, lo scomprimi e metti la cartella ckfinder nella directory root del progetto - perché molte fonti su Internet dicono che è meglio mettere CKEditor e CKFinder nello stesso livello di directory. E in questo modo, avremo altre due cartelle nel nostro progetto senza motivo. Io stesso ho un feticismo per la pulizia dei codici, credo,
Lascia una cartella come segno di rispetto per l'autore, basterà. Tenerne due mi metterebbe molto a disagio.
Prima di integrare CKFinder in CKEditor, dobbiamo anche configurare un po' CKFinder. Gli amici più esperti dovrebbero facilmente pensare che, essendo un plug-in per caricare file, la maggior parte delle configurazioni sia il percorso per caricare i file.
Il percorso di upload predefinito di CKFinder è la cartella userfiles nella sua directory, ma ho inserito CKFinder nella cartella CKEditor; se memorizzo l'immagine nei file utente, il sistema deve bypassare la cartella a tre livelli per trovare il file o l'immagine, quindi ho intenzione di caricare l'immagine nella cartella upFile nella directory root del progetto.
Per implementare questa funzione, è necessario modificare il file config.ascx sotto CKFinder per cambiare BaseUrl = "/ckfinder/userfiles/" in BaseUrl = "~/upFile/". Poi, taglia i file CKFinder.dll dalla cartella CKFinder/bin nella cartella bin del progetto di sistema. Oppure introduci CKFinder.dll nel progetto aggiungendo riferimenti.
Successivamente, possiamo usare CKEditor con il caricamento dei file:
Metti la cartella CKFinder nella cartella CKEditor e, nella pagina, importa i file js di entrambe:
<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>
Ci sono due modi per riferire l'editor a un controllo:
Uno è utilizzare l'area di testo di controllo client:
<righe dell'area del testo"20" cols="40" nome="txtContenuto" id="txtContenuto"></textarea>
<scrip remove t type="text/javascrip remove t" >
var editor = CKEDITOR.replace('txtContent');
CKFinder.SetupCKEditor (editore, 'http://www.cnblogs.com/ckeditor/ckfinder/');
. .</scrip去掉t>
Il secondo è utilizzare la casella di testo di controllo lato server:
<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 (editore, 'http://www.cnblogs.com/ckeditor/ckfinder/');
</scrip去掉t>Personalmente, penso che, dato che è un programma asp.net, allora usi i controlli lato server. Anche se gira un po' più lentamente rispetto ai controlli client, lo sviluppo è un po' più veloce. E, come programmatori, ci piace sempre provare tutte le possibilità prima di scegliere quella che preferiamo.
In effetti, puoi anche assegnare valori al controllo senza usare Text='<%# Bind("info") %>', e usarlo direttamente nel backcode
this.txtContent.Text="Valore iniziale"
È anche possibile. Puoi anche usare direttamente il seguente codice per ottenere il valore:
Codice CKFinder e CKEditor. Quando eseguisco la pagina direttamente con l'editor, il compilatore dà il seguente errore:
stringa content=this.txtContent.Text
Nota: L'attributo TextMode="MultiLine" è essenziale, altrimenti il valore sarà nullo.
Non ho semplificato prima di debug del programma
Il nome del tipo o namespace "ControlDesigner" non esiste nello spazio "System.Web.UI.Design" (manca un riferimento assembly?)
L'errore si trova alla riga 19 di ckeditor\ckfinder\_source\FileBrowserDesigner.cs, quindi semplifica semplicemente il file:
Il primo passo è semplificare il ckeditor: elimina le cartelle _samples e _source, e solo tre file linguistici possono essere conservati nella cartella lang: en.js, zh.js e zh-cn.js;
Il secondo passo è semplificare ckfinder: elimina le cartelle _samples e _source e conserva solo i file di lingue en.js, zh.js e zh-cn.js nella cartella lang.
Nota la seconda riga di codice js qui: CKFinder.SetupCKEditor(editor, 'http://www.cnblogs.com/ckeditor/ckfinder/'); , dove il "http://www.cnblogs.com/ckeditor/ckfinder/" è il percorso relativo di ckfinder alla pagina corrente,
Si prega di non copiare e incollare direttamente il codice, altrimenti potrebbe comparire il seguente errore durante il caricamento delle immagini:
Descrizione: HTTP 404. La risorsa che stai cercando (o una delle sue dipendenze) potrebbe essere stata rimossa, o il suo nome è cambiato, oppure è temporaneamente non disponibile. Controlla il seguente URL e assicurati che sia scritto correttamente.
URL richiesto: /admin/ckeditor/ckfinder/core/connector/aspx/connector.aspx
Quindi, se non vuoi mettere il ckfinder nella cartella ckeditor come ho fatto io, va bene, purché tu riempi correttamente il percorso qui.
Pensavo che questo sarebbe stato considerato tutto il lavoro, ma quando ho caricato l'immagine, è comparso il seguente prompt:
Per motivi di sicurezza, il file non può essere visualizzato. Per favore, contatta il tuo amministratore di sistema e controlla il profilo CKFinder.
Non c'è modo, come si dice, che le cose buone siano difficili da mangiare. Posso solo chiedere al miglior insegnante - Baidu. Copia le informazioni del prompt sopra nella casella di ricerca di Baidu e, dopo aver inserito l'auto, ho trovato un post sull'integrazione PHP ckeditor. Ecco come si fa:
Modifica il file config.ascx sotto CKFinder per cambiare il valore di ritorno della funzione pubblica di override bool CheckAuthentication() da return false a return true.
Ritestato, l'immagine è stata caricata con successo! |
Pubblicato su 18/04/2015 19:11:55
|
|
|
