---
title: "Markdown editor"
type: plugin
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "JavaScript markdown editor plugin for Tailwind CSS projects. WYSIWYG and plain Markdown modes, live preview, RTL support, dark mode. Works with Django, HTMX, Laravel, React."
url: https://frutjam.com/tr/plugins/markdown-editor
---

# The Native-First, High-Performance Markdown Plugin for JavaScript

## Felsefe: "Önce Yerli"

Çoğu editör standart web iş akışını bozar. **MarkdownEditor** bunu benimsiyor.
Doğrudan bir `<textarea>`'ın üzerinde yer aldığından, verileri işlemenin yeni bir yolunu öğrenmenize gerek yoktur.

- **Veri Bağlamaya Gerek Yok:** Kutudan çıktığı haliyle `<form method="POST">` ile çalışır
- **Standart Erişim:** `document.getElementById('editor').value`'u normal bir giriş gibi kullanın.
- **Arka Uç Agnostik:** Normal bir form alanı gibi herhangi bir arka uçla (Python, Node.js, PHP vb.) çalışır

## Temel Özellikler

### 🖼️ Gelişmiş Resim Yükleme (SEO Optimize Edilmiş)

Veritabanınızı ağır Base64 dizeleriyle şişirmeyin. Görüntüleri doğrudan sunucunuza veya S3 klasörünüze yüklemek için API'mizi yapılandırın. Düzenleyici URL'yi alarak Markdown dosyalarınızı hafif ve sitenizin SEO sıralamasını yüksek tutar.

### 🔀 Hibrit ve Sade Modlar

Kullanıcılarınıza her iki dünyanın da en iyisini sunun. Kolay biçimlendirme için **Görsel (WYSIWYG) Karma mod** ile dikkat dağıtmayan, ham sözdizimi düzenleme için **Düz İşaretleme modu** arasında geçiş yapın.

### 🌍 RTL Desteğiyle Global Kullanıma Hazır

Sağdan Sola (RTL) diller için tam yerel destek. Otomatik metin yönü hizalamayla **Arapça, Urduca veya Farsça** desteği gerektiren projeler için mükemmeldir.

### ⚡ Geniş Ölçekte Performans

- **Hafif**: Sayfa yüklemenizi yavaşlatmayacak, yaklaşık 116 KB'lik küçük bir alan
- **Büyük Belge Desteği**: Giriş gecikmesi veya tarayıcının donması olmadan binlerce satırlık metni işleyecek şekilde optimize edildi
- **Akıllı İşleme**: Geri dönen önizleme güncellemeleri, önbelleğe alınmış stil hesaplamaları ve liste devamı ile girinti arasında çakışmayan klavye kullanımı; böylece Sekme ve Enter her zaman tam olarak tek bir şey yapar

### ♿ Varsayılan Olarak Erişilebilir

Tam ARIA desteği yerleşiktir ve ekstra yapılandırma gerektirmez. Araç çubuğu uygun bir `role="toolbar"` yer işaretidir, önizleme bölmesi `role="region"` etiketlidir, tüm SVG simgeleri ekran okuyuculardan gizlenmiştir, önizleme geçişi açık/kapalı durumunu `aria-pressed` aracılığıyla gösterir ve devre dışı bırakılan araç çubuğu düğmeleri hem `disabled` hem de `aria-disabled` kullanır, böylece yardımcı teknoloji asla yanıltılmaz. Modlar kapatıldığında odağı tetikleme düğmesine döndürür.

### 🛡️ Sıfır CSS Çatışması

Tüm düzenleyici stilleri tamamen `.markdown-editor-wrapper` öğesinin kapsamına alınmıştır. Tailwind'in genel ön kontrolü (`h1`–`h6`, `a`, `button` vb. için öğe sıfırlamaları) hariç tutulur, böylece düzenleyici tek bir stili bozmadan aynı sayfada Bootstrap, Tailwind veya başka herhangi bir CSS çerçevesiyle birlikte yaşayabilir.

### 🔒 XSS Güvenli Önizleme

Oluşturulan önizleme, DOM'a yazılmadan önce [DOMPurify](https://github.com/cure53/DOMPurify) aracılığıyla temizlenir. Hazırlanan etiketleme girişindeki komut dosyası etiketleri, satır içi olay işleyicileri ve kötü amaçlı URL'ler otomatik olarak çıkarılır; hiçbir yapılandırma gerekmez.

## Markdown Düzenleyici Demosu

# Markdown Editor

## Hızlı Uygulama

### 1. Kurulum

NPM'yi kullanarak yükleyebilir, JavaScript dosyasını doğrudan içe aktarabilir veya hızlı dağıtım için bir CDN kullanabilirsiniz.

#### NPM aracılığıyla yükleme

```bash
npm install markdown-text-editor
```

VEYA

#### CDN kullanma

Alternatif olarak HTML'nize aşağıdaki CDN bağlantılarını ekleyin

```html
<script src="https://cdn.jsdelivr.net/npm/markdown-text-editor"></script>
```

### 2. HTML Yapısı

Standart formunuzun içine bir `<textarea>` yerleştirmeniz yeterlidir. Özel ambalajlara gerek yoktur.

```html
<form action="/api/save" method="POST">
  <textarea id="markdown-editor" name="content"># Hello World</textarea>
  <button type="submit">Save Content</button>
</form>
```

