Web Metin Editörü Bootstrap Tabanlı Summernote

Paylaşan Admin

11 Temmuz 2019 Perşembe

Ckeditör, Tinymce web metin editörlerine alternatif olarak iyi sayılabilecek az sayıda ücretsiz uygulama var. Php veritabanı işlemlerinde bu çok meşhur editörlerde bazen sorun yaşanabiliyor. Yaşadığım sorun nedeniyle bende altarnatif bir web editörü araştırmaya koyuldum.



Summernote bootstrap arayüzünü kullanarak basit, pratik ve hızlı çalışan web editörlerinden birisi. Ücretsiz olması ve gelişime açık alt yapısıyla zaten yaygınlaşmış durumda.

Henüz yeni yeni uygulamalarımda tercih ettiğim bir uygulama. Burada bizim için önemli olan kaydetme ve resim yükleme eylemleri. Web editörler dosyanın url değerini yazı içerisine yerleştiriyor. Biz dosyayı hosting' e yüklemek için ekstra yazılımlar geliştiriyoruz. Summernote' de resim yolunu data/png olarak alıyor. Bunu php ve ajax ile değiştirebiliriz.

Kaynak kodu da varsayılan kurulumda bulunmuyor. Kaynağa erişebilmek için codemirrror ile bunu sağlayabiliyoruz.



Kullanım

Head tagları arasına aşağıdaki yüklemeleri çağırıyoruz.

Dönüştürmek için eleman id veya class' ı nı script' te belirtiyoruz.

İçerik metinleri

$('.summernote').summernote({
  airMode: true
});

Summernote' nin son sürümüne erişmek ve örneği incelemek için sitesini ziyaret ediniz.

Summernote Offical Web Site

Summnernote Download

Summernote kullanımına değindikten sonra resim yükleme örneği uygulayabiliriz. Web metin editörleri dosyayı url den çekerek kendi serverınıza yüklememektedir. Biz summernote ile bunu sağlayacağız. Öncelikle sayfamızı hazırlayalım, daha sonra uygulama kodlarımızın yer aldığı javascript ve php uygulamamızı tasarlayalım.

uploader.php dosyamız.

# Upload image example 1
if ($_FILES['file']['name']) {
  if (!$_FILES['file']['error']) {
      $name = md5(rand(100, 200)); //Dosya ismini rastgele sayı ve rakamlarla değiştiriyoruz.
      $ext = explode('.', $_FILES['file']['name']);
      $filename = $name . '.' . $ext[1];
      $destination = 'uploads/' . $filename; //Aynı dizinde ki yüklenen dosya klasörü seçiniz.
      $location = $_FILES["file"]["tmp_name"];
      move_uploaded_file($location, $destination);
      echo 'http://localhost/framework/webeditor/summernote-img-upload-master/uploads/' . $filename; //Resim yüklendikten sonra dosya yolunu editöre gönderiyoruz.
  }
  else
  {
    echo  $message = 'Üzgünüm! Resim yüklenirken hata meydana geldi:  '.$_FILES['file']['error'];
  }
}

Yukarıdaki örnekte ajax ile resim dosyası yükleme işlemini yaptık. Örneği test ettim, çalışıyor. Veri tabanı bağlantılarını yaparak kullanılabilir. Dosya uploads klasörü ve resim yolu doğru girilmelidir.

Bunu Paylaş :