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

Dijital Reklamlara Başlamak İçin 5 Sebep... DEVAMI

Dijital reklamlar, tüm iş sektörlerinin bel kemiği olmaya başladı. Peki neden?

Yazıya Git

Türkçe ASP.NET MVC Kaynaklarında Yapılan Hatalar... DEVAMI

Kaş yapalım derken göz çıkartmamak adına bir yazı...

Yazıya Git

CKFinder 3.4.2 Kurulumu... DEVAMI

CKSource tarafından geliştirilen CKFinder Web Dosya Yöneticisi'nin, ASP.NET MVC projesine CKEditor entegrasyonu'nu birlikte inceleyelim

Yorumlar

  • comment

    Noname 13 Eki 2017, 15:10

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