在react项目中使用富文本编辑器

在react项目中使用富文本编辑器

1、网站参考地址： 传送门

2、安装：

cnpm install -D draft-js draftjs-to-html react-draft-wysiwyg

3、组件封装

// 用来指定商品详情的富文本编辑库
import React, { Component } from 'react'
import { EditorState, convertToRaw, ContentState } from 'draft-js'
import { Editor } from 'react-draft-wysiwyg'
import draftToHtml from 'draftjs-to-html'
import htmlToDraft from 'html-to-draftjs'
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
import PropTypes from "prop-types"
class Richtextedit extends Component {
    static propTypes = {
        detail: PropTypes.string
    }
    state = {
        // 创建一个没有内容的编辑对象
        editorState: EditorState.createEmpty()
    }

    constructor(props) {
        super(props);
        const html = this.props.detail;
        if(html){
            // 如果有值, 根据html格式字符串创建一个对应的编辑对象
            const contentBlock = htmlToDraft(html);
            if (contentBlock) {
                const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks);
                const editorState = EditorState.createWithContent(contentState);
                this.state = {
                    editorState
                };
            } else {
                this.state = {
                    editorState: EditorState.createEmpty(), // 创建一个没有内容的编辑对象
                }
            }
        }
    }

    // 输入过程中实时的回调
    onEditorStateChange = (editorState) => {
        this.setState({
            editorState,
        });
    }

    getDetail= () => {
        // 返回输入数据对应的html格式的文本
        return draftToHtml(convertToRaw(this.state.editorState.getCurrentContent()))
    }

    // 富文本中的图片上传
    uploadImageCallBack = (file) => {
        return new Promise(
            (resolve, reject) => {
                const xhr = new XMLHttpRequest()
                xhr.open('POST', '/manage/img/upload')
                const data = new FormData()
                data.append('image', file)
                xhr.send(data)
                xhr.addEventListener('load', () => {
                    const response = JSON.parse(xhr.responseText)
                    const url = response.data.url // 得到图片的url
                    resolve({ data: { link: url } })
                })
                xhr.addEventListener('error', () => {
                    const error = JSON.parse(xhr.responseText)
                    reject(error)
                })
            }
        )
    }
    render() {
        const { editorState } = this.state;
        return (
            <Editor
                editorState={editorState}
                editorStyle={{border:"1px solid #000",minHeight:"200px",padding:"0 10px"}}
                //绑定监听，在内容change的时候调用
                onEditorStateChange={this.onEditorStateChange}
                toolbar={{
                    image: { uploadCallback: this.uploadImageCallBack, alt: { present: true, mandatory: true } },
                }}
            />
        )
    }
}

export default Richtextedit;
// wysiwyg:what you see is what you get

组件使用

import Richtextedit from "./Richtextedit"
//获取富文本的值
const detail = this.refs.detail.getDetail();
//detail中可传入html格式的字符串，示例如下
// detail = '<p><strong>女士夏季超短裙</strong>，<del>价格优惠</del>，<span style=\"color: rgb(65,168,95);\">哈哈哈哈，是打发斯蒂芬，大所发生的发，11111，333333，阿斯顿发送到发     ，是的发送到发三的   </span></p>\n<img src=\"http://localhost:5000/upload/image-1566874131871.jpg\" alt=\"暗示\" style=\"float:none;height: auto;width: auto\"/>\n<p></p>\n'
<Richtextedit ref='detail' detail={detail} ></Richtextedit>