Draft.js. Comment puis-je mettre à jour le bloc atomic: image src plus tard par exemple, article save?

Question

Je rencontre des difficultés pour mettre à jour mes blocs d'image dans editorState in draft.js. Je veux changer atomic: image src sur le bouton enregistrer. Ainsi, le src est par exemple maintenant blob: http://localhost:3000/7661d307-871b-4039-b7dd-6efc2701b623 mais je voudrais mettre à jour par exemple à src /uploads-from-my-server/test.png

onSave(e) { 
e.preventDefault(); 
const { editorState } = this.state; 
const contentState = editorState.getCurrentContent(); 

editorState.getCurrentContent().getBlockMap().map((block) => { 
    const type = block.getType(); 

    if (type === 'atomic:image') { 
    const rangeToReplace = new SelectionState({ 
     anchorKey: block.getKey(), 
     focusKey: block.getKey(), 
    }); 

    Modifier.replaceText(contentState, rangeToReplace, '/uploads-from-my-server/test.png'); 
    const newContentState = editorState.getCurrentContent(); 
    this.setState({ editorState: newContentState }); 
    } 

    return true; 
}); 

Je sais que je peux accéder à la chaîne src avec block.getData(). get (« src ») mais je ne peux pas fixé dans

Merci pour votre éditeur génial

Answer 1

je luttais avec un problème similaire, j'ai fini par convertir l'état contenu en tableau brut en utilisant convertToRaw puis en le mettant à jour manuellement et utiliser convertFromRaw et définir le nouveau statut e:

import {EditorState, ContentState, convertToRaw, convertFromRaw /*, ...*/} from 'draft-js'; 

// ... 

onSave(e) { 
    e.preventDefault(); 
    const { editorState } = this.state; 
    const contentState = editorState.getCurrentContent(); 

    let rawContent = convertToRaw(contentState); 

    for(let i = 0; i < rawContent.blocks.length; i++) { 
     let b = rawContent.blocks[i]; 
     if(b['type'] !== "unstyled" && b.entityRanges.length === 1) { 
     const entityKey = b['entityRanges'][0]['key']; 
     const entityMap = rawContent['entityMap'][entityKey]; 
     if(entityMap["type"] === "image") { 
      rawContent['entityMap'][entityKey]['data']['src'] = '/uploads-from-my-server/test.png';   
     } 
     }  
    } 

    const newContentState = convertFromRaw(rawContent); 
    const newEditorState = EditorState.push(this.state.editorState, newContentState, 'update-contentState'); 
    this.setState({editorState: newEditorState}); 
} 

Remarque: Ce n'est pas un exemple complet, c'est juste un point de départ. J'espère que ça aide :)