Summernote.js Nedir?
Herkese merhaba,
Bu yazıda Summernote.js kütüphanesinin ne olduğundan ve nasıl kullanılacağından bahsedeceğim.
Summernote.js , Ckeditör, Tinymce web metin editörlerine alternatif olarak iyi sayılabilecek az sayıda ücretsiz Javascript kütüphanesinden biridir.
Summernote.js Bootstrap arayüzünü kullanan basit, pratik ve hızlı çalışan web editörüdür.
Summernote.js ile 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.
Summernote.js, çevrimiçi olarak WYSIWYG düzenleyicisi oluşturmanıza olanak sağlayan bir JavaScript kütüphanesidir.
Summernote.js’nin birkaç özel özelliği vardır.
- Panodan görüntüleri yapıştırabilir.
- Base64 kodlamasını kullanarak görüntüleri doğrudan ilgili alanın içeriğine kaydedebilirsiniz bu sayede görüntü işleme gibi işlemleri uygulamanızda kullanımınıza gerek kalmaz
- Bootstrap 3, 4 ve 5 entegrasyonlarını destekler.
Aşağıdaki kod yardımıyla siz de bu kütüphaneyi rahatlıkla kullanabilirsiniz.
HTML Kodu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Summernote.js Nedir?</title>
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
</head>
<body>
<div class="row">
<div class="col-6 mx-auto mt-2"><h3>Summernote.js Yazı Alanı</h3></div>
</div>
<div class="row">
<div class="col-6 mx-auto mt-2">
<div id="yaziAlani"></div>
</div>
</div>
</body>
</html>JAVASCRIPT Kodu
$(document).ready(function() {
$('#yaziAlani').summernote();
});[codepen_embed height=300 theme_id=1 slug_hash=’zYpKXRp’ user=’yavuzselimkart’ default_tab=’html’ animations=’run’][/codepen_embed]
Sitenizde kullanmak için linkini ziyaret ederek, kendinize göre revizeler yapabilirsiniz.
Kullanımı ile ilgili daha fazla detay için linkini ziyaret ederek detaylı kullanabilirsiniz.
Herkese çalışma hayatında ve yaşamında başarılar kolaylıklar.
