react-draft-wysiwyg富文本的使用

1.分析需求

实现富文本编辑功能，通过与后台传输html字符串，实现保存、编辑、回显功能。

2.下载依赖

npm install

3.引入

import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import { EditorState, convertToRaw, ContentState } from 'draft-js';
import draftToHtml from 'draftjs-to-html';
import htmlToDraft from 'html-to-draftjs';

4.存储状态

this.state = {
  editorState: EditorState.createEmpty(),
};

5.jsx部分

<Editor
          editorState={editorState}
          toolbarClassName="toolbarClassName"
          wrapperClassName="wrapperClassName"
          editorClassName={styles.editor}
          onEditorStateChange={this.onEditorStateChange} //
          //className={styles.demo-editor}
          style={{
            minHeight: '500px',
          }}
        />

6.向后台传输数据

6.1.保存数据

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

6.2.转换格式调取接口

dispatch({
type: 'Carstylescenter/addBrandIntroduce',
payload: {
brandId,
desc: draftToHtml(convertToRaw(editorState.getCurrentContent())),
},
});

7.富文本回显

const descInit = response.data.brandDesc
if (descInit && descInit !== 'null') {
const contentBlock = htmlToDraft(descInit);
const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks);
const editorState = EditorState.createWithContent(contentState);
this.setState({ editorState });
}

8.全部代码

import React, { Component, Fragment } from 'react';
import { connect } from 'dva';
import router from 'umi/router';
import { Row, Col, Card, Form, Button } from 'antd';
import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import { EditorState, convertToRaw, ContentState } from 'draft-js';
import draftToHtml from 'draftjs-to-html';
import htmlToDraft from 'html-to-draftjs';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import styles from './index.less';
@connect(({ Carstylescenter, loading }) => ({
Carstylescenter,
loading: loading.models.Carstylescenter,
}))
@Form.create()
class RichText extends Component {
constructor(props) {
super(props);
this.state = {
editorState: EditorState.createEmpty(),
};
this.formLayout = {
labelCol: { span: 7 },
wrapperCol: { span: 13 },
};
}
componentDidMount() {
const { dispatch } = this.props;
const brandId = this.props.location.query.vehicleBrandId;
dispatch({
type: 'Carstylescenter/brandIntroduceInit',
payload: { brandId },
callback: response => {
if (response.status == 0) {
console.log(11, response.data.brandDesc )
const descInit = response.data.brandDesc
if (descInit && descInit !== 'null') {
const contentBlock = htmlToDraft(descInit);
const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks);
const editorState = EditorState.createWithContent(contentState);
this.setState({ editorState });
}
} else {
message.error(response.message, 1, function() {});
}
},
});
}

onEditorStateChange = editorState => {
this.setState({
editorState,
});
};
handleAddIntroduceSubmit = () => {
const { dispatch } = this.props;
const editorState = this.state.editorState;
const brandId = this.props.location.query.vehicleBrandId;
dispatch({
type: 'Carstylescenter/addBrandIntroduce',
payload: {
brandId,
desc: draftToHtml(convertToRaw(editorState.getCurrentContent())),
},
});
};
handleAddIntroduceCancel = () => {
router.push(/carstylescenter/brands);
};
handleEditInit = () => {
const {
Carstylescenter: {
checkIntroduceData: { addIntroduceSuccess },
introduceInit,
},
loading,
} = this.props;
const editorState = this.state.editorState;
return (

<Card
bordered={false}
// style={{
// minHeight: '500px',
// }}
>
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
<Editor
editorState={editorState}
toolbarClassName="toolbarClassName"
wrapperClassName="wrapperClassName"
editorClassName={styles.editor}
onEditorStateChange={this.onEditorStateChange}
//className={styles.demo-editor}
style={{
minHeight: '500px',
}}
/>

<Row gutter={{ md: 8, lg: 24, xl: 48 }} >

<Button
type="primary"
style={{ marginRight: 50 }}
onClick={this.handleAddIntroduceSubmit}
>
提交

);
};
render() {
return this.handleEditInit();
}
}

export default RichText;