Kuika’nın MD Editor elementi, kullanıcıların zengin metin içeriklerini Markdown formatında düzenlemelerine olanak tanır. Başlık, liste, bağlantı, alıntı, görsel veya kod bloğu gibi biçimlendirmeleri kolayca oluşturabilir. Girilen Markdown içeriği, MD Viewer elementi aracılığıyla biçimlendirilmiş şekilde görüntülenebilir.

MD Editor elementi yalnızca web uygulamalarında kullanılabilir.

Kullanım Alanları

• Kullanıcı yorumları ve açıklama alanları
• Blog yazısı veya içerik yönetim panelleri
• Wiki, bilgi tabanı veya dokümantasyon ekranları
• Teknik döküman ve eğitim içerikleri oluşturma
• Forum veya topluluk gönderileri

Kullanım Senaryosu – Yorum Düzenleme (Comment Detail)

Bir proje yönetimi uygulamasında, kullanıcılar her görev için yorum bırakabilir veya mevcut yorumlarını düzenleyebilir. MD Editor elementi bu yorum alanında kullanılarak, kullanıcıların metin biçimlendirmesi yapmasına izin verir.

Senaryoda:

• Kullanıcı, “Comment Detail” sayfasına girer.
• Yorum alanında MD Editor görünür.
• Kullanıcı metnine başlık, kalın yazı veya madde listesi ekler.
• “Save” butonuna bastığında düzenlenen içerik veri kaynağına kaydedilir.
• Kaydedilen Markdown içeriği, MD Viewer ile biçimlendirilmiş şekilde gösterilir.

Veri Kaynağı Bağlama

1. Datasources modülüne gidin.
2. Tables sekmesine tıklayın.
3. Yeni tablo oluşturun ve adına Comments yazın.
4. Aşağıdaki alanları ekleyin:

5. Ardından SQL Actions sekmesine gidin.
6. Yeni bir aksiyon oluşturun: SaveComment
7. Aşağıdaki SQL sorgusunu girin:

INSERT INTO Comments (CommentText, CreatedBy, CreatedAt)VALUES (@CommentText, @CreatedBy, SYSDATETIMEOFFSET());

Bu sorgu, MD Editor’da girilen Markdown formatındaki içeriği veri tabanına kaydeder.

UI Design Modülü İşlemleri

1. UI Design modülüne gidin.
2. Sol kenardaki Elements → Text Input → MD Editor kategorisinden MD Editor elementini seçin.
3. Ekrana sürükleyip bırakın.
4. Sağ taraftaki Properties Panel üzerinden aşağıdaki ayarları yapılandırın:

• Value: Comments.CommentText
• Hide Tool Bar: False
• Theme: Light (veya Dark seçilebilir)
• Simplified: False

5. Editörün altına bir Button (Save) elementi ekleyin.
6. Buton için şu aksiyonu tanımlayın:

• onClick → Managed DB → Custom SQL Action (SaveComment)
• Parametre: CommentText → MDEditor1.value

7. Kaydedilen içerik, farklı bir sayfada MD Viewer elementiyle görüntülenebilir.

Özelliklerin Senaryo Bağlamında Kullanılması

• Value: MD Editor’da düzenlenip kaydedilen Markdown içeriğini temsil eder.
• Hide Tool Bar: Araç çubuğunu gizleyerek sade bir yazım deneyimi sağlar.
• Theme: Editörün renk temasını belirler (Light veya Dark).
• Simplified: Arayüzü sadeleştirir, sadece temel düzenleme araçlarını gösterir.

Senaryo Adımı Tamamlandığında

• Kullanıcı yorumunu Markdown formatında düzenler.
• “Save” butonuna bastığında metin veri tabanına kaydedilir.
• Aynı içerik, MD Viewer aracılığıyla biçimlendirilmiş şekilde görüntülenir.
• Kullanıcı dilerse yorumunu daha sonra tekrar açıp düzenleyebilir.

Kısıtlamalar

• MD Editor yalnızca web projelerinde desteklenir.
• Çok büyük metinler performansı etkileyebilir.
• Markdown olmayan biçimlendirme kodları doğru şekilde işlenmeyebilir.

İpuçları ve Best Practices

• Kullanıcılara örnek Markdown şablonu sunarak biçimlendirmeyi öğrenmelerini kolaylaştırın.
• Karanlık modda kullanım için “Theme: Dark” seçeneğini tercih edin.
• Hide Tool Bar = True yaparak yalnızca ileri seviye kullanıcılar için minimal bir arayüz sunabilirsiniz.
• MD Viewer elementini, kaydedilen içeriği biçimlendirilmiş olarak göstermek için her zaman MD Editor ile birlikte kullanın.
• İçerik kaydı öncesi MDEditor.value alanının boş olup olmadığını kontrol edin.