mit draft.js ist es möglich, eine benutzerdefinierte Blockspanne mit Klassenname

Question

zu erstellen Ich verwende draft.js, und ich habe alles, was ich brauche, außer für eine Sache.

Ich möchte in der Lage sein, eine benutzerdefinierte Blockoption hinzuzufügen, die einen Bereich mit einer benutzerdefinierten Klasse (z. B. Inhalt) um den ausgewählten Inhalt im Editor anwenden wird.

Ist dies mit draft-js benutzerdefinierten Blöcken möglich?

Irgendwelche guten Beispiele da draußen? (Beim googeln wurde nichts gefunden.)

Answer 1

Sie können dies tun, ohne Text in das Element mit einer benutzerdefinierten Klasse einzufügen. Sie können ausgewählten Text mit der Methode RichUtils.toggleInlineStyle formatieren. Weitere Details beschrieben here. Betrachten Sie dieses Arbeitsbeispiel - https://jsfiddle.net/x2gsp6ju/2/

Definieren Sie customStyleMap Objekt. Die Schlüssel dieses Objekts sollten eindeutige Namen Ihrer benutzerdefinierten Stile und Werte sein - Objekte mit geeigneten Stilen.

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

Pass dieses Objekt customStyleMap Eigenschaft Editor Komponente:

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

In diesem Beispiel gelten I Stile für ausgewählte Text nach Klick auf den entsprechenden Schaltflächen, rufe ich this.applyCustomSTyles Methode und übergeben Stil-Namen wie erstes Argument. Bei diesem Verfahren erzeuge ich neue editorState mit RichUtils.toggleInlineStyles:

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