### 3. JS ve CSS'yi içe aktarın ve eklentiyi textarea öğenizde başlatın

```javascript
import MarkdownEditor from "markdown-text-editor";

const editor = new MarkdownEditor('#markdown-editor', {
  placeholder: 'Write your markdown...',
  toolbar: ['heading', 'bold', 'italic', 'strikethrough', 'ul', 'ol', 'checklist', 'blockquote', 'link', 'preview'],
});
```

### 4. Yapılandırma ve Özelleştirme

Bir `options` nesnesi ileterek düzenleyicinin davranışını ve arayüzünü tamamen özelleştirebilirsiniz. Bir seçeneği atlarsanız **varsayılan** değer kullanılır.

| Mülk          | Tip              | Varsayılan    | Amaç                                                                                                                                                                                                     |
| ------------- | ---------------- | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `mode`        | `string`         | `'plain'`     | Başlangıç ​​görünümünü ayarlar. WYSIWYG deneyimi için `'hybrid'` veya ham sözdizimi için `'plain'` kullanın.                                                                                             |
| `placeholder` | `string`         | `'Write...'`  | Düzenleyici boş olduğunda gösterilen metin.                                                                                                                                                              |
| `toolbar`     | `array`          | `[...]`       | Hangi araçların hangi sırayla görüneceğini tanımlar.                                                                                                                                                     |
| `footer`      | `false | object` | hepsi görünür | Düzenleyicinin altında gösterilen durum çubuğunu kontrol eder. Tamamen gizlemek için `false` olarak ayarlayın veya istatistikleri tek tek değiştirmek için bir nesne iletin.                             |
| `theme`       | `string`         | miras alınan  | Düzenleyici temasını açıkça ayarlar (`'light'`, `'dark'`, `'snowberry'`, `'darkberry'`). Atlanırsa, düzenleyici `data-theme`'i en yakın üst öğeden veya `<textarea>`'ın kendisinden devralır.            |
| `minHeight`   | `number`         | `200`         | İçerik kısa olduğunda düzenleyicinin küçüleceği piksel cinsinden minimum yükseklik. Otomatik büyüme aralığını ayarlamak için `maxHeight` ile eşleşir.                                                    |
| `maxHeight`   | `number`         | `500`         | Düzenleyicinin tam ekran olmayan modda büyüyebileceği maksimum piksel yüksekliği. İçerik bu yüksekliği aştığında düzenleyicinin içinde bir kaydırma çubuğu görünür. Düzenleyicinin ayrıca bir sürükleme kolu vardır, böylece kullanıcılar bu sınırın ötesinde manuel olarak yeniden boyutlandırabilirler. |
| `onChange`    | `function`       | `undefined`   | Yazma, araç çubuğu eylemleri, geri alma/yineleme ve listenin devamı gibi her içerik değişikliğinde geri arama tetiklendi. Geçerli işaretleme dizesini tek bağımsız değişken olarak alır.                 |

#### 🛠 Araç Çubuğu Özelleştirmesi

Araç çubuğu modülerdir. Diziyi değiştirerek minimal bir deneyim veya tam özellikli bir güç paketi oluşturabilirsiniz.

##### Mevcut Araçlar

| Kategori  | Araç Tuşları                                               |
| --------- | ---------------------------------------------------------- |
| Tipografi | `heading`, `bold`, `italic`, `strikethrough`, `blockquote` |
| Listeler  | `ul` (kurşun), `ol` (sayılı), `checklist`                  |
| Kod       | `code` (Çizgide), `codeblock` (çitle çevrili blok)         |
| Ekler     | `hr` (yatay cetvel), `table` (masa şablonu)                |
| Medya     | `link`, `image`                                            |
| Düzenleme | `undo`, `redo`, `indent`, `outdent`                        |
| Görüş     | `preview`                                                  |

###### 💡 Uygulama İpuçları:

- **Yeniden sıralama**: Düğmeler, dizide tam olarak listelediğiniz sırayla görünür
- **Kaldırma**: Bu özelliği kullanıcı açısından tamamen devre dışı bırakmak için dizideki herhangi bir anahtarı (`image` gibi) çıkarmanız yeterlidir.
- **Yerel Geri Dönüş**: JS'de bir `yer tutucu` sağlamazsanız, eklenti otomatik olarak HTML `<textarea>`'ınızdaki `placeholder` özelliğini kullanır.

#### 📊 Alt Bilgi (Durum Çubuğu)

Alt bilgi, düzenleyicinin altında bulunur ve imlecin **satırını**, **sütununu**, belgenin **karakter sayısını** ve isteğe bağlı olarak **kelime sayısını** gösterir; tümü gerçek zamanlı olarak güncellenir. Varsayılan olarak görünür ve her istatistik bağımsız olarak değiştirilebilir.

| Anahtar | Tip       | Varsayılan | Tanım                                                                                                  |
| ------- | --------- | ---------- | ------------------------------------------------------------------------------------------------------ |
| `line`  | `boolean` | `true`     | Geçerli satır numarasını göster.                                                                       |
| `col`   | `boolean` | `true`     | Geçerli sütun numarasını göster.                                                                       |
| `chars` | `boolean` | `true`     | Toplam karakter sayısını göster.                                                                       |
| `words` | `boolean` | `false`    | Toplam kelime sayısını göster. Varsayılan olarak kapalı — etkinleştirmek için `true` olarak ayarlayın. |

