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 ( <Editor editorState={editorState} editorStyle={{border:"1px solid #000",minHeight:"200px",padding:"0 10px"}} //绑定监听，在内容change的时候调用 onEditorStateChange={this.onEditorStateChange} toolbar={{ image: { uploadCallback: this.uploadImageCallBack, alt: { present: true, mandatory: true } }, }} /> ) }

}

export default Richtextedit; // wysiwyg:what you see is what you get

import Richtextedit from “./Richtextedit” //获取富文本的值 const detail = this.refs.detail.getDetail(); //detail中可传入html格式的字符串，示例如下 // detail = ‘

女士夏季超短裙，价格优惠，<span style=“color: rgb(65,168,95);”>哈哈哈哈，是打发斯蒂芬，大所发生的发，11111，333333，阿斯顿发送到发 ，是的发送到发三的

\n<img src=“http://localhost:5000/upload/image-1566874131871.jpg” alt=“暗示” style=“float:none;height: auto;width: auto”/>\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 (

); } }