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

安装：
cnpm install -D draft-js draftjs-to-html react-draft-wysiwyg

// 用来指定商品详情的富文本编辑库
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 (
        
    )
}

}

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

import Richtextedit from “./Richtextedit”
//获取富文本的值
const detail = this.refs.detail.getDetail();
//detail中可传入html格式的字符串，示例如下
// detail = ‘

女士夏季超短裙，价格优惠，哈哈哈哈，是打发斯蒂芬，大所发生的发，11111，333333，阿斯顿发送到发 ，是的发送到发三的

\n\n

\n’

demo

import React, { Component } from ‘react’;
import { EditorState, convertToRaw } from ‘draft-js’;
import { Editor } from ‘react-draft-wysiwyg’;
import draftToHtml from ‘draftjs-to-html’;
import htmlToDraft from ‘html-to-draftjs’;

class EditorConvertToHTML extends Component {
state = {
editorState: EditorState.createEmpty(),
}

onEditorStateChange: Function = (editorState) => {
this.setState({
editorState,
});
};

render() {
const { editorState } = this.state;
return (

);
}
}