Question

我正在尝试创建一个简单的编辑器来编写故事情节。现在我可以在编辑器中显示html标记，粗体文本以粗体显示等等。我也可以将html格式的数据发送到服务器但是我无法在编辑器中显示图像而且也无法上传图像在编辑。我已经创建了它的代码框。这是链接

代码行有点大。这就是我在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徽标图片。

如果要从本地文件插入图像，可以尝试使用FileReader API来获取该base64。

关于如何获得base64，很简单，请检查

现场演示： jsbin

现在继续将它们组合在一起，您可以从本地文件上传图像！

Answer 2

将uploadEnable设置为true 并致电uploadCallBack

<Editor ref='textEditor'
       editorState={this.state.editorState}
       toolbar={{
            options: ['image',],
                        
            image: {
            uploadEnabled: true,
            uploadCallback: this.uploadCallback,
            previewImage: true,
            inputAccept: 'image/gif,image/jpeg,image/jpg,image/png,image/svg',
            alt: { present: false, mandatory: false },
            defaultSize: {
                 height: 'auto',
                 width: 'auto',
            },
         },
       }}
       onEditorStateChange={this.onEditorStateChange}
/>

然后，如果您想直接从本地读取文件，则定义您的uploadCallback

uploadCallback = (file) => {
        return new Promise(
            (resolve, reject) => {
                if (file) {
                    let reader = new FileReader();
                    reader.onload = (e) => {
                        resolve({ data: { link: e.target.result } })
                    };
                    reader.readAsDataURL(file);
                }
            }
        );
    }

或者，如果您要使用文件服务器保存文件，则可能要在服务器上上传图像，然后只需放置链接

uploadCallback = (file) => {
    return new Promise((resolve, reject) => {
       const data = new FormData();
       data.append("storyImage", file)
       axios.post(Upload file API call, data).then(responseImage => {
            resolve({ data: { link: PATH TO IMAGE ON SERVER } });
       })
    });
}

在draft-js编辑器中上传和渲染图像

2 个答案: