Ck editör benzeri bir text editör kodlamak için dışarıdan hiçbir işlem yapmanıza gerek yoktur. Zaten javascriptte mevcut olan bir fonksiyonu kullanabilirsiniz. Html editör kodlama ile ilgili daha fazla bilgi edinebilmek için aşağıdaki başlıkları incelemeniz yeterli olacaktır. Bu yazıda yazıyı kalınlaştırma gibi her işlem için ayrı bir fonksiyon yazmayacağız. Yazı editörü nasıl kodlanır sorusunun cevabını sadece bir fonksiyonu kullanarak vereceğiz. Yazı Editörü Nasıl Kodlanır? Html Editör Kodlama.
Html Editör Nasıl Kodlanır?
Bir html editör kodlamak için kullanacağımız komut document.execCommandkomutudur. Bu komut ile zahmetsiz bir şekilde bir html editör kodlayabilirsiniz. Bu komut sizin seçmiş olduğunuz bölümü fonksiyona göndererek düzenlenmiş şeklini geri döndürüyor. document.execCommand kullanmak için herhangi bir kütüphaneye veya yardımcı bir şeye ihtiyaç duymuyorsunuz. Bu başlık altında bu fonksiyonun girdilerini ve çıktılarını inceleyeceğiz. Diğer başlıkta ise bir örnekle fonksiyonu göreceğiz.
Bu konuya başlamadan önce belirtmeliyim ki bu komutu bazı tarayıcılar desteklemeyebiliyor. Eğer herkese açık bir html editörü kodlamak istiyorsanız javascript yardımıyla yapmalısınız. Bu fonksiyonun detaylarına geçmeden önce bu fonksiyonudaha iyi anlayabileceğiniz bu linki inceleyebilirsiniz. Bu fonksiyon deneysel bir fonksiyondur.
Bu fonksiyonun kullanımına geçecek olursak iki şekilde kullanabilirsiniz.
document.execCommand("bold"); document.execCommand(komut, false, url işlemi varsa url);
Yukarıda bulunan iki şekilde de bu fonksiyonu kullanabilirsiniz.
Html Editörü Nasıl Kodlanır Örnekler
Bu fonksiyonu kullanmak için html bir nesneye data-commend özelliği verebilirsiniz. Bu özellik yardımıyla butonun data-commend özelliğine göre işlevlendirebilirsiniz.
<button type=”button” data-command=”bold” class=”btn-bold”>Tıkla</button>
<div id=”sonuc” contenteditable=”true”></div>
Örneğin yukarıdaki butona tıklandığında bir altındaki divin içinde seçilmiş yazıyı italik yapalım. Tabii ki bunu bir tuş ile de yapabilirsiniz.
<script>
var btn = document.querySelector('.btn-bold');
btn.addEventListener('click',()=>{
var bevent = btn.dataset['command'];
document.execCommand(bevent, false, null);
})
</script>
Yukarıdaki kodları denediğinizde divin içine yazı yazılabildiğini ve bu yazı seçilip butona tıklandığında yazının kalınlaştırılabildiğini göreceksiniz. Bu komut kendi sade yazı editörünü kodlamak için uğraşanlara çok faydalı bir komut. Ancak başta da belirttiğim üzere tarayıcı desteği sorun olabiliyor. Bu komut ile ilgili daha ayrıntılı bilgi için aşağıdaki linklere tıklayabilirsiniz.
Birinci yoldan bu komutun kullanımı
İkinci yoldan bu komutun kullanımı
Güncelleme: Bu komut bazı tarayıcılar tarafından desteklenmediğinden ve sık sık sorun çıkaracağından biraz daha araştırdım. Bu linkten daha iyi bir çözüme ulaşabilirsiniz.
Daha fazla içerik için ana sayfaya gidebilir ve benimle yorum bölümünden iletişime geçebilirsiniz. Yazı önerisi: yazılım çalışırken unutuyorum ne yapmalıyım?