##### Kullanım Örnekleri

```javascript
// Default — line, col, and chars visible
new MarkdownEditor('#editor');

// Disable the footer entirely
new MarkdownEditor('#editor', { footer: false });

// Hide only character count
new MarkdownEditor('#editor', { footer: { chars: false } });

// Hide line and column, keep character count
new MarkdownEditor('#editor', { footer: { line: false, col: false } });

// Show only line number
new MarkdownEditor('#editor', { footer: { col: false, chars: false } });

// Enable word count alongside the defaults
new MarkdownEditor('#editor', { footer: { words: true } });

// Show word count only
new MarkdownEditor('#editor', { footer: { line: false, col: false, chars: false, words: true } });
```

### 5. İçerik Alma, Ayarlama ve Gönderme

**MarkdownEditor**'ün temel güçlü yönlerinden biri, temeldeki `<textarea>`'ı mükemmel şekilde senkronize tutmasıdır. İster modern bir JavaScript çerçevesi ister **Django, PHP veya Laravel** gibi geleneksel bir arka uç kullanıyor olun, iş akışı basit ve yerel kalır.

#### 1. Yerli Yol (Önerilir)

Düzenleyici standart bir metin alanını geliştirdiğinden, tanıdık DOM yöntemlerini kullanabilirsiniz. Bu, yeni bir API öğrenmeden verilerinizle etkileşim kurmanın en hızlı yoludur.

```javascript
// Retrieve content via ID
const markdown = document.getElementById('markdown-editor').value;

// Set content via ID (The editor UI updates automatically)
document.getElementById('markdown-editor').value = "# New Heading Content";
```

#### 2. Değişken Referans Kullanma

Textarea öğesine bir referansınız varsa onu doğrudan kullanabilirsiniz; kitaplığa özgü API gerekmez.

```javascript
const textarea = document.getElementById('markdown-editor');

// Retrieve content
const markdown = textarea.value;

// Set content (the editor UI reflects this immediately)
textarea.value = "## Updated via JS";
```

#### 3. İçeriği ayarlama ve okuma

Başlangıç ​​içeriğini ayarlamanın önerilen yolu doğrudan `<textarea>` HTML'sindedir; bu, her arka uç çerçevesinde (Django, Laravel, Rails, PHP, vb.) doğal olarak çalışır ve düzenleyici bunu init'te otomatik olarak oluşturur.

```html
<!-- Recommended: set content server-side -->
<textarea id="markdown-editor"># Hello World</textarea>
```

İçeriği çalışma zamanında okumak veya güncellemek için yerel `textarea` değerini kullanın. Önizleme ve hibrit katmanı yenilemek için güncellemeden sonra `editor.render()`'ı çağırın.

```javascript
const textarea = document.getElementById('markdown-editor');

// Read
const markdown = textarea.value;

// Update at runtime
textarea.value = '# New content';
editor.render();
```

#### 4. Düzenleyiciyi yıkmak — `destroy()`

Düzenleyici DOM sarmalayıcısını kaldırmak ve orijinal `<textarea>` dosyasını belgedeki konumuna geri yüklemek için `editor.destroy()`'u çağırın. Bir görünümün bağlantısını keserken tek sayfalı uygulamalarda kullanışlıdır.

```javascript
const editor = new MarkdownEditor('#markdown-editor');

// Remove the editor and restore the plain textarea
editor.destroy();
```

##### `onChange` ile değişikliklere tepki verme

Her içerik değişikliğinde bilgilendirilmek için bir `onChange` geri çağrısı iletin. Geçerli işaretleme dizesini alır.

```javascript
const editor = new MarkdownEditor('#markdown-editor', {
    onChange(value) {
        console.log('Content changed:', value.length, 'characters');
    }
});
```

###### `localStorage` ile taslak otomatik kaydetme

Her tuş vuruşunda bir taslak kaydetmek için `onChange`'i kullanın. Düzenleyiciyi başlatmadan önce metin alanını önceden doldurarak geri yükleyin.

```javascript
const DRAFT_KEY = 'my-page-draft';

// Restore saved draft before init (only if textarea starts empty)
const textarea = document.getElementById('markdown-editor');
const saved = localStorage.getItem(DRAFT_KEY);
if (saved && !textarea.value) textarea.value = saved;

// Save on every change
const editor = new MarkdownEditor('#markdown-editor', {
    onChange(value) {
        localStorage.setItem(DRAFT_KEY, value);
    }
});

// Clear draft after successful form submission
document.querySelector('form').addEventListener('submit', () => {
    localStorage.removeItem(DRAFT_KEY);
});
```

#### 4. Zahmetsiz Otomatik Form Gönderimi

**MarkdownEditor** doğrudan yerel `<textarea>` üzerinde oluşturulduğundan, kutudan çıktığı anda her arka uç çerçevesiyle (Django, Laravel, PHP, Ruby on Rails, vb.) uyumludur.

Burası "Önce Yerli" felsefesinin parladığı yerdir. Formu göndermeden önce verileri manuel olarak senkronize etmeniz gerekmez. Tarayıcı, düzenleyiciye tam olarak standart bir giriş alanı gibi davranır.

