mehmetduran.com - Paylaşmak Güzeldir...
Javascript ile FCK Editör Kullanımı (Oluşturma, Değer Alma ve Diğer İşlemler)
Bu yazımda web projelerinde çok sık kullanılan html editörlerden olan FCK editörü Javascript ile nasıl kullanacağımızdan bahsedeceğim. Sitemin yönetim panelini tamamen Ajax ile hazırladım ve tüm işlemleri Ajax ile yani Javascript ile yapıyorum. Ajax işlemlerinde de editör değerini Javascript ile almam gerekiyor. Bunun için editörü Javascript ile nasıl kullanacağımıza baktım ve bu bilgileri sizlerle paylaşıyorum. Birçok kişi ihtiyaç duyacaktır. Ayrıca editöre veritabanından alınan bir değeri nasıl yükleyeceğimiz konusunda da bir ipucu paylaşacağım. Bu konuda daha önce birçok soru gelmişti. Şimdi FCK editörü Javascript ile nasıl kullancağımıza bakalım.

Öncelikle editör dosyalarını indirmeliyiz. İndirdikten sonra script tarafında editör işlemleri için gereken editörün script dosyasını sayfamıza eklemeliyiz. Bunu Asp.net'te kullandığımız Dll'e benzetebiliriz. Ayrıca şunu da belirteyim ki Javascript ile kullandığımızda Asp.net için gereken Dll dosyasına da gerek yok. Editör dosyaları editörü kullanmamız için yeterli olmakta. Şimdi script tarafında bir adet editör oluşturmak için gereken kodlara bakalım.

 
  <script src="fckeditor/fckeditor.js" type="text/javascript"></script>
 
  <script type="text/javascript">
      var editor = new FCKeditor("editor"); //id veriyoruz. başka özellikleri de verebiliyoruz.
      FCKeditor.BasePath = "/fckeditor/"; //editor yolu.
      editor.Create();
  </script>
 

Görüldüğü gibi basit bir şekilde yazdığımız kod ile sayfamıza editörü ekleyebiliyoruz. Bu editörü ekledikten sonra Javascript ile değerini almak için ise şu şekilde bir script kodlama yapmalıyız.

 
  <script type="text/javascript">
      function editor_degeri_al() {
          return FCKeditorAPI.GetInstance("editor").GetXHTML();
      }
  </script>
  <input type="button" id="kaydet" value="Kaydet" onclick="alert(editor_degeri_al());">
 

Bu şekilde de editörün değerini Javascript ile elde edebiliyoruz. Ajax işlemlerinde editör değerini alıp, servera iletmek için bu şekilde bir kullanım yapmalıyız.

Bir diğer sorun ve bugüne kadar çok sorulan bir sorun ise veritabanında alınan verileri editöre gömmek ve tekrardan düzenlemeler yapabilmekle ilgiliydi. Bunun için ise bir adet textarea elementi ile işimizi rahatlıkla halledebiliyoruz. Veritabanından alınan değeri textarea tagı arasına yazdırmalıyız ve ardından bu textarea'yı editör haline getirmeliyiz. Bunu FCK ile rahatlıkla yapabiliyoruz. Bunun için yazacağımız kodlar ise şu şekilde olmalı.

 
  <textarea id="editor">Buraya veritabanından gelen değeri yazdıracağız.</textarea>
  <script type="text/javascript">
      var editor = new FCKeditor("editor");
      FCKeditor.BasePath = "/fckeditor/";
      editor.ReplaceTextarea();
  </script>
 

Görüldüğü gibi bu şekilde de veritabanından veya başka kaynaktan alınan Html bir veriyi önce textarea'ya ardından da editöre yüklüyoruz. Daha sonra da editör değerini alıp işlemlerimizi gerçekleştirebiliriz.

Bu işlemi FCK için paylaştım. Çünkü sitemde FCK editör kullanıyorum. Ancak tüm editörler script tabanlı olduğu için bu şekilde bir kullanımı tüm editörler ile yapabilmekteyiz. Daha önce okulda yapmış olduğum bir projede kullandığım bir editörün değerini de yine kendi kütüphanesi yardımı ile bu şekilde alabiliyordum.

