AiEditor Geliştirici Kılavuzu

Hızlı Başlangıç

AiEditor, herhangi bir web sayfasına veya web uygulamasına birkaç satır kodla entegre edilebilen, sıfır bağımlılıklı modern bir WYSIWYG düzenleyicisidir.

1. Dağıtım Dosyalarını Projenize Dahil Edin

<!-- AiEditor Core Stylesheet -->
<link rel="stylesheet" href="/assets/editor/aieditor.css">

<!-- Yapılandırma & Çoklu Dil (13 Dil Desteği) -->
<script src="/assets/editor/aieditor.config.js"></script>
<script src="/assets/editor/aieditor.i18n.js"></script>

<!-- AiEditor Motoru (Zero Dependency) -->
<script src="/assets/editor/aieditor.js"></script>

2. Hedef Elemanı Başlatın

<div id="my-editor">
  <h1>İçeriğinizi buraya yazın...</h1>
</div>

<script>
  const editor = new AiEditor('#my-editor', {
    lang: 'tr', // 'tr', 'en', 'de', 'fr', 'es', 'it', 'ru', 'ar', 'zh', 'ja', 'ko' vs. (13 dil)
    licenseKey: 'LIC-XXXX-XXXX-XXXX-XXXX',
    placeholder: 'Yapay zeka ile yazmaya başlayın...',
    aiProvider: 'gemini',
    aiModel: 'gemini-3.1-flash-lite', // en yüksek ücretsiz istek limitine sahip model
    theme: 'light'
  });
</script>

AI Entegrasyonu

Editör, Google Gemini, OpenAI ve Anthropic (Claude) sağlayıcılarını aynı yapılandırma şekliyle destekler. AI asistan menüsünde 3 aksiyon vardır: Yazıyı Genişlet, İmla Düzelt, Dil Çevir. Kendi API anahtarınızı kullanırsınız.

Google Gemini (varsayılan, önerilen)

new AiEditor('#editor', {
  aiProvider: 'gemini',
  aiModel: 'gemini-3.1-flash-lite',
  apiKey: 'GERÇEK_GEMINI_API_ANAHTARINIZ',
  models: {
    gemini: [
      { value: 'gemini-3.1-flash-lite', label: 'gemini-3.1-flash-lite (Önerilen)' },
      { value: 'gemini-3.5-flash', label: 'gemini-3.5-flash' },
      { value: 'gemini-3.6-flash', label: 'gemini-3.6-flash' },
      { value: 'gemini-3.8-flash', label: 'gemini-3.8-flash' }
    ]
  }
});

gemini-3.1-pro Nisan 2026'dan beri ücretsiz katmanda çalışmıyor — sadece ücretli hesaplarda. "-live-" içeren model adları (Live API/WebSocket) burada kullanılamaz.

OpenAI

new AiEditor('#editor', {
  aiProvider: 'openai',
  aiModel: 'gpt-5-main-mini',
  apiKey: 'GERÇEK_OPENAI_API_ANAHTARINIZ'
});

Anthropic (Claude)

new AiEditor('#editor', {
  aiProvider: 'anthropic',
  aiModel: 'claude-haiku-4-5-20251001',
  apiKey: 'GERÇEK_ANTHROPIC_API_ANAHTARINIZ'
});

İstek Limitleri & Hata Mesajları

Her AI çağrısından önce yerel bir istek sayacı kontrol edilir; limit doluysa hiç ağ isteği atılmadan uyarı gösterilir. API'den dönen ham İngilizce hatalar da otomatik olarak anlaşılır Türkçe mesajlara çevrilir.

new AiEditor('#editor', {
  aiLimits: {
    gemini:    { rpm: 15,   tpm: 250000,   rpd: 1000 },
    openai:    { rpm: 500,  tpm: 30000,    rpd: null },
    anthropic: { rpm: 1000, itpm: 2000000, otpm: 400000 }
  }
});

Durum	Gösterilen Mesaj
Sunucu yoğun	Yapay zeka servisi şu anda yoğun. Lütfen birkaç saniye sonra tekrar deneyin.
İstek limiti	İstek limiti aşıldı. Lütfen biraz bekleyip tekrar deneyin.
Geçersiz API key	API anahtarı geçersiz veya yetkisiz. Lütfen API anahtarınızı kontrol edin.
Ağ / zaman aşımı	Bağlantı zaman aşımına uğradı. İnternet bağlantınızı kontrol edip tekrar deneyin.

Resim Kütüphanesi (Galeri)

Görsel Ekle → Kütüphane sekmesi, sol tarafında klasör listesi olan aranabilir bir resim kütüphanesi açar.

Veri Kaynağı

new AiEditor('#editor', {
  galleryEndpoint: 'data/gallery-images.json'
  // [{ "title": "Çalışma Masası", "folder": "Ofis", "src": "https://..." }, ...]
});

folder alanı sol sidebar'daki klasörü belirler. galleryEndpoint'i kendi sitenizde gerçek bir klasörü tarayıp aynı JSON şeklini döndüren bir uç noktaya yönlendirirseniz, kütüphane gerçek klasör içeriğini gösterir — editörde hiçbir değişiklik gerekmez.

Klavye Kısayolları

Hızlı düzenleme ve biçimlendirme için desteklenen yerleşik tuş kombinasyonları:

İşlem	Windows / Linux	macOS
Kalın Metin	Ctrl + B	Cmd + B
İtalik Metin	Ctrl + I	Cmd + I
Altı Çizili	Ctrl + U	Cmd + U
Geri Al / Yinele	Ctrl + Z / Ctrl + Y	Cmd + Z / Cmd + Shift + Z
Yapay Zeka Komut Barı	/ (Slash)	/ (Slash)

Temel API Metotları

Programatik olarak içeriğe müdahale etmek için kullanabileceğiniz standart API fonksiyonları:

editor.getHTML()

Düzenleyiciden temizlenmiş semantik HTML kodunu döndürür.

editor.getSavableHTML()

getHTML() ile aynıdır; ancak lisanssız/deneme kullanımda içeriğin sonuna otomatik olarak AiEditor bağlantısı ekler. Kaydetme/dışa aktarma işlemlerinde bunu kullanın.

editor.setHTML(content)

Düzenleyici içeriğini anında belirtilen HTML dizgisi ile günceller ve sayacı tazeler.

editor.getText()

Düzenleyicinin düz metin (HTML etiketsiz) halini döndürür.