react 富文本编辑中插入线上图片

头发快掉没了的程序猿

已于 2022-04-11 11:11:18 修改

阅读量1.2k

点赞数 1

文章标签：前端 react css

于 2022-04-01 15:39:22 首次发布

本文链接：https://blog.csdn.net/LiuBo_1999/article/details/123899629

版权

本文探讨如何在React应用中的富文本编辑器里插入并显示来自线上的图片，结合相关技术进行详细说明。

摘要由CSDN通过智能技术生成

//清空
   clearContent = () => {
        this.setState({
            editorState: ContentUtils.clear(this.state.editorState)
        })
    }
//追加到后面
    insertText = () => {
        this.setState({
            editorState: ContentUtils.insertText(this.state.editorState, 'Hello World!')
        })
    }    
//发生变化事件
    handleChange = (editorState) => {
        console.log(editorState);
        this.setState({ editorState })
    }
//点击添加图片时调用 （insertMedias）
    tupian = (e) => {
        if (e.file.response != null) {
            let img = <img src={e.file.response.data.fileUrl}></img>
            console.log(img);
            this.setState({
                editorState: ContentUtils.insertMedias(this.state.editorState, [{
                    type: "IMAGE",
                    url: img.props.src,
                }],
                )
            })
        } el