CKEditor ve Ek Özellikleri

Son zamanların en popüler Html editör programına birlikte göz atıyoruz.

Web projeleri üzerinde aktif olarak çalışıyorsanız hiç şüphesiz CKeditor’ü en az bir defa duymuşsunuzdur. Html içerikler oluşturmamızı sağlayarak bize oldukça kolaylık sağlayan bu eklentinin kurulumu ve isteğe bağlı kullanabileceğimiz ekstra özelliklerini nasıl uygulamamıza ekleyebileceğimizi bu yazımızda inceleyeceğiz.

CKEditor Kurulumu


İlk olarak Visual Studio’nun bize sağlamış olduğu hazır kalıp bir mvc projesi açarak işe başlıyoruz.

Resim1

Resim 2

Home controller içerisinde CKeditor isimli bir action açarak basit bir sayfa oluşturuyorum.

Resim 3

Resim 4

Görüldüğü üzere şuan sayfamızda standart bir text area bulunmakta. Artık CKeditor dosyalarımızı projemize ekleyerek aktif hale getirebiliriz.Linke tıklayarak buradan CKeditor paketlerine ulaşabilirsiniz. Ben örnek için standart paketi uygun buldum ve onu indirip projemin content klasörüne rar dosyası içinden çıkan tüm dosyaları ekledim.

Resim 5

Resim 6


Artık CKeditor view içerisine CKeditor’ü ekleyerek çalıştırabiliriz. Burada dikkat edilmesi gereken textarea id=”değer” ile CKEDITOR.replace('değer') aynı olması. Biz çalışmamızda değer olarak “editor” kullandık. (@Html.TextArea("Editor"))

@section Scripts {
    <script src="~/Content/ckeditor/ckeditor.js"></script>
<script>
    CKEDITOR.replace( 'editor' );
</script>
}

Resim 7

 

Yukarıda belirtilen adımları eksiksiz olarak yaptığınız durumda editörümüz sorunsuz bir şekilde çalışacaktır. Karşılaşılması muhtemel bir hata olan "zararlı olabilecek değer" için post action metodunun başına [ValidateInput(false)] tanımlaması yapabilir ya da direk olarak nesneye [AllowHtml] tanımlayabilirsiniz.

CKEditor Ek Özellik Kurulumu

Yukarıdaki örneğimizde kullandığımız standart CKEditor paketi ile gelen özellikler bazı durumlarda yetersiz kalabilmekte. Full paket ise mevcut olan tüm özellikleri barındırdığından projenin gereksiz ağırlaşmasına sebep verebiliyor. Örneğin editör içerisine bir youtube videosu gömmek istediğinizde ya da bootstrap grid kullanmak istediğinizde sadece bu ek özellikleri eklemeniz mümkün. Şimdi CKEditor içerisine youtube eklentisi nasıl kurulur birlikte inceleyelim.

İlk olarak işe eklentiyi indirerek başlıyoruz. Link’e tıklayarak eklenti sayfasına ulaşabilir, “download” butonu ile eklentiyi indirmeye başlayabilirsiniz.

Resim 8

 

Burada dikkat edilmesi gereken bir durum var. Bazı eklentiler çalışmak için başka eklentilere ihtiyaç duymakta. Bu durumda “Add-on Dependencies” başlığı altında bulunan eklentiyi/eklentileri indirmeniz ve ckeditor  içerisindeki plugins klasörüne eklemeniz gerekmekte. Ancak dikkat edin, o eklentiler de farklı eklentilere ihtiyaç duyabiliyorlar.

Resim 9

 

İndirdiğimiz dosyaları projemiz içerisinde bulunan “/Content/ckeditor/plugins” klasörü içerisine atıyoruz ve sonrasında “/Content/ckeditor/config.js” dosyasını açarak en alta resim 9’da da görebileceğiniz ekstra plugin kodunu ekliyoruz.

Resim 10

Resim 11

Gerekli eklemeleri doğru bir şekilde yaptıktan sonra projemizi çalıştırdığımızda eklentinin sorunsuz olarak eklendiğini görmüş olacaksınız.

Resim 12

 

Son olarak; eğer projeniz içerisine birden çok eklenti eklemek isterseniz config.js içerisine eklenen kodu aşağıdaki şekilde güncellemeniz yeterli olacaktır.

config.extraPlugins = 'eklenti1,eklenti2,eklenti3';

Grafikle başlayıp front-end'le devam ettiği yolculuğunun son durağında epey süredir back-end'e kafayı takmış bir yazılım meraklısı. İhtiyacı oldukça öğrenen, öğrendikçe paylaşan ve olanı olduğu gibi söyleyen gerçek bir realist.

İlginizi Çekebilir

Yazıya Git

2017’nin En Büyük 10 Teknolojik Gelişmesi... DEVAMI

MIT 2017'nin en büyük 10 teknolojik gelişmesini derledi.

Yazıya Git

Google Fonts ve Lokal kullanımı... DEVAMI

Google Font servisine ve bu fontları dış kaynaktan yüklemeden, proje içerisine yerleştirerek nasıl kullanıyoruz, birlikte inceleyelim...

Yazıya Git

Asp.Net MVC ReturnUrl... DEVAMI

Genellikle Üyelik Girişi sonrası kullanılan bu sistem oldukça basit, ancak BeginForm’un hatalı kullanıldığı durumlarda çalışmama ihtimali bulunmakta.

Yorumlar

  • comment

    Noname 13 Eki 2017, 15:10

    Açık ve net paylaşım için çok teşekkürler :)