8 Nisan 2016 Cuma

CKEDITOR KURULUM VE KULLANIMI

     Bir önceki yazımızda (Neydi diye sorarsanız, burda) web sitelerimizin gerek admin paneli, gerekse de ön yüzünde kullanıcıya dinamik site içerikleri yaptırabileceğimiz editörleri incelemiş ve CKEditör'den bahsedeceğimizi belirtmiştik. Peki o kadar editör içinde neden CKEditör? derseniz.Sebebini hemen şöyle açıklayalım, kendi sitesinde de belirttiği üzere "herkes ve herşey için en iyi web text editörü" olmayı hak ettiği için.Ayrıca open source olması, CKFinder gibi işlevselliği yüksek sunucuya rahatlıkla dosya atmanızı sağlayacak eklentiye sahip olması,sürekli ve genişletilebilir modüllerinin olması, kullanımının ve arayüzünün gayet başarılı ve şık olması gibi sebepleri sayabiliriz.Şimdi isterseniz lafı fazla uzatmadan icraata geçip CKEditörü nasıl indirip, projeye nasıl dahil eder ve kullanırız bunun cevabına bakalım.
   http://ckeditor.com/  adresine girerseniz download kısmında sizi Basic,Standart ve Full Package olmak üzere 3 farklı versiyon beklemektedir.Bunlardan herhangi birini indirebilirsiniz, ben size anlatırken Full Package versiyonunu indirdim.Bu inen klasörde JS ve CSS kütüphanaleri yer almaktadır.





















  ckeditor librarysinin yer aldığı klasörü indirdikten sonra, asp.net projesinde control olarak kullanabilmek için "CKEditor.NET.dll" in içinde bulunduğu projeyi indiriyoruz.Bu dll'i projemize hem referans olarak eklicez, hem de CKEditörü toolbox' a eklemek için kullanıcaz.Bunu sitede yer alan "How to Install" alanından da öğrenebilirsiniz.Şimdi hemen bir web projesi oluşturup projeye refeeans olarak "CKEditor.NET.dll" i ekleyelim.Nasıl oluyor derseniz?

1  -  Proje içindeki References kısmına sağ tıklayıp, Add Reference seçin
2  -  Açılan pencereden Browse sekmesine gelin
3  -  CKEditor sitesinden indirdiğimiz projenin ..\bin\Release içindeki CKEditor.NET.dll 'i seçip OK tuşuna basın ve artık projemize referans olarak eklemiş bulunmaktayız.

   Bu işlemi yaptıktan sonra, ilk başta Full Package olarak indirdiğimiz CKEditor librarysinin yer aldığı klasörü projemizin ana dizinine kopyalayıp yapıştıralım. Ben bunu Scripts altına atıyorum, sadece aspx sayfasında "ckeditor.js" register ederken doğru yolu vermemiz gerekecektir. 


















  Şimdi oluşturacağımız web sayfamıza "CKEditor.NET" ve "ckeditor.js" register ettikten sonra ckeditörü istediğimiz gibi kullanabiliriz.















Projemizi çalıştırdıktan sonra CKEditörü istediğiniz gibi kullanabilirsiniz.















  Tüm bunları kodları manuel olarak yazarak yaptık, daha basit bir yola değinirsek CKEditörü Toolbox'a ekleyip ordan nesneyi sayfamıza sürükle bırak yapabiliriz.Bunu yapabilmek için de;

1  -  Toolbox (ctrl+alt ,X) açılıp sağ tıklanıp, eğer yeni bi tab olarak eklemek isterseniz Add Tab..
2  -  Sonra bu açılan yeni taba veya var olan herhangi bir taba sağ tıklanıp, Choose Items seçilir
3  -  Açılan ekrandan yine projeye referans olarak eklediğimiz gibi ..\bin\Release içindeki "CKEditor.NET.dll"  seçilir ve işlemimiz artık tamamlanmıştır.

Artık herhangi bir nesne gibi CKEditör nesnesini sürükleyip sayfamıza bırakabiliriz.Bunu yapınca CKEditor.NET assembly dosyaları da kendiliğinden sayfaya register olacaktır. Üstte yaptığımız gibi manuel olarak yazma derdinde de kurtulmuş oluyoruz.Fakat her halukarda "ckeditor.js" javascript dosyasını sayfamıza register etmeyi unutmayalım, aksi halde projeyi çalıştırdıktan sonra editörü göremeyiz..


  






















İpucu :
  CKEditöre ait tüm library ve dll dosyalarını kendi sitesinden indirerek kullandık.Bunun bir yolu daha var ve şimdi o yolu anlatayım :) Projenin üzerine sağ tıklayıp NuGet Package Manager üzerinden de CKEditor libray'sini indirebiliyoruz.











