Merve Ağca

Arama

Benzer İçerikler

Son Eklenenler

Paylaş

merveagca.com

Copyright © 2017 • Merve Ağca • Tüm Hakları Saklıdır.

Merve Ağca

Summernote | Web Metin Editörü

Merve AğcaMerve Ağca

Merhabalar, bugün ücretsiz web editörlerinden olan Summernote’dan bahsetmek istiyorum. Summernote, kodlama açısından yazılımcıya kolaylık sağlayan ve tamamen ücretsiz bootstrap destekli bir yazı editörü. Bu editörün en büyük artısı resim upload konusunda sizi hiç yormaması. Yazınızın istediğiniz bir bölümüne resim ekleyebilir, onu boyutlandırabilir ve yazının neresinde durması gerektiğini kolayca ayarlayabilirsiniz. Php, python veya .Net ortamlarında kodlayın hiç farketmez form içerisinde isim verip veritabanına yönlendirmeniz yeterli. Summernote kurulumu için yapılması gereken tek şey aşağıdaki kodları html dosyanıza entegre etmek ve formla beraber ismi veritabanına yönlendirmek.

Sadece text editör olarak kullanıcaksanız aşağıdaki kodları direkt alarak hiçbir dosya gerekmeden html dosyanıza entegre edebilirsiniz.




<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Summernote</title>
  <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> 
  <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.4/summernote.css" rel="stylesheet">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.4/summernote.js"></script>
</head>
<body>
  <div id="summernote"><p>Hello Summernote</p></div>
  <script>
    $(document).ready(function() {
        $('#summernote').summernote();
    });
  </script>
</body>
</html>

http://summernote.org/getting-started/ adresinden de dosyaları indirebilir, site içerisindeki örneklerden yararlanabilirsiniz.

Eğer .NET platformunda yazılım geliştiriyorsanız https://www.nuget.org/packages/summernote/ üzerinden ya da Package Manager Console dan

PM> Install-Package summernote -Version 1.0.3

üzerinden gerekli dosyaları projenize entegre edebilir, projenize css ve js linklerini referans gösterek de kullanabilirsiniz.
http://summernote.org/examples/ adresinde de Summernote text editör alanınızı isteğinize göre nasıl değiştirebileceğiniz hakkında örnekler bulabilirsiniz.

https://github.com/summernote/summernote/

8+
Genel

Yorumlar 0
Henüz yorum yapılmamış...