Web Metin Editörü Bootstrap Tabanlı Summernote

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.

<!-- include libraries(jQuery, bootstrap) -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"></link>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script> 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> 

<!-- include summernote css/js-->
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.css" rel="stylesheet"></link>
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.js"></script>

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

<textarea name="summernote" id="summernote" style="display: none;">İçerik metinleri</textarea>

$('.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.

uploadimage.php dosyamız.

<head>
<meta charset='utf-8'/>
<meta content='text/html; charset=ISO-8859-9' http-equiv='Content-Type'/>
<meta content='IE=edge' http-equiv='X-UA-Compatible'/>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<title>Upload Image Summernote</title>
<meta name="description" content="page setting databese app"/>
<!-- include libraries(jQuery, bootstrap) -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script> 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>

<!-- include codemirror (codemirror.css, codemirror.js, xml.js, formatting.js) -->
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.css">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/theme/monokai.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/mode/xml/xml.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/formatting.js"></script>

<!-- include summernote css/js-->
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.js"></script>
</head>

</body>
<div style="width: 860px; height: auto; margin: 0 auto; padding: 0 15px;">
  <textarea name="summernote" id="summernote" style="display: none;">Bir takım açıklamalar</textarea>
</div>

<script>
$(document).ready(function() { 
  $('#summernote').summernote({
    height: 400,
    codemirror: { // codemirror options
      theme: 'monokai'
    },
    minHeight: null,
    maxHeight: null,
    focus: false,
    callbacks: {
      onImageUpload: function(files, editor, welEditable) {
        for (var i = files.length - 1; i >= 0; i--) {
          sendFile(files[i], this);
        }
      },
    },
    dialogsFade: true,
    fontNames: ['Roboto Light', 'Roboto Regular', 'Roboto Bold'],
    toolbar: [
      ['fontname', ['fontname']],
      ['fontsize', ['fontsize']],
      ['font', ['style','bold', 'italic', 'underline', 'clear']],
      ['color', ['color']],
      ['para', ['ul', 'ol', 'paragraph']],
      //['height', ['height']],
      ['table', ['table']],
      ['insert', ['picture','link']],
      //['view', ['fullscreen', 'codeview']],
      //['misc', ['undo','redo']]
    ]
  });
});

  function sendFile(file, el) {
    var form_data = new FormData();
    form_data.append('file', file);
    $.ajax({
      data: form_data,
      type: "POST",
      url: 'uploader.php',
      cache: false,
      contentType: false,
      enctype: 'multipart/form-data',
      processData: false,
      success: function(url) {
        $(el).summernote('editor.insertImage', url);
      }
    });
  }
</script>
</body>
</html>


uploader.php dosyamız.


<?php 
# 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.

0 yorum

Yorumda bulunarak kendin için, senden sonrakiler için ve bu blog için bir şeyler yazabilirsin. Durma sor, paylaş. Buraya bir hatıra bırak ;)

HTML: Bazı HTML etiketlerini kullanabilirsiniz.(b,a,i vb.)
UYARI: Yorumlar onaylanmadan direk yayınlanıyor. Yorumunuzun yayında kalması için etik kurallara dikkat edelim.

© Php, E-Ticaret ve Web Programlama
Blogger ozkistyle programmer theme
Released under Creative Commons 3.0 CC BY-NC 3.0