JavaScript için Yerel İlk, Yüksek Performanslı Markdown Eklentisi

Yerel bir metin alanını tam bir düzenleme paketine dönüştüren Markdown metin düzenleyici eklentisi; senkronizasyon gerekmez. WYSIWYG ve düz Markdown modları, canlı önizleme, bul ve değiştir, RTL desteği, karanlık mod. Django, Laravel, Rails, Node.js, PHP ve herhangi bir yığınla çalışır.

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

MarkdownEditor vs EasyMDE / SimpleMDE

Çoğu JavaScript işaretleme düzenleyicisi - EasyMDE, SimpleMDE, CodeMirror tabanlı düzenleyiciler - <textarea>'inizi özel bir öğeyle değiştirin. Bu, form gönderiminin kesintiye uğradığı, .value'in hiçbir şey döndürmediği ve yalnızca içeriği tekrar okumak için fazladan kod yazmanız gerektiği anlamına gelir. MarkdownEditor farklıdır — mevcut metin alanınızı geliştirir ve asla onun yerini almaz.

Çerçeve Entegrasyonu

MarkdownEditor yerel <textarea>'i koruduğu için herhangi bir ekstra kod olmadan her arka uç çerçevesiyle bütünleşir. Sunucunuz işaretleme içeriğini tam olarak herhangi bir standart form alanından aldığı gibi alır.

Django

Textarea widget'ınıza bir class ekleyin ve düzenleyiciyi başlatın — request.POST['content'], hiçbir ekstra adım olmadan çalışır.

1
2
3
4
5
6
7
8

# forms.py
class PostForm(forms.ModelForm):
    class Meta:
        model = Post
        fields = ['content']
        widgets = {
            'content': forms.Textarea(attrs={'class': 'markdown-editor'}),
        }

1
2

new MarkdownEditor('.markdown-editor');
// request.POST['content'] contains the markdown on submit

Laravel

f.text_area'i bir sınıfla kullanın — $request->input('content'), işaretlemeyi doğrudan alır.

1
2

<textarea name="content" class="markdown-editor">{{ old('content') }}</textarea>
<script>new MarkdownEditor('.markdown-editor');</script>

Ruby on Rails

Kutudan çıktığı haliyle form_with ile çalışır — params[:content] işaretlemeyi içerir. Turbo Drive için DOMContentLoaded yerine turbo:load kullanın.

1
2
3
4
5
6

document.addEventListener('turbo:load', () => {
    document.querySelectorAll('.markdown-editor:not([data-mde-init])').forEach(el => {
        el.setAttribute('data-mde-init', 'true');
        new MarkdownEditor(el);
    });
});

Node.js / Ekspres

req.body.content, form gönderiminde indirimi alır; senkronizasyon adımı yok, özel çıkarma yok.

1
2
3

<textarea name="content" class="markdown-editor"></textarea>
<script src="https://cdn.jsdelivr.net/npm/markdown-text-editor"></script>
<script>new MarkdownEditor('.markdown-editor');</script>

PHP

$_POST['content'] tam olarak herhangi bir standart metin alanıyla aynı şekilde çalışır; onu bırakın ve mevcut form işlemeniz sıfır değişiklik gerektirir.

1
2
3
4
5
6

<form method="POST" action="save.php">
  <textarea name="content" class="markdown-editor"></textarea>
  <button type="submit">Save</button>
</form>
<script src="https://cdn.jsdelivr.net/npm/markdown-text-editor"></script>
<script>new MarkdownEditor('.markdown-editor');</script>

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 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

Hızlı Uygulama

1. Kurulum

NPM (paketleyiciler: Vite, webpack, Rollup vb.)

npm install markdown-text-editor

1
2

import MarkdownEditor from 'markdown-text-editor';
new MarkdownEditor('#markdown-editor');

CDN: ES modülü

1
2
3
4

<script type="module">
  import MarkdownEditor from 'https://cdn.jsdelivr.net/npm/markdown-text-editor/dist/markdown-text-editor.es.js';
  new MarkdownEditor('#markdown-editor');
</script>

CDN: global komut dosyası etiketi (IIFE)

İçe aktarmaya gerek yok — MarkdownEditor otomatik olarak global bir değişken olarak kullanılabilir.

1
2
3
4
5
6
7
8
9

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

<script src="https://cdn.jsdelivr.net/npm/markdown-text-editor"></script>
<script>
  new MarkdownEditor('#markdown-editor');
</script>

2. Yapılandırma ve Başlatma

Düzenleyiciyi özelleştirmek için bir seçenekler nesnesi iletin. Tüm seçenekler isteğe bağlıdır; varsayılan değeri kullanmak için herhangi birini atlayın.

1
2
3
4

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.

🛠 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

💡 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.

Kullanım Örnekleri

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

// 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.

1
2
3
4
5

// 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.

1
2
3
4
5
6
7

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.

1
2

<!-- 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.

1
2
3
4
5
6
7
8

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.

1
2
3
4

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.

1
2
3
4
5

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.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

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.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<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.

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)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

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:

1
2
3
4

{
  "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)

1
2
3
4

// 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.

1
2
3

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

3. Nesne tabanlı (Açık)

1
2
3
4
5

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.

1
2
3
4
5
6
7
8

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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

// 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.

Düz Mod (Varsayılan)

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

⌨️ 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.

🔍 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. theme option — seçenekler nesnesinde iletilen açık geçersiz kılma
2. <textarea> üzerinde data-theme — doğrudan öğe ü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> veya herhangi bir üst öğeden devralın (sıfır yapılandırma)

1
2
3
4
5
6

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

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

1
2
3
4

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

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

1
2
3

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ı kullanır.

Ö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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

/* 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;
}

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

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.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

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();