Draft.js. Wie kann ich Block atomic aktualisieren: image src später zum Beispiel Artikel speichern?

Question

Ich habe Probleme beim Aktualisieren meiner Bildblöcke in editorState in draft.js. Ich möchte atomare ändern: image src beim Speichern der Schaltfläche. So ist die src zum Beispiel jetzt Blob: http://localhost:3000/7661d307-871b-4039-b7dd-6efc2701b623 aber ich mag src zu zum Beispiel aktualisieren /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; 
}); 

Ich weiß, dass ich src String zugreifen kann mit block.getData(). get (‚src‘), aber ich kippe gesetzt obwohl

Sie für Ihren fantastischen Editor Vielen

Answer 1

ich war mit einem ähnlichen Problem zu kämpfen, landete ich den Inhalt Zustand roh Array konvertieren Sie sich mit der convertToRaw und dann manuell aktualisieren und convertFromRaw verwenden und den neuen stat 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}); 
} 

Hinweis: Dies ist kein voll funktionsfähiges Beispiel, es ist nur ein Ausgangspunkt. Hoffe es hilft :)