MD Editor
MD Editor ile uygulamanız içerisine ekleyeceğiniz metni biçimsel olarak düzenleyin.
Geliştirilen uygulamada zengin metin girişi yapılmak istenilen alanlarda kullanılır. MD Editor ile eklenen içeriğin, MD Viewer elementi ile gösterimi yapılır. Bu element, kullanıcılara karmaşık işaretleme dilleri veya düzenleyiciler kullanmadan metinlerini biçimlendirme ve düzenleme olanağı sunar.
Bu eğitim içeriğinde şunları öğreneceksiniz:
1. MD Editor Ekleme
MD Editor elementini uygulamanız içerisine eklemeniz oldukça kolay. MD Editor elementini eklemek için aşağıdaki adımları izlemeniz gerekmektedir.
Display kategorisi içerisinden MD Editor’u ekrana sürükleyin ve bırakın.
MD Editor elementini ekranda boş bir alana sürüklerseniz Row elementi ile eklenir. Bir Column içine sürüklerseniz sadece MD Editor elementi eklemiş olursunuz.
Properties (Özellikler) paneli içerisinden MD Editor elementinin ayarlamalarını yapabilirsiniz.
Style (Stil) paneli içerisinden MD Editor elementinin stil düzenlemelerini yapabilirsiniz.
MD Editor, sadece web uygulamaları desteklemektedir. Mobil uygulamaları desteklememektedir.
Ekrana eklenen MD Editor içerisinde UI görünüm modu üzerinde önizleme almadan doğrudan element içerisinde metinsel düzenlemeleri yapabilirsiniz. Örneğin, kullanıcılar metinleri kalın, italik, altı çizili gibi biçimlendirme ile stillendirebilirler.
Metinsel biçimlendirme yöntemleri aşağıda yer almaktadır:
Add Bold Text : Metni kalın yapabilirsiniz.
Add Italic Text: Metni eğik yazabilirsiniz.
Add Strikethrough Text : Metnin üstünü çizebilirsiniz.
Insert HR : Yatay bir ayırıcı çizgi ekleyebilirsiniz.
Insert Title: Metni başlık olarak biçimlendirebilirsiniz. # (diyez) işareti kullanarak farklı başlık seviyelerini oluşturabilirsiniz. Örneğin, # Başlık 1, ## Başlık 2 gibi.
Add a Link : Metin içine bağlantılar ekleyebilirsiniz.
Insert a Quote: Metin içerisinde alıntılar yapabilirsiniz.
Resim Ekleme: Görsel içerikleri editör içerisine ekleyebilirsiniz.
Kod Blokları: Kod örnekleri ve kod blokları ekleyebilirsiniz.
Dipnotlar: Dipnotlar ve referanslar eklemek için özellikler sunabilir.
Live Code (Canlı Kod): Markdown belgesindeki kodu canlı olarak çalıştırarak sonuçları görüntülemek için kullanılır.
Preview Code (Kodu Önizle): Markdown belgesini önizlemek için kullanılır, böylece belgenin son halini görüntüleyebilirsiniz.
Fullscreen (Tam Ekran): Editör penceresini tam ekran yaparak daha geniş bir çalışma alanı elde etmenizi sağlar, böylece yazma ve düzenleme işlemlerini rahatlıkla yapabilirsiniz.
2. MD Editor'de Properties (Özellikler) Paneli
MD Editor elementi içine default bir metin ekleyebilir, metin alanı yüksekliğini ve metin ayarlayabilirsiniz.
MD Editor seçili iken açılan Properties (Özellikler) paneli içerisinde Value, Authorization (Yetkilendirme), Visibility (Görünürlük), Actions (Aksiyonlar) ve Validation (Doğrulama) propertyleri ile gelmektedir. Bu propertyleri kullanarak elementi yapılandırabilirsiniz.
2.1. Value
MD Editor elementi içinde gösterilecek statik metni ekleyebilirsiniz. Ayrıca dinamik içerikler için Symbol Picker aracılığıyla bir durumu, Input element içeriğini veya bir aksiyon sonucuna ait bir değerin dinamik olarak gelmesini sağlayabilirsiniz.
2.2. Authorization (Yetkilendirme)
MD Editor elementi için Authorization (Yetkilendirme) seçeneklerini kullanabilirsiniz.
MD Editor ve diğer elementlerde Authorization (Yetkilendirme) ekleme işlemlerini detaylı incelemek için tıklayın.
2.3. Visibility (Görünürlük)
Elementler de Visibility (Görünürlük) belirli bir durumda görünürlük veya erişilebilirliğini düzenlemenizi sağlar.
MD Editor elementi için her zaman görünür olmasını, gizli olmasını veya bir koşula bağlı olarak görünüp gizlenmesini visibility seçeneklerini kullanabilirsiniz.
MD Editor ve diğer elementlerde Visibility ekleme ile ilgili detaylı bilgi edinmek için tıklayın.
Seçimler doğrultusunda MD Editor görünürlüğü ayarlanmış olacaktır.
2.4. Actions (Aksiyonlar)
MD Editor elementine ekleyebileceğiniz aksiyonları Add Actions ile ekleyebilirsiniz.
MD Editor elementine veya diğer elementlere aksiyon ekleme ile ilgili detaylı bilgi edinmek için tıklayın.
2.5. Validation (Doğrulama)
Kullanıcının MD Editor içine girdiği verileri doğrulamak ve belirli kurallara uymasını sağlamak için kullanılır. Örneğin, bir formun doğru şekilde doldurulup doldurulmadığını kontrol etme.
3. MD Editor'de Styling (Stil) Paneli
MD Editor’de Styling (Stil) paneli ile elementin görünümünü ve stilini düzenleyebilirsiniz.
MD Editor elementinin Styling panelinde sadece Layout property’si yer almaktadır. Text (Metin), Fill (Dolgu), Border (Kenarlık) ve Shadow (Gölge) property’leri bulunmamaktadır.
3.1. Layout (Düzen)
Çevresel iç boşluklar ve boyutlandırma gibi görsel düzenlemeleri yapabilirsiniz.
Last updated
