Draftjsはプログラム的

Question

私は私が達成しようとしているどのような次の関数

buttonToSelection(){ 
    const editorState = this.state.editorState; 
    var selectionState = editorState.getSelection(); 
    const newSelection = selectionState.merge({ 
     anchorOffset: 1, 
     focusOffset: 10 
    }) 
    const newEditorState = EditorState.forceSelection(editorState, newSelection); 
    this.editorChangeState(RichUtils.toggleInlineStyle(newEditorState,'STRIKEOUT')); 
} 

を持っているテキストにインラインスタイルを適用ボタンのスタイル1および取り消し線と10の間のテキストの範囲をクリックするとです。この機能は現時点では行いますが、テキストの選択も保持します。テキストのスタイリングを変更したいだけです。

Answer 1

あなたはほぼ正しいことをしています。しかし、Draftに（RichUtilsを使ってスタイルを追加するのに適した）新しい選択を与えたので、その選択をレンダリングしようとします。したがって、editorChangeStateを呼び出す前に、選択を以前の値に再設定する必要があります。ここでは、（いくつかの過度の説明変数で）見ることができる方法は次のとおりです。

buttonToSelection =() => { 
    const editorState = this.state.editorState; 
    const selectionState = editorState.getSelection(); 
    const newSelection = selectionState.merge({ 
    anchorOffset: 1, 
    focusOffset: 10 
    }) 
    const editorStateWithNewSelection = EditorState.forceSelection(editorState, newSelection); 
    const editorStateWithStyles = RichUtils.toggleInlineStyle(editorStateWithNewSelection,'STRIKEOUT') 
    const editorStateWithStylesAndPreviousSelection = EditorState.forceSelection(
    editorStateWithStyles, 
    selectionState 
) 
    this.editorChangeState(editorStateWithStylesAndPreviousSelection); 
} 

Here's a fiddleアクションでそれを示します。あなたがボタンをクリックする前に少なくとも11文字をエディタに書いていることを確認してください。