React’ta Metin Editörü (React Draft Wysiwyg)

Selamlar,

Bu yazımda, React’ta input alanından daha fazlasına ihtiyacımız olduğunda ve özelleştirilebilir metinler yazmak istediğimizde kullanabileceğimiz bir metin editörü olan “React Draft Wysiwyg”dan ve kullanımından bahsedeceğim. Keyifli okumalar! 😊

Uygulamalarımızı geliştirirken genellikle kullanıcı adı, adres veya şehir gibi küçük metin parçalarını yakalamak için düz metin kutularını veya metin alanlarını kullanırız. Ama bazı durumlarda bu girilen metin seçeneklerinin kullanıcıya bırakılması gerekebilir. (Makale yazısı, blog yazısı vs..) Bu noktada, zengin metin düzenleyicileri devreye giriyor ve react’ta ise imdadımıza React Draft Wysiwyg yetişiyor. Kendi projelerimde de kullandığım için sizlerede özelliklerinden ve uygulamamıza nasıl ekleyeceğimizden bahsedeceğim. Kendi sitesinde yazan bazı özellikleri aşağıdaki gibidir.

Özellikler

• Kontrol edilebilir araç çubuğu, kontrol eklemeyi/çıkarmayı seçeneğiyle.
• Kontrol sırasını araç çubuğunda değiştirme seçeneği.
• Özel kontrolleri araç çubuğuna ekleme seçeneği.
• Araç çubuğunda stilleri ve simgeleri değiştirme seçeneği.
• Koşullu olarak araç çubuğunu gösterme/gizleme seçeneği.
• İç içe stiller için destek: Kalın, İtalik, Altı çizili, Üstü çizili, Kod, Simge ve Üstyazı.
• Bloklar için destek: Paragraf, H1 — H6, Alıntı, Kod.
• Yazı tipi boyutu ve yazı tipi belirleme desteği ve özel türler ekleyebilme seçeneği. Sıralı/sırasız liste ve girinti desteği.
• Metin hizalama desteği.
• Metin veya arkaplanın renklendirilmesi ve kendi renk değerlerinizi ekleyebilme seçeneği.
• Bağlantıları ekleme/düzenleme desteği.
• 150'den fazla emoji seçeneği ve kendi Unicode emojilerinizi ekleyebilme seçeneği.
• Bahsedilen kullanıcıları destekleme. Etiketler (hashtag) desteği.
• Resimleri ekleme/yükleme desteği.
• Resimleri hizalama, yükseklik ve genişlik belirleme desteği.
• Gömülü bağlantıları, yükseklik ve genişliği esnek bir şekilde ayarlama seçeneği.
• Eklenen stilleri kaldırma seçeneği.
• Geri alma ve yeniden yapma seçeneği.
• Sağdan sola yazım ve yazım denetimi için yapılandırılabilir davranış.
• Yer tutucu desteği. WAI-ARIA destekleyen öznitelikler için destek.
• Kontrollü veya kontrolsüz React bileşeni olarak metin düzenleyiciyi kullanma desteği.
• Metin düzenleyici içeriğini HTML, JSON, Markdown’e dönüştürme desteği.
• Düzenleyicinin ürettiği HTML’yi tekrar düzenleyici içeriğine dönüştürme desteği.
• Uluslararasılaşma desteği.

Kurulum

Öncelikle bir react projesi oluşturalım. Bunun için ben vite kullanıyorum. Siz istediğiniz şekilde oluşturabilirsiniz. Proje oluşturulduktan sonra metin editörü için gerekli paketleri yüklemeliyiz.

npm install -s draft-js
npm install -s react-draft-wysiwyg
npm install -s draftjs-to-html

yukarıdaki şekilde paketlerimizi yükleyebiliriz. Ardından projenize aşağıdaki hazırladığım component’i yükleyerek kullanabilirsiniz.

Kod Notları

getInitialState() => Bu fonksiyon metin editörünü düzenleme modunda açmak isterseniz html kodunu tekrar metin editörünün içerisinde yerleştirir. Eğer default value yoksa state’leri boş olarak atar.

textEditor => bir text stateti alır. Bu sayede hem default value verebiliriz hemde girilen değerleri bu state’e iletebiliriz.

Önizleme

Yukarıda gördüğünüz gibi ben bir modal içerisinde kullandım. İçerisindeki özellikler benim ihtiyacımı fazlası ile gördü. Eğer sadeleştirmek isterseniz sizin için gereksiz özellikleri çıkarabilirsiniz. Aşağıdaki props’u <Editor /> içerisine eklerseniz tüm özellikler default’da olduğu gibi gelecektir. Kullanmak istemediklerinizi bu liste içerisinden silerek editör içerisinden çıkarabilirsiniz.

 toolbar={{
        options: [
          "inline",
          "blockType",
          "fontSize",
          "fontFamily",
          "list",
          "textAlign",
          "colorPicker",
          "link",
          "embedded",
          "emoji",
          "image",
          "remove",
          "history",
        ]}}

Yani aşağıdaki gibi sadece kullanmak istediğimiz özellikleri ekleyebiliriz.

Text editörünüzü daha fazla özelleştirmek isterseniz bu link üzerinden ilerleyebilirsiniz. Yazının başında belirttiğim tüm özelliklerden faydalanabilirsiniz.

Umarım size yardımcı olur. Okuduğunuz için teşekkür ederim 😊🖐️