draft.js dosyasında varsayılan yazı tipi ailesi ve boyutu nasıl ayarlanır

Question

draft.js düzenleyicisini öğreniyorum ve varsayılan yazı tipi-ailesi ile yazı tipi boyutunu nasıl yapılandıracağımı bulamıyorum.

bu yolu denedim: tarzı çalışıyor garip Ne

let editorState = EditorState.createEmpty(); 

let newState = RichUtils.toggleBlockType(
    editorState, 
    'aligncenter' 
); 

newState = RichUtils.toggleInlineStyle(
    newState, 
    'FONT_SIZE_36' 
); 
newState = RichUtils.toggleInlineStyle(
    newState, 
    'TIMES_NEW_ROMAN' 
); 

, aligncenter ama bileşen odak aldığında yazı boyutu ve aile kaybolur.

Nasıl yapılacağını doğru bir şekilde önerebilir misiniz?

Answer 1

RichUtils.toggleInlineStyle() öğesinin kullanılması şu anda seçili metin aralığını değiştirmek (veya geçerli imleç konumuna girilecek metin için satır içi stilini ayarlamak) içindir. Belgenin tamamı için varsayılan satır içi stillerini ayarlamak için bunu kullanmanın bir yolu yoktur (bu da önerilmez).

Varsayılan stiller almak için CSS'yi kullanmalı ve tüm düzenleyici için istediğiniz stillerinizi belirlemelisiniz. Sonra kullanıcı varsayılan olmayan bir stil istediğinde (örneğin bir açılır menüden yazı tipi boyutunu seçerek) toggleInlineStyle kullanarak belirli metin aralıkları için bu stilleri geçersiz kılmalısınız.

İşte yakalama. Şu anda bu satır içi stilleri styleMap kullanarak önceden tanımlayabilirsiniz, ancak bir kullanıcı, rastgele bir font ailesi (veya boyut veya renk) seçtiğinde, onları anında oluşturamazsınız.

react-rte.org için renk seçiciyi uygulamaya çalışırken bu konuda da mücadele ediyorum.

(Teknik olarak, anında stilleri ekleyebilir, ama bu gerçekten kullanışlı değil yani, bir yeniden işlemek tetiklemez.)

burada bunun için açık bir sorun vardır: https://github.com/facebook/draft-js/issues/52

Bunun bir hafta içinde çözüleceğini umuyorum ve bu cevabı, neyin peşinde olduğunuzu gerçekleştirmek için örnek kod ile düzenleyebilirim.