CKEditor ve CKFinder'ın en son sürümleri resmi web sitesinden (http://cksource.com) indirilebilir.
Yukarıdaki iki kaynağı web sitesinin kök dizinine koyun: /CKEditor (burada 3.6.2 sürümünde _Samples\ckeditor klasörünü sıkıştırılmış klasöre koymanız gerekiyor) ve /CKFinder (küçük harf duyarsız, klasörü doğrudan buraya koyabilirsiniz). )
Burada bazen üretimde bir hata olur. Örneğin, sitenin indirilen dosyayı silmek için birden fazla AssemblyInfo.cs olması nedeniyle, tekrarlanan AssemblyTitle tür etiketler vardır. Ya da klasörü _source sil. Burada herhangi bir sorunuz varsa, benimle iletişime geçebilirsiniz: QQ: 515072775
Bir sayfada CKEditor'u kullanmak:
<textarea cols="80" id="prcontent" name="content" rows="50"> Merhaba, kullanımınız başarılıydı! </textarea>
<scrip remove ttype="text/javascrip remove t" >
CKEDITOR.replace('content', { height:200, width: 520 });
. .</scrip去掉t>
CKEditor'da upload fonksiyonu yok, bu yüzden CKFinder ile yüklenmesi gerekiyor
Adım 1: Web sitesinin CKFinder'ın dll'sine (dizin: /CKFinder/bin/Release/CKFinder.dll) referans vermesi gerekir
Adım 2: CKEditor'un config.js'sini (dizin: /CKEditor/config.js) CKEDITOR.editorConfig fonksiyonunda yapılandırın, gereksiz fonksiyonlar kaldırılabilir
CKEDITOR.editorConfig = function(config) {
config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html'; "~/ckfinder/..." veya "/ckfinder/..." yazmayın.
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'; Browse Server açılır penceresinin boyut ayarı
config.filebrowserWindowHeight = '500';
}
CKFinder.setupCKEditor(null, '.. /ckfinder/'); Anahtarın yolunun gerçek yerleşimle örtüştüğüne dikkat edin
CKFinder'ın yapılandırması:
"ckfinder\" altında kullanıcı kontrol config.ascx dosyasını açın ve BaseUrl yolunu değiştirin:
BaseUrl = "~/ckfinder/userfiles/"; veya BaseUrl = "ckfinder/userfiles/";
Ekstra bir nokta: IIS'de test etmek faydalıdır. Aksi takdirde, yükleme başarısız olursa, yapılandırmada bir sorun olduğunu düşünebilirsiniz.
CKEditor'da yapılandırma tamamlandıktan sonra yükleme fonksiyonu var, ama ya görüntü dosyası orijinal görüntü adı ise ve onu rastgele bir dosya adına değiştirmek isterse? Sonra üçüncü adıma bak.
Adım 3: CKFinder'ın kaynak kodunu değiştirin. CKFinder kendi kaynak kodu olan diziniyle birlikte gelir: /CKFinde/_source
VS'de CKFinde/_source/CKFinder.Net.sln için yeni bir güncel proje oluşturun, burada indirilen çözüm dosyası VS2008'de açılmayabilir, yeni bir proje eklemeyi veya VS'nin daha yeni sürümünü kullanarak açmayı seçebilirsiniz.
1) /Settings/ConfigFile.cs dosyasını açın
27 satır bulun ve bir nitelik ekle: public bool RandomReName; Rastgele yeniden adlandırma
67 satır bulup şu anda bu özelliğe bir değer atayın: RandomReName = true; Varsayılan değer doğrudur
Kapalı dosyayı kaydet
2) /Connector/Config.cs dosyasını açın
62 satırı bul, bir öznitelik ekle:
public bool RandomReName
{
{ returnSettings.ConfigFile.Current.RandomReName; }
}
Kapalı dosyayı kaydet
3) /Connector/CommandHandlers/FileUploadCommandHandler.cs dosyasını açın
64. satırı bulun ve bir karar kodu ekleyin:
if ( Config.Current.RandomReName) // Rastgele bir isim kullanın
sFileName =DateTime.Now.ToString("yyyyMMddHHmmssfff") + "." +sExtension;
Kapalı dosyayı kaydet
4) Projeyi yeniden oluştur, /ckfinder/_source/bin/Debug/CKFinder.dll /ckfinder/bin/Release/CKFinder.dll üzerine yaz veya web sitesi projesine daha önce eklenen referansları kaldırıp dll'i CKFinder.Net projesinden yeniden kaldır
Son adım: /ckfinder/config.ascx aç
40 satır bulun ve bir öznitelik ekleyin: (Aslında, bunu ekleyebilir veya eklemeyebilirsiniz, çünkü önceden varsayılan bir değer seti vardı, ancak orijinal adı kullanırken false olarak ayarlanmalıdır)
//上传完毕后使用随机文件名
RandomReName = doğru;
Kayıt kapalı
Tamam, yapılandırma başarılı olduğuna göre, CKEditor'da bir yükleme fonksiyonu var. Diğer fonksiyonların ayarları zamanınız olduğunda çalışmaya devam edecek~
Bir hatırlatma daha: CKEeditor ve CKFinder klasörlerinde alt çizgili isimler gibi gereksiz birçok şey var, .net projeleri php, asp gerektirmiyor.
Dosya yüklemede hata olursa: Dosya güvenlik nedeniyle görüntülenemiyor. Lütfen sistem yöneticinizle iletişime geçin ve CKFinder profilini kontrol edin.
config.ascx dosyasını değiştirmeniz gerekiyor
public override bool CheckAuthentication()
{
reture yanlış;
}
Değiştirildi:
public override bool CheckAuthentication()
{
Form doğrulama
returnRequest.IsAuthenticated;
}
3. Sayfada CKEditor kontrolünü uygulayın [iki yöntem, a ve b]
[C: Sıkıştırılmış paketteki INSTALL.html alıntılanıyor]
CKEditor'u ASP.NET sayfanızla entegre etmek istiyorsanız, aşağıda belirtilen adımları izleyin.
1. Resmi CKEditor indirme sitesine gidin ve hem CKEditor 3.x hem de CKEditor'un en son sürümlerini indirin ASP.NET Control.
2. Her iki kurulum paketini de istediğiniz konuma açın. N'i kaldırın.
3. Web sitenize CKEditor'a ASP.NET Control için bir referans ekleyin.
Visual Studio'da Add Reference komutunu kullanın ve kurulum paketi için açılmamış CKEditor'dan bin\Release\CKEditor.NET.dll dosyasına ASP.NET göz atın. DLL dosyasını uygulamanızın bin klasörüne manuel olarak kopyalayabilirsiniz.
4. Paketlenmemiş düzenleyici dosyalarını CKEditor 3.x kurulum paketinden kopyalayıp web sitenizin uygulama dizinine yapıştırın.
5. Sayfanızda ASP.NET Control için CKEditor'u kaydedin:
<%@ Register assembly="CKEditor.NET" namespace="CKEditor.NET" TagPrefix="CKEditor" %>
6. Sayfa gövdesine bir CKEditor örneği ekleyin:
<CKEditor:CKEditorControl ID="CKEditor1" runat="sunucu"></CKEditor:CKEditorControl>
【b】
1. <head>Sayfaya ilgili js referansını ekleyin:
<scrip t tipini kaldır="text/javascrip remove t" language="javascrip remove t" src="ckfinder/ckfinder.js"></scrip去掉t>
<scrip t tipini kaldır="text/javascrip t'yi kaldır" dil="javascrip t'yi kaldır" src="ckeditor/ckeditor.js"></scrip去掉t>
2. Sonra, kontrolün yerleştirilmesi gereken <body>yere aşağıdaki kodu ekleyin ve şu kullanım yöntemleri vardır:
(1) Belirtilen sınıf özniteliğini kontrole ekleyin
<textarea id="textarea1" name="editor1" class="ckeditor">merhaba!</textarea>
Sunucu Kontrolleri:
<asp:TextBox ID="TextBox1" runat="sunucu" TextMode="MultiLine" CssClass="ckeditor"></asp:TextBox>
(2) js kodu enjekte edin - burada js kodu en iyi kontrol noktasından sonra veya içinde yazılır <head>
<textarea id="textarea1" name="editor1">merhaba!</textarea>
<scrip remove t type="text/javascrip remove t" >
CKEDITOR.replace('editor1', { yükseklik:400, genişlik:800 });
. .</scrip去掉t>
Sunucu Kontrolleri:
<asp:TextBox ID="mckeditor" runat="sunucu" TextMode="MultiLine"></asp:TextBox>
<scrip remove t type="text/javascrip remove t" >
CKEDITOR.replace('<%=mckeditor. ClientID %>');
. .</scrip去掉t>
=============================================================================================================
İkinci referans:
asp.net ckeditor 3.0.1 ve ckfinder_aspnet_1.4.1.1 yapılandırma yöntemi
http://ckeditor.com.cn/docs/'ın önerilerine göre, CKEditor'un web sayfasında yapılandırıldığı ve tarayıcıda görüntülendiğinde CKEditor'un arayüzünün gerçekten çok güzel olduğunu düşünüyorum, ancak resim yükleme fonksiyonunu denemek istediğimde görseli yükleme butonunu görmedim.
Çevrimiçi aramaya devam ettikçe, "CKEditor'un kendisinin bir yükleme fonksiyonu yok ve yükleme fonksiyonunu sağlamak için CKFinder ile entegre edilmesi gerekiyor" sonucuna varıldı.
Sonra CKFinder 1.4.1.1 for Asp.net indirin, fermuarını açın ve ckfinder klasörünü projenin kök dizinine koyabilirsiniz - çünkü internetteki birçok kaynak, CKEditor ve CKFinder'ı aynı seviye dizine koymanın en iyisi olduğunu söylüyor. Ve böylece projemizde sebepsiz yere iki klasör daha olacak. Ben de bir kod temizliği fetişim var, sanırım,
Yazara saygı göstergesi olarak bir klasör bırakın, bu yeterli olur. İki kişini tutmak beni çok rahatsız ederdi.
CKFinder'ı CKEditor'a entegre etmeden önce, CKFinder'ı biraz yapılandırmamız gerekiyor. Akıllı arkadaşlar, dosya yükleme eklentisi olduğu için yapılandırma yapılacak şeylerin çoğunun dosya yükleme yolu olduğunu düşünmelidir.
CKFinder'ın varsayılan yükleme yolu, userfiles klasörü kendi dizininde yer alıyor, ancak CKFinder'ı CKEditor klasörüne koydum, görseli userfiles'te saklarsam, sistem üç katmanlı klasörü atlayarak dosyayı veya görüntüyü bulmak zorunda, bu yüzden görüntüyü projenin kök dizinindeki upFile klasörüne yüklemeyi planlıyorum.
Bu işlevi uygulamak için, CKFinder altındaki config.ascx dosyasını BaseUrl = "/ckfinder/userfiles/" olarak BaseUrl = "~/upFile/" olarak değiştirmeniz gerekir. Sonra, CKFinder.dll dosyalarını CKFinder/bin klasöründen sistem projesinin bin klasörüne kesin. Ya da CKFinder.dll referanslar ekleyerek projeye dahil edin.
Sonra, dosya yükleme ile CKEditor'u kullanabiliriz:
CKFinder klasörünü CKEditor klasörüne koyun ve sayfada her ikisinin js dosyalarını içe aktarın:
<scrip tsrc="http://www.cnblogs.com/ckeditor/ckeditor.js" type="text/javascrip kaldır t"></scrip去掉t>
<scrip t kaldır src="http://www.cnblogs.com/ckeditor/ckfinder/ckfinder.js" type="text/javascrip remove t t"></scrip去掉t>
Editörü bir kontrole yönlendirmenin iki yolu vardır:
Bunlardan biri istemci kontrol metin alanını kullanmaktır:
<textarea satırlar="20" cols="40" name="txtContent" id="txtContent"></textarea>
<scrip remove t type="text/javascrip remove t" >
var editor = CKEDITOR.replace('txtContent');
CKFinder.SetupCKEditor(editör, 'http://www.cnblogs.com/ckeditor/ckfinder/');
. .</scrip去掉t>
İkincisi ise sunucu tarafı kontrol metin kutusunu kullanmaktır:
<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(editör, 'http://www.cnblogs.com/ckeditor/ckfinder/');
</scrip去掉t>Kişisel olarak, asp.net bir program olduğu için sunucu tarafı kontrolleri kullanın. İstemci kontrollerinden biraz daha yavaş çalışsa da, geliştirme biraz daha hızlı. Ve programcılar olarak, her zaman hoşumuza gelen seçeneği seçmeden önce tüm olasılıkları denemeyi severiz.
Aslında, Text='<%# Bind("info") %>' kullanmadan da kontrollere değerler atayabilir ve bunu doğrudan backcode'da kullanabilirsiniz
this.txtContent.Text="Başlangıç değeri"
Ayrıca mümkün. Değeri almak için doğrudan aşağıdaki kodu da kullanabilirsiniz:
CKFinder ve CKEditor kodu. Sayfayı doğrudan düzenleyiciyle çalıştırdığımda, derleyici aşağıdaki hatayı veriyor:
string content=this.txtContent.Text
Not: TextMode="MultiLine" özniteliği şarttır, aksi takdirde değer null olur.
Programı hata ayıklamadan önce sadeleştirmedim
"ControlDesigner" tür veya isim alanı adı "System.Web.UI.Design" isim alanında yoktur (assembly referansı eksik mi?)
Hata ckeditor\ckfinder\_source\FileBrowserDesigner.cs'ın 19. satırında, bu yüzden dosyayı basitleştirin:
İlk adım, ckeditor'u sadeleştirmektir: _samples ve _source klasörlerini silinir ve dil dizininde sadece üç dil dosyası tutulabilir: en.js, zh.js ve zh-cn.js;
İkinci adım ckfinder'ı sadeleştirmek: _samples ve _source klasörlerini sil ve sadece en.js, zh.js ve zh-cn.js dil dosyalarını dil dizininde tut.
Buradaki js kodunun ikinci satırına dikkat edin: CKFinder.SetupCKEditor(editör, 'http://www.cnblogs.com/ckeditor/ckfinder/'); , burada "http://www.cnblogs.com/ckeditor/ckfinder/" ckfinder'ın mevcut sayfaya olan göreli yoludur,
Lütfen kodu doğrudan kopyalayıp yapıştırmayın, aksi takdirde görüntü yüklenirken aşağıdaki hata ortaya çıkabilir:
Açıklama: HTTP 404. Aradığınız kaynak (veya bağımlılıklarından biri) kaldırılmış olabilir, adı değişmiş olabilir ya da geçici olarak erişilemez olabilir. Lütfen aşağıdaki URL'yi kontrol edin ve doğru yazıldığından emin olun.
İstenen URL: /admin/ckeditor/ckfinder/core/connector/aspx/connector.aspx
Yani, benim gibi ckfinder'ı ckeditor klasörüne koymak istemiyorsanız, burada yol değişikliklerini doğru şekilde doldurduğunuz sürece sorun değil.
Bunun tüm emek olarak kabul edileceğini düşünmüştüm ama görseli yüklediğimde aşağıdaki prompt çıktı:
Güvenlik nedenleriyle dosya görüntülenemiyor. Lütfen sistem yöneticinizle iletişime geçin ve CKFinder profilini kontrol edin.
Söylediği gibi, iyi şeyleri yemek zor değildir. En iyi öğretmene sorabilirim - Baidu. Yukarıdaki prompt bilgilerini Baidu arama kutusuna kopyalayın ve arabaya girdikten sonra PHP entegrasyonu ckeditor'ı hakkında bir gönderi buldum. İşte nasıl yapılacak:
CKFinder altında config.ascx dosyasını değiştirerek halka açık geçersiz bool CheckAuthentication() fonksiyonunun dönüş değerini false yerine doğruya dönüştürün.
Tekrar test ettim, görüntü başarıyla yüklendi! |
Yayınlandı 18.04.2015 19:11:55
|
|
|
