Javascript İle Dinamik Bir Tarayıcı İçi Metin Düzenleyici Nasıl Yapılır?

Ön Hazırlık ve Gereksinimler

Projeye başlamadan önce modern bir tarayıcı (Chrome, Firefox veya Edge) ve temel bir kod editörüne (VS Code gibi) ihtiyacınız vardır. Herhangi bir dış kütüphane kullanmadan, saf (Vanilla) JavaScript ile çalışacağız. Bu yaklaşım, uygulamanızın performansını artıracak ve gereksiz bağımlılıklardan kurtulmanızı sağlayacaktır.

• Modern bir web tarayıcısı (2026 standartlarına uygun).
• Temel HTML5 ve CSS bilgisi.
• JavaScript ES6+ (EcmaScript 6 ve sonrası) sözdizimi hakimiyeti.

Adım 1: Temel HTML Yapısını Oluşturma

İlk adımda, düzenleyicimizin iskeletini kurmamız gerekiyor. Burada en kritik nokta contenteditable niteliğidir. Bu nitelik, herhangi bir HTML elementinin kullanıcı tarafından düzenlenebilir hale gelmesini sağlar.

  Kalın
  İtalik


  Buraya metninizi yazmaya başlayın...

Yukarıdaki kodda, editor id'sine sahip div elementi, kullanıcının metin girişi yapacağı alandır. toolbar ise biçimlendirme butonlarını içerir.

Adım 2: JavaScript ile Komutları İşleme

Tarayıcıda metin biçimlendirmek için document.execCommand metodu kullanılır. Her ne kadar bu metodun bazı kısımları "deprecated" (kullanımdan kaldırılma sürecinde) olarak görülse de, basit düzenleyiciler için hala en hızlı çözümdür. Gelecekte "Input Events API" ile daha modern yöntemlere geçiş yapılabilir.

function formatDoc(command) {
  document.execCommand(command, false, null);
  document.getElementById('editor').focus();
}

Bu fonksiyon, butonlara tıklandığında ilgili komutu (bold, italic vb.) düzenleyici üzerinde uygular ve odaklanmayı korur.

Adım 3: Düzenleyiciye Stil Ekleme

Kullanıcı deneyimini iyileştirmek için düzenleyicimize CSS ile bir görünüm kazandırmalıyız. Düzenleyicinin sınırlarını belirlemek ve odaklanma durumunu yönetmek önemlidir.

#editor {
  border: 1px solid #ccc;
  min-height: 200px;
  padding: 15px;
  outline: none;
}
#editor:focus {
  border-color: #007bff;
}

Bu CSS kodları, düzenleyicinin profesyonel bir metin alanı gibi görünmesini sağlar. outline: none kullanımı, tarayıcının varsayılan mavi odak çerçevesini kaldırarak kendi tasarımımızı uygulamamıza olanak tanır.

Adım 4: İçeriği Kaydetme ve Güvenlik

Kullanıcının girdiği veriyi sunucuya göndermeden önce mutlaka temizlemelisiniz. innerHTML kullanımı, XSS (Cross-Site Scripting - Siteler Arası Betik Çalıştırma) saldırılarına kapı aralayabilir. Veriyi kaydetmeden önce bir temizleme fonksiyonu kullanmak zorunludur.

function getEditorContent() {
  const editor = document.getElementById('editor');
  // Basit bir temizleme örneği (Üretim ortamında DOMPurify kullanın)
  return editor.innerHTML;
}

Kritik Güvenlik Uyarısı: Kullanıcıdan gelen HTML içeriğini doğrudan veritabanına kaydetmek büyük bir güvenlik açığıdır. Mutlaka bir sanitizasyon (temizleme) kütüphanesi (örneğin DOMPurify) kullanarak zararlı script etiketlerini temizleyin.

Adım 5: Gelişmiş Özellikler Ekleme

Metin düzenleyicinizi daha işlevsel hale getirmek için yazı tipi boyutu veya renk değiştirme gibi özellikler ekleyebilirsiniz. execCommand metodu, üçüncü parametre olarak değer alabilir.

function changeColor(color) {
  document.execCommand('foreColor', false, color);
}

Bu kod bloğu, seçili metnin rengini dinamik olarak değiştirmeyi sağlar. Kullanıcıya bir renk paleti sunarak bu fonksiyonu tetikleyebilirsiniz.

Karşılaştırmalı Yöntemler Tablosu

Sıkça Sorulan Sorular

execCommand neden kullanımdan kaldırılıyor?

