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: ateEmpty(),
};
5.jsx部分
<Editor
editorState={editorState}
toolbarClassName="toolbarClassName"
wrapperClassName="wrapperClassName"
editorClassName={styles.editor}
onEditorStateChange={EditorStateChange} //
//className={styles.demo-editor}
style={{
minHeight: '500px',
}}
/>
6.向后台传输数据
6.1.保存数据
onEditorStateChange = editorState => {editor bar
this.setState({
editorState,
});
};
6.2.转换格式调取接⼝
dispatch({
type: 'Carstylescenter/addBrandIntroduce',
payload: {
brandId,
desc: draftToHtml(CurrentContent())),
},
});
7.富⽂本回显
const descInit = response.data.brandDesc
if (descInit && descInit !== 'null') {
const contentBlock = htmlToDraft(descInit);
const contentState = tBlocks);
const editorState = ateWithContent(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: dels.Carstylescenter,
}))
@ate()
class RichText extends Component {
constructor(props) {
super(props);
this.state = {
editorState: ateEmpty(),
};
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 = tBlocks); const editorState = ateWithContent(contentState);
this.setState({ editorState });
}
} else {
<(ssage, 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(CurrentContent())),
},
});
};
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={EditorStateChange} //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;