Asp.NET MVC – CKEditor İle Birlikte CKFinder Entegresi
Önceki yazılarımdan olan Asp.NET MVC CKEditor Entegresi ve Kullanımı başlıklı yazımda CKEditor’ün nasıl kullanıldığı hakkında istişare yapmıştık.Lakin ilgili makalede CKFinder entegrasyonuna değinmediğim için bu eksikliği kapatmak açısından bu yazıya karar verdim.
Yazımıza başlamadan önce, yukarıda verdiğim yazıdaki bazı bilgileri burada tekrarlamış olacağız.Buna rağmen CKEditor kurulumuyla ilgili net ve detaylı bir içerik bekliyorsanız öncelikle yukarıdaki linkte verdiğim yazımı okumalısınız.
Öncelikle CKFinder’ın ne olduğundan bahsedelim.
CKFinder, CKEditor modülüne entegre edilebilen ve sunucu bazlı işlemlerde işbirliği sağlayan bir paket modüldür.Genellikle CKFinder ile CKEditor’de makale tarzında yazılar yazılırken, sunucuya resim, video ve flash tarzında dosyalar yükleyebilir ve bu yüklenen dosyaları CKEditor’de ki oluşturalan makalede eşzamanlı olarak kullanabilirsiniz.
Önceki yazımı okuyanlar bilir ki, CKEditor’e ckeditor.com/download adresinden ulaşabilirsiniz.CKFinder’ı indirebilmek için de cksource.com/ckfinder/download adresini kullanabilirsiniz.
CKFinder’ı verdiğim siteden indirirken bir hususa dikkatinizi çekmek istiyorum.
Yukarıdaki ekran görüntüsünden de anlaşıldığı gibi sayfa açılır açılmaz Download Free Trial linkine atlamıyoruz.Bunun sebebi, ben CKFinder’ı kurarken son versiyonunda yaşadığım sıkıntıdan dolayıdır.Sayfanın altına inerseniz eğer, resimde de işaretlediğim gibi son versiyondan bir önceki versiyonu indirmenizi tavsiye ediyorum.(Bu uyarı 2.5.0 versiyonu için geçerlidir.Bu yazı tarihe karışıp üst versiyonlar çıktığı zaman sizler en güncel versiyonu indirip deneyebilirsiniz.)
Şimdi Visual Studio platformunda bir Asp.NET MVC projesi oluşturuyoruz ve oluşturduğumuz projeye indirdiğimiz CKEditor ve CKFinder dosyalarını aşağıdaki gibi entegre ediyoruz.
Bu entegre işleminden sonra öncelikle projemizde CKEditor’ü çalışır hale getirelim.
<script src="~/ckeditor/ckeditor.js"></script>
<script src="~/ckfinder/ckfinder.js"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
Bu script dosyalarını projenizde CKEditor ve CKFinder’ı kullanacağınız sayfanın <head>-</head> tagları arasına tanımlayınız.Ben bu örneğimizde Layout sayfasında tanımlama yapmayı tercih ediyorum.
--- Layout.cshtml ---
<!DOCTYPE html>
<html>
<head>
<script src="~/ckeditor/ckeditor.js"></script>
<script src="~/ckfinder/ckfinder.js"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
</head>
<body>
@RenderBody()
</body>
</html>
Bu tanımlamalardan sonra CKEditor’u oluşturacak komutumuzu sayfamıza ekliyoruz.
@Html.TextArea("editor1")
<script type="text/javascript">
var editor = CKEDITOR.instances['editor1'];
if (editor) { editor.destroy(true); }
CKEDITOR.replace('editor1', {
enterMode: CKEDITOR.ENTER_BR,
});
CKFinder.setupCKEditor(null, '@Url.Content("~/ckfinder/")');
</script>
Artık bu komuttan sonra aşağıdaki ekran görüntüsünde de olduğu gibi CKEditor entegrasyonu tamamlanmış demektir.
Sıra geldi CKFinder modülünü çalışır vaziyete getirmeye.
CKFinder modülünün içindeki “CKFinder -> bin -> Release -> CKFinder.dll” kombinasyonundaki CKFinder.dll dosyasını projemize referans olarak ekliyoruz.
Bu işlem neticesinde CKFinder klasörünün içindeki “config.ascs” dosyasında aşağıdaki modifikasyonu yapıyoruz.
<%@ Control Language="C#" EnableViewState="false" AutoEventWireup="false" Inherits="CKFinder.Settings.ConfigFile" %>
<%@ Import Namespace="CKFinder.Settings" %>
<script runat="server">
public override bool CheckAuthentication()
{
return true;
}
public override void SetConfig()
{
LicenseName = "";
LicenseKey = "";
BaseUrl = "/Content/Resimler/";
BaseDir = HttpContext.Current.Server.MapPath("~/Content/Resimler/");
Plugins = new string[] {
};
PluginSettings = new Hashtable();
PluginSettings.Add("ImageResize_smallThumb", "90x90" );
PluginSettings.Add("ImageResize_mediumThumb", "120x120" );
PluginSettings.Add("ImageResize_largeThumb", "180x180" );
PluginSettings.Add("Watermark_source", "logo.gif" );
PluginSettings.Add("Watermark_marginRight", "5" );
PluginSettings.Add("Watermark_marginBottom", "5" );
PluginSettings.Add("Watermark_quality", "90" );
PluginSettings.Add("Watermark_transparency", "80" );
Thumbnails.Url = BaseUrl + "_thumbs/";
if ( BaseDir != "" ) {
Thumbnails.Dir = BaseDir + "_thumbs/";
}
Thumbnails.Enabled = true;
Thumbnails.DirectAccess = false;
Thumbnails.MaxWidth = 100;
Thumbnails.MaxHeight = 100;
Thumbnails.Quality = 80;
Images.MaxWidth = 1600;
Images.MaxHeight = 1200;
Images.Quality = 80;
CheckSizeAfterScaling = true;
DisallowUnsafeCharacters = true;
CheckDoubleExtension = true;
ForceSingleExtension = true;
HtmlExtensions = new string[] { "html", "htm", "xml", "js" };
HideFolders = new string[] { ".*", "CVS" };
HideFiles = new string[] { ".*" };
SecureImageUploads = true;
RoleSessionVar = "CKFinder_UserRole";
AccessControl acl = AccessControl.Add();
acl.Role = "*";
acl.ResourceType = "*";
acl.Folder = "/";
acl.FolderView = true;
acl.FolderCreate = true;
acl.FolderRename = true;
acl.FolderDelete = true;
acl.FileView = true;
acl.FileUpload = true;
acl.FileRename = true;
acl.FileDelete = true;
DefaultResourceTypes = "";
ResourceType type;
type = ResourceType.Add( "Files" );
type.Url = BaseUrl + "files/";
type.Dir = BaseDir == "" ? "" : BaseDir + "files/";
type.MaxSize = 0;
type.AllowedExtensions = new string[] { "7z", "aiff", "asf", "avi", "bmp", "csv", "doc", "docx", "fla", "flv", "gif", "gz", "gzip", "jpeg", "jpg", "mid", "mov", "mp3", "mp4", "mpc", "mpeg", "mpg", "ods", "odt", "pdf", "png", "ppt", "pptx", "pxd", "qt", "ram", "rar", "rm", "rmi", "rmvb", "rtf", "sdc", "sitd", "swf", "sxc", "sxw", "tar", "tgz", "tif", "tiff", "txt", "vsd", "wav", "wma", "wmv", "xls", "xlsx", "zip" };
type.DeniedExtensions = new string[] { };
type = ResourceType.Add( "Images" );
type.Url = BaseUrl + "images/";
type.Dir = BaseDir == "" ? "" : BaseDir + "images/";
type.MaxSize = 0;
type.AllowedExtensions = new string[] { "bmp", "gif", "jpeg", "jpg", "png" };
type.DeniedExtensions = new string[] { };
type = ResourceType.Add( "Flash" );
type.Url = BaseUrl + "flash/";
type.Dir = BaseDir == "" ? "" : BaseDir + "flash/";
type.MaxSize = 0;
type.AllowedExtensions = new string[] { "swf", "flv" };
type.DeniedExtensions = new string[] { };
}
</script>
Siz bu dosyayı açtığınız zaman içinde yorum satırları ve satır satır komutlar bulunan karışık bir tabloyla karşı karşıya kalacaksınız.Evet, yukarıdaki gibi sadeleştirip projenize devam edebilirsiniz.Şimdi yukarıdaki “config.ascs” dosyasındaki özelliklerden bahsedelim ve yaptığımız işlemi açıklığa kavuşturalım.
CheckAuthentication isimli metod, bir oturum kontrol metodudur.Bu metod ilk etapta false olarak gelmektedir.CKFinder’ı kullanabilmek için bunu true yapmamız gerekiyor.Ama burada dikkat etmeniz gereken bir husus var.Eğer bu metod’da bir oturum kontrolü gerçekleştirmezseniz, sitenize giren her kullanıcı sunucuya istediği dosyayı gönderebilme lüksüne sahiptir.O yüzden siz ciddi projelerinizde bir oturum kontrolü kullanmalı ve oturum açılmamışsa bu metodu false değer olarak geri döndürmelisiniz.
SetConfig isimli metod ise, seçilen dosyaları hangi dizine atacağını belirttiğimiz bir ayar metodudur.BaseUrl dizini belirlerken, BaseDir fiziksel dizin belirtisidir.Ben CKFinder ile seçilen dosyaları “Content” klasörü altında manuel oluşturduğum “Resimler” klasörüne atacağım için bu dizinin adresini tanımladım.
Şimdi sıra geldi projemizi derleyip çalıştırmaya.Ha, bu arada projeyi denemeden önce yukarıda CKEditor’ü çalıştıran komuta göz atanızı tavsiye ediyorum.İlgili komutta ki, “CKFinder.setupCKEditor(null, ‘@Url.Content(“~/ckfinder/”)” komutu sayesinde CKEditor’ümüze entegre edilecek CKFinder modülünün yolunu çoktan belirtmiş olduk.
Projeyi başlattığımız zaman CKEditor’de ki aşağıdaki ekran görüntüsünde işaretlediğim icona tıklayarak CKFinder modülünü açabilirsiniz.
Bundan sonrasını aşağıdaki videodan takip edebilirsiniz.
Son olarak belirtmek istiyorum ki, videoda da dikkatinizi çekmiştir sanırım, resimleri atmak için oluşturduğumuz Content/Resimler klasörü içinde images isimli bir klasör otomatik olarak CKFinder modülü sayesinde eklenmektedir.
Bu yazımızında sonuna gelmiş olduk.
Sonraki yazımda görüşmek üzere…
İyi çalışmalar dilerim.
en üstteki control tagi için sistem belirtilen dosyayı bulamadı diyor altını mavi çizerek ama bu namespace altında dosya var CKFinder.Settings.ConfigFile
Merhaba kolay gelsin .net core’da bunun entegrasyonu varmıdır acaba ?
Merhaba,
Kaynak : asp.net core ckeditor
Merhaba, editörün içerisine düz metin girdiğimde post işlemi oluyor ama editörü kullandıktan sonra post işlemi olmuyor. bu sorunun sebebi nedir?