react html编辑器,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 (

);

}

}