CKEditor Video Ekleme Eklentisi

3 Ocak 2012
Bu yazıyı beğendiysen paylaşmayı unutma :)
Pin It

CKEditor Plugin

Özellikle iş yerinde yapmış olduğum projeler için video ekleme eklentisi hasıl olunca yazdığım ve CKEditor ile kullanabileceğiniz eklentiyi burada bulabilirsiniz.


Sizlere daha önce CKEditor’e video özelliği eklemek başlıklı yazımda tanıttığım eklenti, tüm embed kodunu yapıştırarak kullanabileceğimiz bir imkan sunuyordu. Ancak bu yazıya konu olan eklenti tamamen özelleştirilebilir ve YouTube, Dailymotion, Vimeo gibi popüler video paylaşım sitelerini kapsıyor. Yapmanız gereken ise yalnızca video boyutlarını ve video ismini sisteme girmek.

Şimdi eklentinin kurulumunu gerçekleştirelim..

1. Öncelikle kullandığınız CKEditor’ün config.js dosyasını açın. Editör konfigürasyonunu yaptığımız sayfaya, config.extraPlugins = ‘VideoEkle’; kodunu ekleyin. Aynı sayfada toolbar’ınızın içerisine aşağıdaki tanımlama kodunu ekleyin. Bu kodu, eklentinizin CKEditor menüsünde nerede görünmesini istiyorsanız, oradaki uygun yere ekleyebilirsiniz.

config.toolbar = ‘MyToolbar’;
config.toolbar_MyToolbar =
[
{ name: ‘video’, items : [ ‘VideoEkle’ ] },
];

Yapacağımız gerekli tanımlamalar yalnızca bu kadar. Şimdi gelelim eklentimizi sayfamıza dahil etmeye..

2. Aşağıdaki download linkinden eklentiyi indirin. Ve indirdiğiniz dosyayı aynı isimde projeniz içerisindeki “ckeditor/plugins” klasörüne kopyalayın. Eklentimizi sistemimize entegre ettiğimize göre çalışmasına ve özelliklerine bir göz atalım.

CKEditor

CKEditor'ü doğru şekilde entegre ettiyseniz, işaretli yerdeki ikon editörünüzde görünecektir.

CKEditor

"Video Ekle" ikonuna tıkladığınızda resimde olduğu gibi özellik penceresi açılacaktır. Burada YouTube, Dailymotion ve Vimeo'dan birini seçmeniz gerekiyor. Genişlik ve yükseklik bölümleri opsiyonel. Eğer giriş yaparsanız sizin değerleriniz geçerli olacak, boş bırakırsanız benim sistemde tanımladığım ölçüler geçerli olacaktır. Varsayılan ölçüleri kendinize göre değiştirmek isterseniz eklenti klasörü içerisindeki plugin.js dosyasını düzenleyebilirsiniz.

CKEditor

"Tamam" butonuna basarak videoyu sayfanıza eklediğinizde ise üstteki görüntüyü elde edeceksiniz.

CKEditor

Kod kısmı da burada olduğu şekilde görünecektir.

İkinci görselde görmüş olduğunuz “Video Adı” alanını YouTube, Dailymotion ve Vimeo sayfalarındaki Paylaş > Embed Kodu alanından elde edebilirsiniz. Bu kod içerisinden neresini alacağınızı da aşağıda görebilirsiniz.

YouTube için;

<iframe width=”560″ height=”315″ src=”http://www.youtube.com/embed/1ynu_zDYBYk” frameborder=”0″ allowfullscreen></iframe>

Dailymotion için;
<iframe frameborder=”0″ width=”480″ height=”365″ src=”http://www.dailymotion.com/embed/video/xne0vt“></iframe>

Vimeo için;
<iframe src=”http://player.vimeo.com/video/13087961?title=0&amp;byline=0&amp;portrait=0″ width=”400″ height=”295″ frameborder=”0″ webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

CKEditor ile ilgili daha fazla detay için ASP.NET ile CKEditor kurulumu ve CKFinder Entegrasyonu ve CKEditor için Türkçe Desteği isimli makalelerime göz atabilirsiniz.

Eklentiyi indirmek için Projeler sayfasına göz atınız.

Benzer Yazılar


DeliPenguen'i Google+'da bulun



  1. Mehmet K.
    20 Aralık 2012 - 11:56

    MErhaba, videoekle plugin dosyasını belittitğiniz gibi CK editörün son sürümüne entegre etmeye çalıştım ancak başarılı olamadım.

    • :DeliPenguen
      21 Aralık 2012 - 13:01

      Her hangi bir hata aldınız mı? Rica etsem adımları tekrar kontrol edebilir misiniz?

  2. Mehmet K.
    21 Aralık 2012 - 19:33

    Sistem herhangi bir hata iletisi vermiyor. eklentiyi plugins klasörüne kopyalıyorum ve config .js dosyasının içerisine config.extraPlugins = ‘VideoEkle’; tanımlamasını eklediğimde editör sayfada hiç gözükmüyor. Başka eklentilerde ekledim. onlarda bir sorun yok. kullandığım CK editor şuan siteden indirdiğim son sürüm. 4.0

  3. Noname
    15 Ocak 2013 - 13:35
  4. :DeliPenguen
    15 Ocak 2013 - 13:53

    @Noname, İsim ve mail vermeye tenezzül etmemişsin ama orjinali verdiğin linkte de burada ki ne? Hadi anladım bu kadar eziksin. Başkalarının yapabildiklerini bırak yapmayı hayalini bile kuracak kapasiteye sahip değilsin belli.. Amacın ne bir de bunu söylesen?

  5. Aykut
    15 Mayıs 2014 - 03:14

    Merhaba. Genişlik ve Yüksekliğin Default değerleri gelmiyor.

  6. abdurrahman
    13 Mart 2016 - 18:08

    eklentinin indirme linki nere bulamadım