Wie Standardfontorfamilie und -größe in draft.js festgelegt werden

Question

Ich lerne draft.js Editor und kann nicht finden, wie Standardschriftart und Schriftgröße zu konfigurieren.

habe ich versucht, auf diese Weise:

let editorState = EditorState.createEmpty(); 

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

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

Was seltsam ist, Aligncenter Stil funktioniert gut, aber Schriftgröße und Familie verschwindet, wenn die Komponente den Fokus erhält.

Können Sie bitte einen korrekten Weg vorschlagen?

Answer 1

Mithilfe von RichUtils.toggleInlineStyle() können Sie den aktuell ausgewählten Textbereich ändern (oder den Inline-Stil für Text festlegen, der an der aktuellen Cursorposition eingegeben wird). Es gibt keine Möglichkeit, dies zu verwenden, um die standardmäßigen Inline-Stile für das gesamte Dokument festzulegen (dies wird auch nicht empfohlen).

Um Standardstile zu erhalten, sollten Sie CSS verwenden und die gewünschten Stile für den gesamten Editor festlegen. Dann sollten Sie diese Stile für bestimmte Textbereiche außer Kraft setzen, indem Sie toggleInlineStyle verwenden, wenn der Benutzer einen nicht standardmäßigen Stil wünscht (z. B. Schriftgröße aus einem Dropdown auswählen).

Hier ist der Haken. Momentan können Sie diese Inline-Styles mit styleMap vordefinieren, aber Sie können sie nicht wirklich on-the-fly erstellen, wenn ein Benutzer eine beliebige Schriftfamilie (oder Größe oder Farbe) auswählt.

Ich habe mit diesem auch beim Versuch, eine Farbauswahl für react-rte.org implementieren zu kämpfen.

(Technisch gesehen Sie können hinzufügen Stile on the fly, aber es wird eine erneute machen nicht auslösen, so dass nicht wirklich brauchbar ist.)

Es ist eine offene Frage für diese hier: https://github.com/facebook/draft-js/issues/52

Ich erwarte, dass dies innerhalb einer Woche oder so gelöst wird, und ich kann diese Antwort mit Beispielcode bearbeiten, um zu erreichen, wonach Sie suchen.