react 富文本编辑器 react-draft-wysiwyg

[mcya]

文档

一个简单的实例：https://jpuri.github.io/react-draft-wysiwyg/#/demo

文档：https://jpuri.github.io/react-draft-wysiwyg/#/docs

[mcya]

react 富文本编辑器 react-draft-wysiwyg 的使用

安装相关依赖

npm install react-draft-wysiwyg npm install draft-js npm install draftjs-to-html npm install html-to-draftjs

引入相关组件函数

import '../../../../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
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';

使用

<Editor
  editorState={this.state.editorState}
  wrapperClassName="demo-wrapper"
  editorClassName="demo-editor"
  onEditorStateChange={::this.onEditorStateChange}
/>
{/*
.demo-editor {
      height: 380px !important;
      border: 1px solid #F1F1F1 !important;
      padding: 5px !important;
      border-radius: 2px !important;
  }
*/}

以富文本的方式保存，即以HTML格式的方式保存发送到后台

formSubmit() {
  // 保存须知
  var editorContent = draftToHtml(convertToRaw(this.state.editorState.getCurrentContent()))
  this.props.saveSys({roomnotes: editorContent})
}

回显，即保存后下次回来重新查看之前所编辑的数据以及格式。

componentWillReceiveProps(nextProps) {
  if (this.props.getSysResult!==nextProps.getSysResult && nextProps.getSysResult.data) {
    const contentBlock = htmlToDraft(nextProps.getSysResult.data.roomnotes);
    if (contentBlock) {
      const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks);
      const editorState = EditorState.createWithContent(contentState);
      this.setState({ editorState })
    }
  }
}

ok~~~

[mcya]

一份完好的 demo

import React, { PropTypes } from 'react';
import { Spin, Card, Modal, Form, Pagination, Input, Row, Col, Table, Icon, Select, Tag, Button, Upload, DatePicker } from 'antd';
import { bindActionCreators } from 'redux';
import TitleWithTools from 'TitleWithTools';
import { connect } from 'react-redux';
import _isEmpty from 'lodash/isEmpty';
import * as action from '../action';
import * as AppAction from 'AppAction';
import MsgBox from 'MsgBox';
import moment from 'moment';

import '../../../../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
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';

const FormItem = Form.Item;
const Option = Select.Option;
const RangePicker = DatePicker.RangePicker;

// 创建开盘
class KpInfo extends React.Component {
  constructor() {
    super();
    this.state = {
      editorState: EditorState.createEmpty(),
    }
  }

  componentDidMount() {}

  componentWillReceiveProps(nextProps) {
    if (this.props.getSysResult!==nextProps.getSysResult && nextProps.getSysResult.data) {
      const contentBlock = htmlToDraft(nextProps.getSysResult.data.roomnotes);
      if (contentBlock) {
        const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks);
        const editorState = EditorState.createWithContent(contentState);
        this.setState({ editorState })
      }
    }
  }

  formSubmit() {
    // 保存须知
    var editorContent = draftToHtml(convertToRaw(this.state.editorState.getCurrentContent()))
    this.props.saveSys({roomnotes: editorContent})
  }
  onEditorStateChange(editorState) {
    this.setState({ editorState })
  }

  render() {
    const { editorState } = this.state;
    return (
      <div>
        <Modal
          title="购房须知编辑"
          key="xuzhi_modal"
          visible={this.props.xuzhiVisible}
          onCancel={this.props.xuzhiCloseAction}
          width={1000}
          footer={[
            <Button type="primary" loading={this.props.loading} onClick={::this.formSubmit} key="xuzhi_save">保存</Button>,
            <Button onClick={this.props.xuzhiCloseAction} key="xuzhi_close">取消</Button>
          ]}
        >
          <Editor
            editorState={editorState}
            wrapperClassName="demo-wrapper"
            editorClassName="demo-editor"
            onEditorStateChange={::this.onEditorStateChange}
          />
        </Modal>
      </div>
    )
  }
}

function mapStateToProps(state, ownProps) {
  return {
    userInfo: state.getIn(['APP', 'userInfo']),
    ProTreSelected: state.getIn(['APP', 'ProTreSelected']),
    loading: state.getIn(['vxKp', 'loading']),
    getSysResult: state.getIn(['vxKp', 'getSysResult']),
    getActInfoListResult: state.getIn(['vxKp', 'getActInfoListResult'])
  };
}

function mapDispatchToProps(dispatch) {
  return {
    ...bindActionCreators(action, dispatch),
    ...bindActionCreators(AppAction, dispatch),
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Form.create()(KpInfo))

[kite-jy]

a'd'f'sa'f

[mcya]

a'd'f'sa'f

what?

[LiJianLinSlim]

I cound't see the demo cause it needs me to login ???why?but i can see it in my phone