安装:
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 (
);
}
}