```html
<form method="POST" action="/api/submit">
  <textarea id="markdown-editor" name="content" class="h-48" rows="5">
    # Initial Content
  </textarea>

  <button type="submit">Submit to Server</button>
</form>

<script>
  // Just initialize it. That's it.
  new MarkdownEditor('#markdown-editor');
</script>
```

**Not:** MarkdownEditor eklentisinin başlatılması zorunludur

Sadece standart bir HTML `<form>` kullanın. Textarea'daki `name` özelliği, sunucunuzun içeriği tanımlamak için kullanacağı özelliktir.

##### 🚀 Neden Arka Uçlar İçin Oyunun Kurallarını Değiştiriyor?

Düzenleyici yerel `<textarea>` davranışını koruduğu için, sunucunuz verileri standart bir dize olarak işler. Hiçbir ekstra mantık gerekmez; `preventDefault()` yok ve manüel `FormData` yapısı yok.

##### 💡 Bu neden bir "Öldürücü Özellik":

Çoğu düzenleyici (Quill, Editor.js, simpleMDE, easyMDE gibi) verileri karmaşık JSON yapılarında kaydeder. Bir geliştirici bunları kullanıyorsa, veritabanı şemasını ve oluşturma mantığını yeniden yazması gerekir.

**MarkdownEditor** ile bir geliştirici eski bir web sitesini alıp düz bir `<textarea>` dosyasını editörünüzle değiştirebilir ve **arka uç bunun değiştiğini bile bilmez**. Her zaman aldığı ham metni alır ancak kullanıcı 10 kat daha iyi bir deneyim yaşar.

| Çerçeve / Dil     | Markdown içeriğine nasıl erişilir? |
| ----------------- | ---------------------------------- |
| PHP               | $\_POST['content']                 |
| Django            | request.POST.get('content')        |
| Node.js (Express) | req.body.content                   |
| Laravel           | $request->input('content')         |
| Ruby on Rails     | params[:content]                   |

## Yapılandırma Seçenekleri

### 🖼️ Gelişmiş resim yükleme

Yavaş, bellek ağırlıklı Base64 dizelerine güvenmek yerine, görüntü yüklemelerini yerel olarak yönetmek, hem performans hem de SEO açısından önemli bir kazançtır.

#### Yapılandırma Seçenekleri

Resim aracı, doğrudan sunucuya yüklemeleri gerçekleştirmek için bir `fileInput` yapılandırmasını destekler.

- `kabul et`: İzin verilen resim formatlarının bir dizisini tanımlayın (ör. 'webp', 'avif')
- `uploadUrl`: `File` nesnesinin `POST` yoluyla gönderileceği arka uç uç noktasını belirtin
- `params`: Görüntü dosyasının yanında ek veriler (CSRF belirteçleri, kullanıcı kimlikleri veya klasör adları gibi) göndermek için isteğe bağlı nesne

#### Kullanım örneği (Tam Yapılandırma)

```javascript
const options = {
  placeholder: 'Start writing...',
  toolbar: [
    'link',
    {
      image: {
        fileInput: {
            accept: ['webp', 'avif'], // restrict the image upload format
            uploadUrl: '/api/upload', // Your upload endpoint
            params: {
                _token: 'your_csrf_token_here', // Essential for Laravel/Django
                folder: 'blog_posts'
            }
        },
        // Supports boolean: true/false OR object: { required: true }
        altInput: { required: true }
      }
    },
    'preview'
  ],
}
const editor = new MarkdownEditor('#markdown-editor', options);
```

#### 📡 Sunucu Entegrasyon Detayları

##### 1. Talep

Düzenleyici, `multipart/form-data` olarak bir `POST` isteği gönderir. Varsayılan olarak şunları içerir:

- `resim_dosyası`: Gerçek dosya nesnesi
- `image_alt`: Kullanıcının girdiği alternatif metin
- ...artı `params` nesnesinde tanımlanan tüm özel veriler

##### 2. Gerekli Yanıt

Başarılı bir yüklemeyi onaylamak ve resmi düzenleyiciye eklemek için sunucunuzun aşağıdaki JSON yapısını **döndürmesi gerekir**:

```json
{
  "success": true,
  "image_path": "https://cdn.yourdomain.com/uploads/image.webp"
}
```

**Not**: Yüklenen resmin URL'si için `resim_yolu` anahtarını kullandığınızdan emin olun.

#### Resim Alternatif Metin Doğrulaması (`altInput`)

İçeriğinizin erişilebilir ve SEO dostu kalmasını sağlamak için `MarkdownEditor`, varsayılan olarak alternatif metin doğrulamasını zorunlu kılar. Bu davranışı bir boole kısayolu veya ayrıntılı bir nesne kullanarak yapılandırabilirsiniz.

- **Varsayılan Davranış**: `altInput` tanımlanmamışsa, varsayılan olarak `{ gerekli: true ` olur
- **Erişilebilirliği Zorunlu Hale Getirin**: Bir alternatif açıklama sağlanana kadar kullanıcıların resim eklemesi engellenir

##### Yapılandırma Örnekleri:

###### 1. Varsayılan (Yapılandırma gerekmez)

```javascript
// Alt text is REQUIRED by default
image: {
  fileInput: { uploadUrl: '/api/upload' }
}
```

###### 2. Kısa Yol (Doğrulamayı Devre Dışı Bırak)

Açıklamaları olmayan görsellere izin vermek istiyorsanız boole değerini `false` olarak ayarlamanız yeterlidir.

