draft.jsのデフォルトのフォントファミリとサイズを設定する方法

Question

draft.jsエディタを学習中です。デフォルトのフォントファミリとフォントサイズの設定方法が見つかりません。

が、私はこの方法を試してみました：

奇妙です何

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スタイルが正常に動作しますが、コンポーネントがフォーカスを取得したときにフォントサイズと家族が消えます。

どうすればいいですか？

Answer 1

を使用するRichUtils.toggleInlineStyle()は、現在選択されているテキストの範囲を変更する（または現在のカーソル位置に入力されるテキストのインラインスタイルを設定する）ためのものです。これを使用して、ドキュメント全体のデフォルトのインラインスタイルを設定する方法はありません（これは推奨されません）。

デフォルトスタイルを取得するには、CSSを使用して、エディタ全体に必要なスタイルを設定する必要があります。次に、ユーザーがデフォルト以外のスタイル（ドロップダウンからフォントサイズを選択するなど）を希望する場合は、​​を使用して、特定のテキスト範囲のスタイルを上書きする必要があります。

ここにキャッチがあります。現在のところ、styleMapを使用してこれらのインラインスタイルを事前定義することはできますが、ユーザが任意のフォントファミリ（またはサイズまたは色）を選択すると、オンザフライでそれらを実際に作成することはできません。

react-rte.orgのカラーピッカーを実装しようとしているときに、これも苦労しています。

（技術的には、あなたは場でスタイルを追加することができますが、それは実際に使用可能ではありませんので、それは、再レンダリングトリガされません。）

ここで、このための未解決の問題があります： https://github.com/facebook/draft-js/issues/52

これは1週間ほどで解決されると思います。この回答をサンプルコードで編集して、後で何を達成することができますか？