Merhaba arkadaşlar. Kendi yönetim panelimde de kullandığım metin editörü olan CKEditor ve dosya yönetim editörü olan CKFinder editörlerini MVC projelerimizde nasıl kullanacağımızı anlatmaya çalışacağım. İlk önce CKEditor'ü ckeditor.com/download adresinden indirebiliriz. Makaleyi yazdığım sırada güncel sürüm CKEditor 3.6.3 sürümüdür. CKFinder'ı ise ckfinder.com/download adresinden indirebiliriz. Editörü ASP.NET projemizde kullanacağımız için ASP.NET uyumlu sürümünü indiriyoruz. Makaleyi yazdığım sırada güncel sürüm CKFinder 2.2.1 sürümüdür.
CKEditor ve CKFinder Kurulumu
İndirdiğimiz ziplenmiş dosyaları projemizde ana dizine çıkarıyoruz. Eğer farklı bir dizin kullanacak isek aşağıdaki adımlarda belirttiğim dizin yerine kendi dizin adresinizi yazabilirsiniz.
"ckfinder/bin/Release/" klasörü altındaki "CKFinder.dll" dll'ini projemize referans olarak ekliyoruz. ckfinder klasörü altındaki config.ascx dosyasında aşağıdaki değişiklikleri gerçekleştiriyoruz.
public override bool CheckAuthentication()
{
if (Page.User.Identity.IsAuthenticated) //Eğer kullanıcı girişi yapılmış ise
return true;
else
return false;
}
public override void SetConfig()
{
BaseUrl = "/Uploads/"; //Dosyaların upload yapılacağı dizin
BaseDir = HttpContext.Current.Server.MapPath("~/Uploads/"); //Dizinin sunucudaki fiziksel adresi
}
Ve View'da gerekli javascript dosyalarını projemize dahil edip ayarlamaları gerçekleştiriyoruz.
<script type="text/javascript" src="@Url.Content("~/ckeditor/ckeditor.js")"></script>
<script type="text/javascript" src="@Url.Content("~/ckfinder/ckfinder.js")"></script>
<script type="text/javascript">
CKEDITOR.replace('ckeditor');
CKFinder.setupCKEditor(null, '/ckfinder/');
</script>
@Html.TextArea("ckeditor") @*ckeditor'ün replace edileceği textarea*@
CKFinder Ayarları
Eğer sizde benim gibi CKFinder'da kullanılan flashupload ve basket pluginlerini kulllanmak istemezseniz veya başka ayarlamalar yapmak istiyorsanız ckfinder dizini altındaki config.js dosyasını açıp gerekli ayarlamaları aşağıdaki gibi yapabilirsiniz.
CKFinder.customConfig = function (config) {
// Define changes to default configuration here.
// For the list of available options, check:
// http://docs.cksource.com/ckfinder_2.x_api/symbols/CKFinder.config.html
// Sample configuration options:
// config.uiColor = '#BDE31E';
// config.language = 'tr';
config.removePlugins = 'basket,flashupload'; //flashupload ve basket pluginlerini kaldırdık.
};
Editörlerimizi artık kullanabiliriz. Hepinize kolay gelsin.
Kaynak Dosyalar: sdrv.ms/Ov9hII
YORUMLAR (35)
ASP için buradan gerekli kurulum bilgilerini öğrenebilirsiniz. Resim yolunu göstermek için ise CKFinder'ın ASP sürümünü indirdiğinizde ana dizinde config.asp dosyasını göreceksiniz. O dosyada baseUrl değerini ayarladığınızda resimleri upload ettiğiniz klasörü CKFinder görecektir. İyi çalışmalar.
Web.config dosyanızda aşağıdaki konfigürasyonu uygulayarak bu sorunu çözebilirsiniz.
Şu şekilde deneyebilir misiniz?
Yukarıdaki jquery kodlarını veriyi kaydetmeden hemen önce çalıştırınız. $textarea degişkeninden gelen veriyi kaydedebilirsiniz.Ckeditor html kodları:
Script kodları:
Kodlar bu şekilde. Sizin yazdığınız kodları nereye yazmam gerekiyor?merhaba, ckeditör veri tabanına kaydettiğimde
bu şekilde kaydediyor bunu nasıl öneleyebilirim çok aratırdım hiç bir yöntem bulamadım bu konuda yardımcı olabilir misiniz rica etsemJavaScript kodu ile ckeditor'ü tanımladıktan sonra
diyerek içeriğin birebir yazdığınız şekilde kaydedilmesini sağlayabilirsiniz.