```javascript
image: {
  altInput: false // Users can now skip the alt text field
}
```

###### 3. Nesne tabanlı (Açık)

```javascript
image: {
    altInput: {
        required: false // Disables alt text validation — users can skip the alt field
    }
}
```

#### Standart Görüntü Kullanımı (`fileInput` Yok):

`fileInput` yapılandırılmamışsa, düzenleyici varsayılan olarak basit bir URL tabanlı modal kullanır. Kullanıcılarınız çoğunlukla harici resim barındırıcılarına bağlantı veriyorsa bu idealdir.

```javascript
const options = {
  toolbar: [
    'link',
    'image',
    'preview'
  ],
}
const editor = new MarkdownEditor('#markdown-editor', options);
```

##### 💡 Param'ları neden kullanmalıyım?

Laravel veya Django gibi çerçevelerde CSRF belirteci olmadan dosya yükleyemezsiniz. `params` nesnesine `_token` eklendiğinde, isteğiniz arka ucun güvenlik ara yazılımından sorunsuz bir şekilde geçecek ve sunucu tarafı denetleyicileriniz için "Sıfır Mantık" felsefesini koruyacaktır.

### 🔀 Düzenleme Modları

**MarkdownEditor** içeriğinizi yazmanız ve biçimlendirmeniz için iki farklı yol sunar. Geleneksel sözdizimi odaklı görünüm veya modern, görsel öncelikli deneyim arasında geçiş yapabilirsiniz.

#### Yapılandırma

Başlatma sırasında `mode` özelliğini kullanarak başlatma modunu tanımlayabilirsiniz.

- `plain` (**Varsayılan**): Sözdiziminin (`**kalın**` veya `# başlık` gibi) görünür olduğu temiz, yüksek performanslı bir Markdown ortamı. Geliştiriciler ve Markdown'a sadık olanlar için ideal
- `karma`: Siz yazarken biçimlendirmeyi (Kalın, İtalik, Başlıklar) gerçek zamanlı olarak oluşturan ve aynı zamanda temeldeki Markdown yapısını koruyan, WYSIWYG'den ilham alan bir deneyim.

##### Uygulama:

```javascript
// Default initialization (Plain Mode)
new MarkdownEditor('#markdown-editor');

// Explicit Plain Mode
new MarkdownEditor('#markdown-editor', {
    mode: 'plain'
});

// Hybrid (Visual) Mode
new MarkdownEditor('#markdown-editor', {
    mode: 'hybrid'
});
```

##### Hibrit ve Düz Mod Önizlemesi:

###### Hibrit Mod

Siz yazarken görsel biçimlendirme gerçek zamanlı olarak oluşturulur.

# Hybrid mode markdown editor
This will render visual styles immediately.

###### Düz Mod (Varsayılan)

Hafif bir deneyim için ham Markdown sözdizimine odaklanır.

# Plain mode markdown editor
This shows the raw **syntax**.

