1.分析需求

實(shí)現(xiàn)富文本編輯功能，通過與后臺(tái)傳輸html字符串，實(shí)現(xiàn)保存、編輯、回顯功能。

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.存儲(chǔ)狀態(tài)

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

5.jsx部分

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

6.向后臺(tái)傳輸數(shù)據(jù)

6.1.保存數(shù)據(jù)

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

6.2.轉(zhuǎn)換格式 調(diào)取接口

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;

轉(zhuǎn)載于:https://www.cnblogs.com/lanhuona/p/10524752.html

總結(jié)

以上是生活随笔為你收集整理的react-draft-wysiwyg富文本的使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。