ドラフト-jsベースのエディタで画像をアップロードしてレンダーする

Question

私はストーリーラインを書くための簡単なエディタを作成しようとしています。今は、太字のテキストが太字で表示されているエディタでHTMLにマークアップすることができます。また、HTML形式のデータをサーバに送ることもできますが、エディタで画像を表示できず、画像もアップロードできませんでしたエディタで。私はそれのcodesandboxを作成しました。ここでは、リンク

https://codesandbox.io/s/5w4rp50qkp

があるコードの行は少し巨大です。だからこそ、デモを見ることができるcodesandboxにコードを掲載しています。

誰でもこのことを可能にすることができますか？

Answer 1

私はもともと私はあなたの便宜のために、以下のことをコピーしhere

私の答えを投稿：

---

はDraft.jsソースコードをチェックした後に画像を挿入する方法を見つけ出すためにしばらく時間がかかりました。

insertImage = (editorState, base64) => { 
    const contentState = editorState.getCurrentContent(); 
    const contentStateWithEntity = contentState.createEntity(
     'image', 
     'IMMUTABLE', 
     { src: base64 }, 
    ); 
    const entityKey = contentStateWithEntity.getLastCreatedEntityKey(); 
    const newEditorState = EditorState.set(
     editorState, 
     { currentContent: contentStateWithEntity }, 
    ); 
    return AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' '); 
    }; 

次にあなたが

const base64 = 'aValidBase64String'; 
const newEditorState = this.insertImage(this.state.editorState, base64); 
this.setState({ editorState: newEditorState }); 

を使用するために画像をレンダリングすることができ、あなたはDraft.js image pluginを使用することができます。

ライブデモ：codesandbox

デモは、Twitterのロゴ画像を挿入します。あなたは、ローカルファイルから画像を挿入したい場合は

---

、あなたはそのBASE64を取得するためにFileReader APIを使用しようとすることができます。

BASE64を取得する方法については

、それは簡単ですが、チェック

ライブデモ：jsbin

今、それらを一緒に入れて、あなたがローカルファイルから画像をアップロードすることができます先に行きます！