| Yapılandırma                                                                                                                                                                                             | Özellik / Araç                                                                                                                                                                     | Tanım                                                                                                                                                                                                    |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Seçenekler nesnesi                                                                                                                                                                                       | `placeholder`                                                                                                                                                                      | Textarea için yer tutucu metni ayarlar (standart HTML textarea niteliğini de kullanabildiğiniz için isteğe bağlıdır)                                                                                     |
|                                                                                                                                                                                                          | `mode: 'hybrid'`                                                                                                                                                                   | Siz yazarken biçimlendirmeyi (kalın, italik, başlıklar) gerçek zamanlı olarak işleyen, WYSIWYG'den ilham alan bir deneyim sağlar                                                                         |
| `araç çubuğu`: Araç çubuğunda hangi araçların    görüneceğini ve bunların sırasını belirler.                                                                                                             | `heading`                                                                                                                                                                          | H1–H6 başlık düzeyini seçmek için bir açılır menü açar                                                                                                                                                   |
|                                                                                                                                                                                                          | `bold`                                                                                                                                                                             | Kalın metin biçimlendirmesini etkinleştirir.                                                                                                                                                             |
|                                                                                                                                                                                                          | `italic`                                                                                                                                                                           | İtalik metin biçimlendirmesini etkinleştirir.                                                                                                                                                            |
|                                                                                                                                                                                                          | `strikethrough`                                                                                                                                                                    | Metnin üstü çizili olmasına izin verir.                                                                                                                                                                  |
|                                                                                                                                                                                                          | `ol`                                                                                                                                                                               | (Sıralı Liste): Metni numaralı liste biçimine dönüştürür.                                                                                                                                                |
|                                                                                                                                                                                                          | `ul`                                                                                                                                                                               | (Sırasız Liste): Metni madde işareti listesine dönüştürür.                                                                                                                                               |
|                                                                                                                                                                                                          | `checklist`                                                                                                                                                                        | Metninize onay kutuları ekleyerek onu görevler, yapılacaklar listeleri veya tamamlanma durumunu izlemek için mükemmel hale getirir.                                                                      |
|                                                                                                                                                                                                          | `blockquote`                                                                                                                                                                       | Alıntılanan veya vurgulanan metni vurgulayın.                                                                                                                                                            |
|                                                                                                                                                                                                          | `code`                                                                                                                                                                             | Satır içi kod için seçilen metni tek geri tırnaklara sarar. Tekrar tıklamak geri tıklamaları kaldırır.                                                                                                   |
|                                                                                                                                                                                                          | `codeblock`                                                                                                                                                                        | Seçili metni üçlü geri tırnaklı çitli kod bloğuna sarar. Tekrar tıklamak çitleri kaldırır.                                                                                                               |
|                                                                                                                                                                                                          | `hr`                                                                                                                                                                               | Kendi satırındaki imleç konumuna bir `---` yatay kuralı ekler.                                                                                                                                           |
|                                                                                                                                                                                                          | `table`                                                                                                                                                                            | İmleç konumuna bir başlangıç ​​2x3 işaretleme tablosu şablonu ekler.                                                                                                                                     |
|                                                                                                                                                                                                          | `image`                                                                                                                                                                            | İşaretleme sözdizimi yoluyla resim eklemenizi sağlar.                                                                                                                                                    |
|                                                                                                                                                                                                          | `link`                                                                                                                                                                             | Metninize köprüler eklemenizi sağlar.                                                                                                                                                                    |
|                                                                                                                                                                                                          | `undo`                                                                                                                                                                             | Son değişiklikleri geri almak için.                                                                                                                                                                      |
| `redo`                                                                                                                                                                                                   | Geri alınan son değişiklikleri yeniden uygulamak için.                                                                                                                             |
| `indent`                                                                                                                                                                                                 | Girinti düzeyini artırmak için.                                                                                                                                                    |
| `outdent`                                                                                                                                                                                                | Girinti seviyesini azaltmak için.                                                                                                                                                  |
| `preview`                                                                                                                                                                                                | Tam ekran yan yana önizlemeyi değiştirir. Önizleme bölmesindeki onay kutuları tıklanabilir ve işaretleme kaynağını anında günceller. Tam ekrandan çıkmak için Escape tuşuna basın. |
| [**Gelişmiş resim yükleme özelliği**](#advanced-image-upload):    Kendi sunucunuza     resim yüklemelerini yapılandırmanıza ve bir API aracılığıyla resim     yolunu ayarlamanıza olanak tanır. Bu, performansı ve SEO'yu artırır. | `fileInput`                                                                                                                                                                        | `accept`: İzin verilen resim dosyası türleri dizisi (ör. `'webp'`, `'avif'`).   `uploadUrl`: Dosyanın `POST` aracılığıyla gönderildiği arka uç uç noktası.   `params`: Ekstra veriler için isteğe bağlı nesne (CSRF belirteçleri, kullanıcı kimlikleri, klasör adları) |
|                                                                                                                                                                                                          | `altInput`                                                                                                                                                                         | `gerekli: false`: Alternatif metin girişi doğrulamasını devre dışı bırakır (varsayılan true'dur)                                                                                                         |

### ⌨️ Klavye Kısayolları

Yaygın biçimlendirme eylemleri, araç çubuğuna dokunmadan doğrudan klavyeden tetiklenebilir. Her kısayol aynı zamanda karşılık gelen araç çubuğu düğmesinin araç ipucunda da gösterilir.

| Kısayol                      | Aksiyon                                        |
| ---------------------------- | ---------------------------------------------- |
| `Ctrl + B` / `⌘ B`           | **Kalın**'a geçiş yapın                        |
| `Ctrl + I` / `⌘ I`           | *İtalik*'e geçiş yap                           |
| `Ctrl + K` / `⌘ K`           | Bağlantı Ekle                                  |
| `` Ctrl + ` `` / `` ⌘ ` ``   | Satır içi `Kod`'u değiştir                     |
| `Ctrl + Shift + S` / `⌘ ⇧ S` | ~~Üzeri çizili~~'yi aç/kapat                   |
| `Ctrl + Z` / `⌘ Z`           | Geri al                                        |
| `Ctrl + Shift + Z` / `⌘ ⇧ Z` | Yinele                                         |
| `Tab`                        | Seçilen satırları girintile                    |
| `Shift + Tab`                | Seçili satırların girintisini artır            |
| `Ctrl + F` / `⌘ F`           | Bul panelini aç                                |
| `Ctrl + H` / `⌘ H`           | Bul ve Değiştir panelini aç                    |
| `Escape`                     | Bul panelini kapat / Tam ekran önizlemeden çık |

### 🔍 Bul ve bul Yer değiştirmek

Düzenleyicinin içinde yerleşik bir bul ve değiştir paneli mevcuttur; tarayıcı uzantısına veya ayrı bir araca gerek yoktur.

- **Bul** panelini açmak için `Ctrl + F` (veya `⌘ F`) tuşlarına basın
- **Bul ve Bul'u açmak için `Ctrl + H` (veya `⌘ H`) tuşlarına basın. Paneli** değiştirin
- Arama **büyük/küçük harfe duyarlı değildir** ve canlı bir eşleşme sayacı gösterir (ör. *3/12*)
- **▲ / ▼** düğmelerini veya `Enter` / `Shift + Enter` tuşlarını kullanarak eşleşmelerde gezinin
- **Değiştir**, vurgulanan mevcut eşleşmenin yerini alır; **Tümünü Değiştir** her tekrarı aynı anda değiştirir
- Paneli kapatmak ve odağı düzenleyiciye geri döndürmek için `Escape` tuşuna basın

Panel, düzenleyici içerik alanının sağ üst köşesinde kayar ve yazmayı kesintiye uğratmaz.

### 🌙 Temalama

**MarkdownEditor**, temasını çevredeki sayfadan otomatik olarak devralır; herhangi bir yapılandırma gerekmez. Düzenleyici, başlatma sırasında en yakın atadan `data-theme`'i okur, böylece kutudan çıktığı haliyle sitenizin temasıyla senkronize kalır.

#### Tema nasıl çözümlenir (öncelik sırası)

1. **`tema` seçeneği** — seçenekler nesnesinde iletilen açık geçersiz kılma
2. `<textarea>`'da **`data-theme` — doğrudan öğenin üzerinde ayarlanır**
**3. Herhangi bir atadaki `veri teması` - ör. `<html>`, `<body>` veya sarmalayıcı `<div>`****#### Mevcut temalar

`'açık'` (varsayılan), `'dark'`, `'snowberry'`, `'darkberry'`

##### Seçenek 1 — `<html>`'dan veya herhangi bir atadan devralın (sıfır yapılandırma)

```html
<html data-theme="dark">
  ...
  <textarea id="markdown-editor"></textarea>
  <script>
    new MarkdownEditor('#markdown-editor'); // picks up dark automatically
  </script>
```

##### 2. Seçenek — `data-theme`'i doğrudan `<textarea>` üzerinde ayarlayın

```html
<textarea id="markdown-editor" data-theme="dark"></textarea>
<script>
  new MarkdownEditor('#markdown-editor');
</script>
```

##### Seçenek 3 — açık `tema` seçeneği (her şeyi geçersiz kılar)

```javascript
new MarkdownEditor('#markdown-editor', {
    theme: 'dark'
});
```

#### 🎨 CSS Değişkenleri aracılığıyla Özel Tema

`.markdown-editor-wrapper` öğesinde veya herhangi bir `[data-theme]` seçicide CSS değişkenlerini geçersiz kılarak düzenleyicinin görünümünü tamamen özelleştirebilirsiniz. Tüm renkler, algısal olarak tekdüze sonuçlar için [OKLCH renk alanını](https://oklch.com) kullanır.

| Değişken             | Amaç                                            | Işık varsayılanı        | Koyu varsayılan         |
| -------------------- | ----------------------------------------------- | ----------------------- | ----------------------- |
| `--color-base`       | Düzenleyici arka planı                          | `oklch(100% 0 0)`       | `oklch(10.9% 0 0)`      |
| `--color-on-base`    | Birincil metin rengi                            | `oklch(22% 0 0)`        | `oklch(98% 0 0)`        |
| `--color-primary`    | Birincil vurgu (araç çubuğu etkin, bağlantılar) | `oklch(51.1% .262 277)` | `oklch(66.4% .184 286)` |
| `--color-on-primary` | Ana renkli yüzeylerdeki metin                   | `oklch(96.2% .018 272)` | `oklch(10% .01 270)`    |
| `--color-secondary`  | İkincil vurgu                                   | `oklch(59.1% .293 323)` | `oklch(65% .18 220)`    |
| `--color-accent`     | Vurguyu vurgulayın (satır içi kod, italik)      | `oklch(54.1% .281 293)` | `oklch(75% .18 50)`     |
| `--color-neutral`    | Nötr yüzeyler (kenarlıklar, bölücüler)          | `oklch(15% 0 0)`        | `oklch(85% 0 0)`        |
| `--color-error`      | Hata durumu rengi                               | `oklch(57.7% .245 27)`  | `oklch(60% .22 30)`     |
| `--border-radius`    | Editör çerçevesinin köşelerinin yuvarlatılması  | `0.25rem`               | |

##### Özel tema örneği

Düzenleyici başlatıldıktan sonra `.markdown-editor-wrapper`'daki herhangi bir değişkeni geçersiz kılın veya stil sayfanızda özel bir `[data-theme]` bloğu tanımlayın:

```css
/* Override individual variables */
.markdown-editor-wrapper {
    --color-primary: oklch(60% 0.2 30);   /* orange accent */
    --border-radius: 0.5rem;
}

/* Or define a full custom theme */
[data-theme="brand"] .markdown-editor-wrapper,
.markdown-editor-wrapper[data-theme="brand"] {
    --color-base:       oklch(15% 0.01 250);
    --color-on-base:    oklch(95% 0 0);
    --color-primary:    oklch(65% 0.22 145);   /* green */
    --color-on-primary: oklch(10% 0 0);
    --color-accent:     oklch(75% 0.18 60);
    --color-neutral:    oklch(80% 0 0);
    --border-radius:    0.75rem;
}
```

```javascript
new MarkdownEditor('#markdown-editor', { theme: 'brand' });
```

- Gerçek Zamanlı Önizleme: Siz yazarken işaretlemenizin anında oluşturulduğunu görün.
- Sözdizimi Vurgulama: Anlaşılır kod ve işaretleme biçimlendirmesiyle gelişmiş okunabilirlik.
- Kolay Entegrasyon: Minimum kurulumla herhangi bir web projesine sorunsuz bir şekilde entegre olun.
- Özelleştirilebilir Araç Çubuğu: Kalın, italik ve daha fazlası gibi araç çubuğu seçeneklerini dinamik olarak yapılandırın ve yeniden sıralayın.

## Özellikler

## 🔌 Yerel Form Entegrasyonu

Tam olarak standart bir `<textarea>` gibi çalışır. Karmaşık API'ler yok; yalnızca `value` veya `name` özelliğini kullanın. PHP, Django veya Node.js'deki standart HTML form gönderimleriyle "sadece çalışır".

## 🖼️ Gelişmiş Resim Yükleme

Yerel sunucu yüklemelerini API aracılığıyla yapılandırın. Resimleri kendi CDN'nizde barındırarak sayfaların daha hızlı yüklenmesini ve üstün SEO'yu sağlamak için ağır Base64 dizelerinden kaçının.

## 🔀 Hibrit ve Sade Modlar

Görsel düzenleme için Karma (WYSIWYG) deneyimi veya geleneksel kodlama hissi için Düz İşaretleme modu arasında geçiş yapın.

## 🚀 Yüksek Performans

"Ağır İçerik" için optimize edilmiş küçük bir ~116 KB paket. Çok büyük belgeleri ve büyük dosyaları herhangi bir giriş gecikmesi veya performans düşüşü olmadan yönetir.

## 🌍 Dahili RTL Desteği

Arapça, Urduca ve Farsça gibi Sağdan Sola diller için yerel destek. Küresel olarak erişilebilir uygulamalar oluşturmak için mükemmeldir.

## 🌙 Uyarlanabilir Tema

Otomatik Karanlık Mod desteğini içerir. Sorunsuz bir görsel deneyim için sistem ayarlarınızla veya Frutjam UI kitaplığıyla senkronize edilir.

## 📝 Akıllı Düzenleme

Sıralı listeler, sırasız listeler ve kontrol listeleri için GitHub tarzı otomatik liste devamı — `Enter` tuşuna bastığınızda düzenleyici deseni sürdürür. Önizleme bölmesindeki onay kutuları tıklanabilir ve işaretleme kaynağına anında senkronize edilir.

## 📱 Tamamen duyarlı

Hareket halindeyken düzenleme yapmak için masaüstü bilgisayarlara, tabletlere ve akıllı telefonlara mükemmel şekilde uyum sağlayan akıcı, mobil odaklı bir kullanıcı arayüzü.

## 📦 Evrensel Destek

ESM, UMD, CommonJS ve IIFE ile uyumludur. CDN (`<script src>`), npm veya herhangi bir paketleyici (Vite, webpack, Rollup) aracılığıyla kutudan çıktığı gibi çalışır; ekstra yapılandırmaya gerek yoktur.

## ♿ Varsayılan Olarak Erişilebilir

Yerleşik tam ARIA desteği; araç çubuğu yer işareti, etiketli önizleme bölgesi, ekran okuyucu dostu düğmeler, önizleme geçiş düğmesinde `aria-basıldı`, etkin olmayan araçlarda `disabled` ve `aria-disabled` ve modeller kapatıldığında doğru odak restorasyonu.

## 🛡️ Sıfır CSS Çatışması

Düzenleyici stilleri tamamen `.markdown-editor-wrapper` kapsamına alınmıştır. Tailwind'in genel ön kontrolü hariç tutulur, böylece editör Bootstrap, Tailwind veya diğer çerçevelerin stillerini bozmadan güvenli bir şekilde birlikte yaşar.

## ⌨️ Klavye Kısayolları

`Ctrl+B`, `Ctrl+I`, `Ctrl+K`, `` Ctrl+` ``, `Ctrl+Shift+S` — fareye dokunmadan yapılan yaygın biçimlendirme eylemleri. Her kısayol, araç çubuğu düğmesinin araç ipucunda gösterilir.

## 🔍 Bul ve bul Yer değiştirmek

Bulmak için `Ctrl+F` tuşlarına veya bul ve bul'u açmak için `Ctrl+H` tuşlarına basın. yer değiştirmek. Düzenleyiciden ayrılmadan canlı maç sayacı, sonraki/önceki gezinme, tek değiştirme ve tümünü değiştirme ile büyük/küçük harfe duyarlı olmayan arama.

## Tam Yapılandırma Örneği

MarkdownEditor'ü özel araç çubuğu sıralaması ve gelişmiş resim yükleme işlemleri de dahil olmak üzere tüm temel özelliklerle başlatmak için bu kapsamlı örneği kullanın.

```javascript
const editor = new MarkdownEditor('#markdown-editor', {
    mode: 'hybrid',
    placeholder: 'Start writing...',
    footer: {
        line: true,
        col: true,
        chars: true,
        words: true,
    },
    onChange(value) {
        console.log('Content updated:', value.length, 'characters');
    },
    toolbar: [
        'heading', 'bold', 'italic', 'strikethrough', 'blockquote',
        'ul', 'ol', 'checklist',
        'code', 'codeblock', 'hr', 'table',
        {
            image: {
                fileInput: {
                    accept: ['webp', 'avif', 'png'],
                    uploadUrl: '/api/upload'
                }
            }
        },
        'link', 'undo', 'redo', 'indent', 'outdent', 'preview'
    ],
});

// Read content natively
const markdown = document.getElementById('markdown-editor').value;

// Update content programmatically (dispatch input to keep preview in sync)
// const ta = document.getElementById('markdown-editor');
// ta.value = '# New content';
// ta.dispatchEvent(new Event('input', { bubbles: true }));

// destroy() when the view unmounts (SPAs)
// editor.destroy();
```**