Javascript ve Ajax ağırlıklı çalışanlar için faydalı olacağını düşünüyorum.

İyi Çalışmalar.
Mehmet Duran 16 Temmuz Perşembe 2009 29 22672 4,6
Javascript Editör Html Editör Html İnternet Tanıtım Çözüm FCK
Bookmark and Share
Bu Yazıyı Değerlendirin.
Konuyla İlgili Olabilecek Diğer Yazılar Türkiye 13. Zeka Oyunları Yarışması Microsoft Yaz Okulu İlk Haftanın Ardından Asp ile FCK Editör Kullanımı Asp.net MVC 2.0 Yayınlandı Asp.net MVC'de ActionResult Türleri
Yorumlar
Yorum Yaz
RSS Yorum Takibi
Ahmet 16 Temmuz Perşembe 2009 09:15 #1
Çok güzel bir uygulama...Paylaşımın için teşekkür ederim.
hasan TUTAR 17 Temmuz Cuma 2009 15:17 #2
hocam mvc ile örneğin anasayfadan belli bir ID`de ki makaleye nasıl gidebilirim.Yardımlarınız için minnettarız iyi çalışmlar.
Mehmet Duran 17 Temmuz Cuma 2009 16:48 #3
Merhaba. MVC ile link işlemleri için Html.ActionLink metodunu veya Url.Action metodunu kullanabilirsin. Bu metotlardaki parametre değerlerini oluşturduğun Url yapısına göre verebilirsin. Ancak bu metotlar dışında kendi oluşturacağın metotlar ile de link verme işlemini gerçekleştirebilirsin. Bu konuda yazımı en kısa sürede yazmayı planlıyorum.
Salih Gedik 18 Temmuz Cumartesi 2009 00:42 #4
FCK yı Wordpress te kullanmıştım. Ama user a Fck vermek tehlikeli değilmidir?
Mehmet Duran 18 Temmuz Cumartesi 2009 00:47 #5
Dediğin çok doğru. Zaten bu konuda yazı da yazmıştım. Fck ile dosya upload işlemleri gerçekleştirilebiliyor. Bunu kullanıcıya sunarsak serverımız, hostumuz patlayabilir. :D Bunun sadece güvenli işlemler için admin işlemleri için tercih edilebilir. Kullanıcılar için daha güvenli sadece text işlemleri yapan editörler tercih edilmeli veya Fck sadece text işlemleri için uyarlanmalı ve kullanıcıya sunulmalı.
Salih Gedik 18 Temmuz Cumartesi 2009 00:58 #6
BBCODE kullanmak daha mantıklı ozaman. Upload ı geç XSS ve SQLinjection baş ağrıtacak. Kullanıcı arayüzü bbcode ile olmalı değil mi?
Mehmet Duran 18 Temmuz Cumartesi 2009 01:07 #7
Sql injection için .Net`te parametre yöntemi kullanmak veya veritabanı üzerinde işlem yapılıyorsa procedure kullanmak yeterli. XSS için de editörden gelen değerde ufak bir kontrol yeterli olur. Bence dosya upload işlemi bunlardan daha önemli.
Salih Gedik 18 Temmuz Cumartesi 2009 01:12 #8
Upload la da aspnet dosyası sokarlar vs vs :) java mı .Net mi?
Mehmet Duran 18 Temmuz Cumartesi 2009 01:25 #9
Soruyu C# mı Java mı diye sormalıydın. İkisi de oldukça güçlü ama ben ağırlıklı olarak C# bildiğim ve kullandığım için C# derim. Ama çok kişiye sorsan iki dili tercih edenlerin sayısı birbirine oldukça yakın olur diye düşünüyorum. Ben C# diyorum ama mümkünse ikisini de bilmek lazım.
salih 18 Temmuz Cumartesi 2009 01:27 #10
C# ile VB.NEt arasında bir fark var mı? Çok bariz
Mehmet Duran 18 Temmuz Cumartesi 2009 01:34 #11
İkisi de aynı sayılır. Tek fark kodlamadaki farklılık. C#`ta {} parantezler varken VB'de Begin End var ve bunun gibi farklılıklar. Ben hiç VB bilmeden öğrenmeden VB'i anlayıp, yazabiliyorum. Birinden birini bilmek diğerini anlamak ve yazmak için yeterli olur düşüncesindeyim.
salih 18 Temmuz Cumartesi 2009 01:35 #12
çok sağol hakkını helal et :)
Mehmet Duran 18 Temmuz Cumartesi 2009 01:38 #13
Helal olsun. :D
ismail 27 Temmuz Pazartesi 2009 11:52 #14
'FredCK.FCKeditorV2.FileBrowser.Config' türü yüklenemedi. \fckeditor\editor\filemanager\connectors\aspx\config.ascx ben de bu hatayı veriyor... bunun nedeni ne??? bilen var mı
Mehmet Duran 27 Temmuz Pazartesi 2009 23:48 #15
Merhaba. Eğer dosya yolları doğru ise bu hatayı engellemek için belirtilen dosyadaki bir değişkenin değerini değiştirmek gerekiyordu. Bunun için editörü indirdiğinde içindeki Readme (yanlış hatırlamıyorsam) dosyasında belirtilen ayarları yapman gerekir.
Serdar 16 Ağustos Pazar 2009 09:45 #16
peki hocam örneğin sizin sitede tagler otomatik renkleniyor veya bazı sitelerde gördüm c# kodları aynı VSdaki gibi otomatik aynı rengi almış bunu nasıl sağlayabiliriz? yani tek tek satır satır kodları boyamak zorundamıyız?
Mehmet Duran 16 Ağustos Pazar 2009 11:55 #17
Merhaba. Bunun çeşitli yöntemler mevcut. Ben sitemde paylaştığım kodları Visual Studio'nun eklentisi olan Copy Source as Html eklentisi ile elde ederek paylaşıyorum. Bu konu ile ilgili buradan bilgi alabilirsin. Bunun dışında script ile de bunu yapmak mümkün. Bunun için hazırlanan scriptler var ve bu scriptler dile göre kodları renklendirmekte. Bunu da arayarak bulabilirsin.
Serdar 16 Ağustos Pazar 2009 18:59 #18
evet oldu teşekkürler. Peki hocam birşey daha sormak istiyorum. Örneğin bir çok html tagi içeren bir yazı yazdık ve kaydettik ( resim bağlantı vs. ) sonra bunu datalistte çağırmak istiyoruz. veritabanındaki tablodan içerik kolonundan veriyi çekerken label ın text ine evali yazdık. bu içerikteki html tagler gözükecek midir ? örneğin resimler resim.jpg olarak mı çıkacak yoksa label'ın içinde resim olarak mı gözükecek datalistte?
Mehmet Duran 16 Ağustos Pazar 2009 19:09 #19
Datalist, repeater kontrollerinde html veri gözükmesi gerektiği görünür. Bir sorun olmaz. Ancak gridview'da bunu süzecek bir özellik mevcut. Bu özelliğe göre verileri html olarak görüntüleyebildiğin gibi tamamen text olarakta görüntüleyebilirsin. Ancak ne eklediysen o gözükür bir sorun olmaz. Dinamik siteler bu şekilde yapılıyor.
Alim Keskin 15 Nisan Perşembe 2010 10:33 #20
ben siteme fck Editö ekledim Fck Editör ile Database veri kaydedebiliyorum.ancak iş duzenlemeye gelınce hata alıyorum.Hata databasedeki veriyi duzenlemek uzere FckEditör içine çekiyorum.Güncelleştir diyince databasedeki veriyi değiştirecene siliyor.Yani Fck ya giridiğim degğer Labelda gözükmüyor
Alim Keskin 16 Nisan Cuma 2010 09:23 #21
Merhaba.Hocam Öncelikle iyi günler,Hocam ben şimdi BLog sitesine Fckeditör ekledim Fck Editör ile Yazı Ekleyebiliyorum Database. FAKAT iş Gridviewe çektiğim bilgeli düzenlemeye gelince databasedeki veriyi Fck editörün Value değiri ile çekiyorum Fakat Veriyi güncelleştir diyince Veiriyi Düzenleyeciği yere veriyi Databaseden Siliyor. Yardıma ihityacım var isterseniz fotolarıda yukleyebilirim.
Mehmet Duran 16 Nisan Cuma 2010 11:49 #22
Merhaba. Ancak cevap verebiliyorum. Öncelikle işlemin doğru veya yanlış çalıştığını gerekli kod satırına break point koyarak görebilirsin. Burada update komutu çalıştırdığında veriler gidiyorsa güncelleme işleminde editörden boş değer geliyordur. Büyük ihtimalle sorun buradan kaynaklanıyordur. Buradaki işlemlere dikkat etmelisin.
ALim KESKİN 16 Nisan Cuma 2010 18:23 #23
Hocam Pekala FckEditörün Güncelleme alanına nasıl ulasırım ve bunu Acces database gore ayarlarım ?
Mehmet Duran 16 Nisan Cuma 2010 18:51 #24
Güncelleme işlemi için sen seçtiğin veriyi alıp, editöre atayacaksın. Veriyi editörde görüntüleyip, düzenleme yaptıktan sonra ise herhangi bir elementin bir eventı ile (buton_click, vb. veya Ajax ile) editörün değerini alıp tekrardan veritabanına kayıt edeceksin. Bu işlemin mantığı bu. Bu şekilde veritabanı türü farketmeden her türlü veritabanıyla bu işlemi yapabilirsin. Ayrıca yorum yazmadan önce sormak istediğin soru hakkında kısa bir araştırma yaparsan cevapları kendin de bulabilirsin. Bu gelişimin için çok daha iyi olacaktır.
Alim KESKİN 17 Nisan Cumartesi 2010 18:23 #25
Teşekkürler Dediklerinizi dikkate alacağım.
Kenan BEYAZ 24 Ağustos Salı 2010 23:00 #26
Selamlar makaleniz güzel ve yararlı olmuş, bu şekilde fckeditor kullanılıyor fakat JQuery ile fckeditor kullanmaya kalktığımda ilk başlarda sorun yokken. Daha sonra fck ya biraz fazla içerik girince bir türlü içeriği aldıramadım. fck den çekebileceğimiz veriler için JQuery de herhangi bir limit mi vardır?
Mehmet Duran 25 Ağustos Çarşamba 2010 13:39 #27
Merhaba. Öncelikle söylediğin gibi bir limit olması söz konusu değil. Bu şekilde kullanımı çok yerde yaptım ve hiç sorun olmadı. Ayrıca editörün jQuery bir bağlantısı yok. Editörün kendi script kütüphanesi mevcut ve bu script ile editör üzerinde işlemler yapılabiliyor. Sorun oluşuyorsa başka bir durum söz konusudur. Yazdığın kodları bir daha gözden geçirmelisin.
Murat 03 Mart Perşembe 2011 15:44 #28
burada editörün içeriğinin nasıl okunacağız yazılmış. peki ajax ile çektiğim veriyi editörün içerisine nasıl yazdıracağım. amacım birinci editörün içindeki yazıyı okuyum, belli bir işlemden geçirdikten sonra işlenen veriyi ikinci editörün içerisine yazdırmak.
Mehmet Duran 08 Nisan Cuma 2011 22:29 #29
@Murat, editörler zaten script ile geliştirilmiş uygulamalardır ve içerik alma, içerik atama gibi fonksyionları vardır. Bunları görebilmek için kullandığın editörün dökümanları incelemelisin.
İsim :
Site :
Yorum :

Buradan bu yazıya ait yorumları RSS olarak takip edebilirsiniz.

Bu servis ile yazılara eklenen yorumları RSS ile takip ederek konu ile ilgili başkaları tarafından yapılan yorumları veya konuyla ilgili sorduğunuz sorulara verilen cevapları görebilirsiniz.
Başarısızlıklarınız ile soylu bir şekilde yüzleşin, başarıdan farkı kalmayacaktır.
Bölümler
Yazılar
Arşiv
Arama
Linkler
Site İçi Arama
Son Zamanlarda Ne Yapıyorum ?
İstatistikler - Araçlar - Reklam
İstatistikler
Sayaç
Mehmet Duran | mehmetduran.com | Copyright © 2009