Kurulum

Pixel Lab® Web Editor'ü projenize eklemek için aşağıdaki adımları izleyin:

1. CDN Bağlantıları

<!-- Font Awesome CDN --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> <!-- Pixel Lab Editor CSS --> <link rel="stylesheet" href="pixel-editor.css">

2. HTML Yapısı

<textarea class="editor"></textarea>

3. JavaScript

<script src="pixel-editor.js"></script>

Yapılandırma

Editörü başlatmak ve özelleştirmek için aşağıdaki yapılandırma seçeneklerini kullanabilirsiniz:

new PixelLabEditor('.editor', { theme: 'light', // veya 'dark' tools: ['blocks', 'format', 'align', 'list', 'insert', 'ai', 'actions'], activeColor: '#4F46E5', geminiKey: 'YOUR_API_KEY' // Yapay zeka için gerekli });

Temalar

Editör iki farklı tema seçeneği sunar:

Light Tema

Beyaz arka plan ve koyu renkli metinler ile profesyonel bir görünüm.

Dark Tema

Göz yormayan koyu arka plan ve optimize edilmiş kontrast oranları.

// Tema değiştirme editor.setTheme('light'); // veya 'dark'

Araçlar

Editör aşağıdaki araç gruplarını içerir:

Bloklar

  • Başlıklar (H1-H6)
  • Paragraf
  • Alıntı
  • Kod bloğu

Biçimlendirme

  • Kalın
  • İtalik
  • Altı çizili
  • Üstü çizili

Ekleme

  • Bağlantı
    • Hedef seçenekleri (_blank, _self, _parent, _top)
    • SEO için nofollow özelliği
    • Güvenlik için noopener ve noreferrer
  • Resim
    • Özel boyutlandırma (px veya %)
    • Alternatif metin desteği
    • Responsive tasarım seçeneği
  • Tablo
    • Framework destekli tablolar
      • Bootstrap 3/4/5
      • UIkit
      • Semantic UI

Yapay Zeka

Google Gemini API entegrasyonu ile içerik üretimi:

API Anahtarı

Yapay zeka özelliklerini kullanmak için Google Gemini API anahtarı gereklidir.

new PixelLabEditor('.editor', { // ...diğer ayarlar geminiKey: 'YOUR_API_KEY' });

Özellikler

  • Yapay zeka destekli içerik oluşturma
  • Dil ve dilbilgisi kontrolü
  • SEO önerileri
  • Markdown formatından HTML'e otomatik dönüşüm

Framework Desteği

Editörde desteklenen framework'ler ve özellikleri:

Bootstrap

  • Bootstrap 3/4/5 sürümleri
  • Responsive tablolar
  • Zebra desenli tablolar
  • Kenarlıklı tablolar
  • Hover efektli tablolar
  • Koyu başlıklı tablolar

UIkit

  • Responsive tasarım
  • Zebra desenli tablolar
  • Hover efektleri

Semantic UI

  • Responsive tablolar
  • Zebra deseni
  • Kenarlıklar
  • Seçilebilir satırlar