CKEditor Kontrolüne Dışarıdan File Upload ile Resim Ekleme

TestCKEditor' ün ckfinder eklentisi sayesinde dosya upload işlemleri yapılabiliyor fakat ckfinder ücretl iolduğundan upload işlemini jquery yardımıyla yaptık. Ekran görüntüsü,

Dosya Seç ile seçtiğimiz dosya sunucuda belirttiğimiz yere kendi adıyla sorunsuzca kaydediliyor. Yapmamız gereken yükle butonuna tıkladıktan sonra bu resmin aynı zamanda editörümüzün içine eklenmesi? Sayfanın kod kısmı,

Kullandığım jquery kısmı ise,

Biraz Açıklama:

- Dosyayı seçtikten sonra butonun click eventi ile C# tarafında dosya kayıt işlemini yapıyorum, ve yine C#tarafında sayfamdaki Hiddenfield kontrolümün value' sini eklediğim dosyanın fiziksel yolu ile set ediyorum.

HiddenField1_Path.Value = "FileUpload/" + FileUpload1.FileName;

- Sıra geldi bu HiddenField kontrolünün değerini çekmeye, bunu jquery ile yapıyoruz.

 var imgPath = $('#' + '<%=HiddenField1_Path.ClientID%>').val();

- Eğer böyle bir kayıt var ise img adında bir değişkene bu yolu atıyoruz (html olarak); ve src kısmına imgPath değişkenini veriyoruz.

var img = '<img alt="" style="width: 100px; height: 126px;" data-cke-saved-src="' + imgPath + '" src="' + imgPath + '">';

- Şimdi sıra geldi bu imajı CKEditor ün içine atmaya, Eğer direk atarsak o an editörün içinde ne varsa silecek ve sadece bizim en son eklediğimiz imajı atacak; bu çok saçma olurdu. Bunun için önce ckeditor kontrolünün değerini bir değişkende tutuyoruz.

var oldCKContent = $('#' + '<%= CKEditor1.ClientID %>').html();

Daha sonra editöre eski verileri ve yeni eklediğimiz imajı ekliyoruz.

$('#' + '<%= CKEditor1.ClientID %>').html(oldCKContent + img);

Durum bundan ibaret :)