（draft.js）は、クラス名を使用してカスタムブロックスパンを作成することが可能です

Question

draft.jsを使用しています。

エディタで選択したコンテンツの周りにカスタムクラス（コンテンツなど）を含むスパンを適用するカスタムブロックオプションを追加できます。

draft-jsカスタムブロックで可能ですか？

良い例がありますか？ （グーグルでは何も見つかりませんでした）

Answer 1

カスタムクラスを使用して要素にテキストをラップすることなく実行できます。選択したテキストをメソッドRichUtils.toggleInlineStyleでスタイルすることができます。詳細はhereと記載されています。 この実例を見て​​ください - https://jsfiddle.net/x2gsp6ju/2/

customStyleMapオブジェクトを定義してください。このオブジェクトのキーは、カスタムスタイルと値の固有の名前（適切なスタイルのオブジェクト）でなければなりません。

const customStyleMap = { 
    redBackground: { 
    backgroundColor: 'red' 
    }, 
    underlined: { 
    textDecoration: 'underline', 
    fontSize: 26 
    }, 
}; 

峠Editor部品のcustomStyleMapプロパティにこのオブジェクト：この例では

<Editor 
    placeholder="Type away :)" 
    editorState={this.state.editorState} 
    onChange={this._handleChange} 
    customStyleMap={customStyleMap} 
/> 

は、私がthis.applyCustomSTylesメソッドを呼び出し、などのスタイル名を渡し、適切なボタンをクリックした後、選択したテキストのスタイルを適用します最初の議論。この方法では、私はeditorStateRichUtils.toggleInlineStylesで新しい生成：

applyCustomStyles = (nameOfCustomStyle) => { 
    this._handleChange(
    RichUtils.toggleInlineStyle(
     this.state.editorState, 
     nameOfCustomStyle 
    ) 
); 
}