Tarayıcı üreticileri, bu API'nin standartlaştırılmasının zor olması ve güvenlik riskleri nedeniyle daha modern ve modüler API'lere geçiş yapmayı hedeflemektedir.

XSS saldırılarından nasıl korunurum?

Kullanıcı içeriğini her zaman sunucu tarafında ve istemci tarafında (DOMPurify gibi kütüphanelerle) filtreleyerek, yalnızca izin verilen HTML etiketlerine (p, b, i, ul, li) izin verin.

Mobil cihazlarda çalışır mı?

Evet, contenteditable mobil tarayıcılarda da çalışır ancak dokunmatik ekranlarda imleç yönetimi bazen zor olabilir.

Veriyi veritabanına nasıl gönderirim?

fetch API kullanarak POST isteği ile temizlenmiş HTML içeriğini sunucunuza güvenli bir şekilde iletebilirsiniz.

Daha fazla özellik eklemek için ne yapmalıyım?

Selection API ve Range API konularını araştırarak, metin seçimlerini programatik olarak yönetebilir ve özel biçimlendirme araçları geliştirebilirsiniz.

Sorumluluk Reddi: Bu rehberdeki kod örnekleri eğitim amaçlıdır. Ticari projelerinizde kullanmadan önce güvenlik açıklarını (XSS, CSRF) mutlaka kontrol edin ve profesyonel güvenlik kütüphaneleri entegre edin.

Düzenleyici Performansını Optimize Etme

Metin düzenleyiciniz büyüdükçe ve karmaşıklaştıkça, tarayıcı üzerindeki yük artabilir. Özellikle input veya keyup olaylarını her karakterde tetiklemek, büyük metin bloklarında performans sorunlarına yol açabilir. Bu durumu yönetmek için "Debouncing" (gecikmeli tetikleme) stratejisini kullanmalısınız.

Aşağıdaki kod örneği, kullanıcının yazmayı bırakmasını bekleyerek veritabanı veya yerel depolama işlemlerini optimize etmenizi sağlar:

let timer;
const editor = document.getElementById('editor');

editor.addEventListener('input', () => {
    clearTimeout(timer);
    timer = setTimeout(() => {
        console.log('İçerik kaydediliyor...');
        localStorage.setItem('editorContent', editor.innerHTML);
    }, 1000); // Kullanıcı 1 saniye durduğunda kaydeder
});

Düzenleyiciyi Test Etme ve Hata Ayıklama

Dinamik bir düzenleyicide en sık karşılaşılan sorunlar, HTML etiketlerinin iç içe geçmesi (nested tags) ve kopyala-yapıştır işlemlerinde oluşan istenmeyen stil kalıntılarıdır. Tarayıcıların farklı HTML çıktıları üretebileceğini unutmamalısınız.

Hata ayıklama sürecinde şu yöntemleri izleyebilirsiniz:

• DOM İzleme: Tarayıcı geliştirici araçlarını (F12) kullanarak contenteditable içindeki düğümleri gerçek zamanlı inceleyin.
• Temizleme Fonksiyonu: Yapıştırılan metinlerden style veya script etiketlerini temizlemek için bir yardımcı fonksiyon yazın.
• Klavye Olayları: keydown olayını dinleyerek, kullanıcının "Enter" tuşuna bastığında
  yerine

  etiketi oluşturmasını zorunlu kılabilirsiniz.

editor.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') {
        document.execCommand('defaultParagraphSeparator', false, 'p');
    }
});

Alternatif Kütüphaneler ve Gelecek

Kendi düzenleyicinizi yazmak harika bir öğrenme sürecidir, ancak üretim ortamında (production) çok daha karmaşık gereksinimler (hata yönetimi, tablo desteği, resim yükleme) için profesyonel kütüphaneler tercih edilebilir. Eğer projeniz ölçeklenecekse şu araçları inceleyebilirsiniz:

Bu kütüphaneler, contenteditable üzerindeki tarayıcı tutarsızlıklarını kendi içlerinde çözerek size temiz bir veri yapısı sunar.

Sonuç

JavaScript ile dinamik bir tarayıcı içi metin düzenleyici oluşturmak, web geliştirme becerilerinizi bir üst seviyeye taşır. contenteditable ve execCommand temeli ile başladığınız bu yolculukta, artık kendi ihtiyaçlarınıza göre özelleştirilmiş bir araç geliştirebilirsiniz. Bir sonraki adım olarak, kullanıcıya "Geri Al" (Undo) ve "Yinele" (Redo) özelliklerini eklemeyi veya Selection API kullanarak kendi özel biçimlendirme motorunuzu yazmayı deneyebilirsiniz.