Install deyip yükledikten sonra, Scripts klasörü altına ckeditör klasörünün indirilip projeye include edildiğini görebilirsiniz.Simdi "ckeditör.js" dosyasını buradan web sayfasına register edip daha basit bir şekilde projenizde kullanabilirsiniz :)
  Son olarak projenizde mutlaka kullanacağınız CKFinder var.Bu yapı sayesinde projenin olduğu server üzerinde dosya oluşturup, dosya silebilir, resim yükleyip indirebilirsiniz. Kısacası server üzerindeki dosya işlemlerini rahatlıkla yapabilirsiniz..Bakmak isteyen arkadaşlar için sitesi https://cksource.com/ckfinder

6 Nisan 2016 Çarşamba

HTML EDITOR YAPILARI

    Merhaba, bu yazımızda hemen her yazılımcının web sitesine dinamik olarak içerik girilebilmesi için çalışma hayatın da mutlaka kullanmak zorunda kaldığı "Editör" lerden bahsediyor olacağız.Diğer adıyla Html Editörlerden bahsediyoruz. Nedir bu Html Editör derseniz, en basitinden ben şuan bu bloğu yazarken bloggera ait Html Editörü kullanıyorum. Web sayfasını kismen tasarlamaya, siteye ait template, şablon oluşturmaya ve içerik girmeye yarayan hayatımızı çok kolaylaştıran yapılardır diyebiliriz.Sitelerin ön yüzünde kullanılabileceği gibi, genel olarak Admin Panel yönetiminde içerik girilirken kullanılırlar.Ben son kullanıcıya belli şablonlar oluşturup yazı, metin, resim, video, link girebileceği bir tasarım yaptırabilirim ve kullanıcı kendi sitesini kendi oluşturur derseniz işte sizin aradığınız yapı tam olarak budur :)

Blogger editörünü örnek verecek olursak :















  Peki kullanabileceğimiz editörler neler dediğinizi duyuyorum. Hemen cevap verelim;

1  -  Devexpress Html Editor    http://demos.devexpress.com/ASPXHTMLEDITORDEMOS/
2  -  Telerik RadEditor  http://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx
3  -  CKEditor   http://ckeditor.com/
4  -  Froala WYSIWYG Html Editor  https://www.froala.com/wysiwyg-editor
5  -  TinyMCE Editor  https://www.tinymce.com/
6  -  Quill JS Editor  http://quilljs.com/
7  -  Kupu  http://www.onlamp.com/2005/04/28/kupu.html
8  -  MarkItUp  http://markitup.jaysalvat.com/downloads/
9 -  Xinha  http://xinha.webfactional.com/
10 - WidgEditor  https://www.drupal.org/project/widgeditor

    Tabi ki kullanabileceğimiz editörler bunlardan ibaret değil, daha sayamadığım bir çok editör var.Burada dikkat edeceğiniz bunların bir kısmının Open Source, bir kısmının ise Lisans istediğidir.Sanırsam Devexpress ve Telerik gibi editörlerin lisans gerektirdiğini söylememe gerek dahi yoktur. Onlar haricindeki bir çok editor bugün itibariyle ücretsiz ve open source olarak dağıtılmaktadır, ama yarın ne olacağını kimse bilemez, bir bakmışız CKEditor X firması tarafından satın alınmış ve ücretli hale gelmiştir.
    Bu editörler üzerinde biraz konuşmak gerekirse Devexpress Html Editor, Telerik RadEditor, Quill, Froala ve CKEditor' ü kullanmış birisi olarak kesinlikle tavsiye edebilirim.Eğer kurumsal bir firmada çalışıyorsanız ve lisans alma sıkıntınız yoksa Devexpress ve Telerik kullanabilirsiniz.Onun haricinde para vermek istemiyorum ama kaliteli bir editor kullanmak istiyorum derseniz kendi web sitesinde de yazdığı gibi en iyi web text editörü olmaya aday CKEditörü kesinlikle tavsiye ederim.Hatta bir sonraki yazımda CKEditor ve CKFinder yapılarını anlatıyor olacağım ki şuan aktif olarak yazdığım projelerde kullanıyorum.
  Yukarıda anlattığım editörler benim dinamik web sitesi hazırlarken her ihtiyacımı fazlasıyla karşılamış ve kullanıcıya geniş bir kullanım yelpazesi sunmamı sağlamıştır.Fakat açık söylemek gerekirse Froala ve Quill editörü hatta MarkItUp'ı yabana atmamak gerekmektedir. Örneğin MarkItUp Editör, JQuery üzerine inşaa edilmiş JavaScript tabanlı metin biçimlendirme editörüdür, html yanında Ajax nesnelerini de desteklemektedir. CKEditör sürekli olarak geliştirilen açık kaynak kodlu metin editörüdür ve sınırsız eklenti desteği mevcuttur. Bir başka editör olan TinyMCE editör de Open Source olup, basit bir şekilde genişletilebilir ve özellikle kullanım arayüzü basit, sade ve programlamacı açıcından kullanılabilirliği çok kolay olması neticesiyle tercih edilebilir.
   Editörler hakkında bu kadar bilgi şimdilik yeterli, bir sonraki yazımda favorilerim arasında yer alan CKEditör ve CKFinder anlatıyor olucam.Kurulumundan başlayıp, bir projeye dahil edilme evreleri ve kullanımından bahsediyor oluruz..