react-draft-wysiwyg富文本组件

目录

react-draft-wysiwyg富文本组件

组件使用背景

ant design 、react、dva、react-draft-wysiwyg

组件使用中遇到的问题

当嵌套组件中使用 react-draft-wysiwyg 的 editor 组件时,当我首次进入编辑页面,id=1的文章时,内容应该显示id=1的内容。返回列表页面,重新进入id=2的文章时,react-draft-wysiwyg 的 editor 组件会保留id=1的文章内容。当我返回列表页面,重新进入id=3的文章时,react-draft-wysiwyg 的 editor 组件会保留id=2的文章内容。

实现富文本组件合理使用有2个方案

1、将 react-draft-wysiwyg的editor直接使用,不要嵌套于其他组件内。
2、如果您将 react-draft-wysiwyg的editor 已经嵌套于其他组件,建议您自行实现该组件内容的实现双向绑定。

1、直接使用editor 范例
//  层级关系(我项目中实现是嵌套组件)
-   EditBlogPage.jsx (当前编辑页)
-     UpdateBlogForm
-         EditorConvertToHTML
-             Editor  
render() {
    const { blog } = this.props;
    const itemBlog = blog.get('itemBlog').toJS();
    const blogBodyEditor = blog.get('blogBodyEditor');
    const contentBlock = htmlToDraft(itemBlog.body);
    const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks);
    const editorState = EditorState.createWithContent(contentState);
    return (
      <Layout>
        <Layout.Content>
          <Row>
            <Card>
             // 使用 UpdateBlogForm 组件
              <UpdateBlogForm
                optType="edit"
                blogBodyEditor={blogBodyEditor}
                itemBlog={itemBlog}
                handleUpdate={this.handleUpdate} />
             // 使用 EditorConvertToHTML 组件
              <EditorConvertToHTML
                body={itemBlog.body} />
             // 直接使用 react-draft-wysiwyg 的 editor
              <Editor
                editorState={editorState}
                toolbar={{
                  options: ['blockType'],
                  blockType: {
                    inDropdown: false,
                    className: 'bordered-option-classname',
                    options: ['Normal', 'H1', 'H2', 'H3', 'H4', 'H5'],
                  },
                }} />
            </Card>
          </Row>
        </Layout.Content>
      </Layout>
    );
  }
组件使用对比图.png

从上图可以看出,当你直接使用editor 没毛病,完全可以实现您的需求。

2、嵌套组件内使用editor

思路:将传给editor的EditorState 存在state中,就像给input实现双向绑定。

// EditorConvertToHTML 组件
import React, { Component, PropTypes } from 'react';
import { Editor } from 'react-draft-wysiwyg';
import { EditorState, convertToRaw } from 'draft-js';
import draftToHtml from 'draftjs-to-html';
import './editor-to-html.scss';

class EditorConvertToHTML extends Component {
  static propTypes = {
    // 同时在将 EditorState 传入渲染使用
    blogBodyEditor: PropTypes.instanceOf(EditorState),
    changeBody: PropTypes.func,
  }
  constructor(props) {
    super(props);
    if (props.blogBodyEditor) {
      this.state = {
        editorState: props.blogBodyEditor,
      };
    } else {
      this.state = {
        editorState: EditorState.createEmpty(),
      };
    }
    this.onEditorStateChange = this.onEditorStateChange.bind(this);
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps.blogBodyEditor) {
      this.setState({
        editorState: nextProps.blogBodyEditor,
      });
    }
  }

  onEditorStateChange(editorState) {
    this.setState({
      editorState,
    });
    // 关键代码:将更改的 editorState 存入state
    this.props.changeBody(editorState, draftToHtml(convertToRaw(editorState.getCurrentContent())));
  }

  render() {
    const { editorState } = this.state;

    return (
        <Editor
          editorState={editorState}
          onEditorStateChange={this.onEditorStateChange}
          toolbar={{
            options: ['blockType'],
            blockType: {
              inDropdown: false,
              className: 'bordered-option-classname',
              options: ['Normal', 'H1', 'H2', 'H3', 'H4', 'H5'],
            },
          }} />
    );
  }
}

export default EditorConvertToHTML;

推荐阅读更多精彩内容

  • 这次作业呢,我画的比较多,因为有些图发到每日一绘中没人跟我点评,我就不知道画的好不好。 这次呢,老师一开始讲了个下...
    深夜静思阅读 225评论 7 3
  • 第一步 找对人 你是求助者 事先准备好多元互补的 “顾问委员会 ” 决定你需要何种建议 选择一名或多名适合你目前需...
    黄复得阅读 160评论 0 0
  • 前几天和好基友南山看花看夜景,他是艺术家,用生命拍照。我一个人看满天繁星,想像手可摘星辰,想像我爱过的人在遥远的星...
    樊某人阅读 733评论 17 10
  • 书生胸中有奇谋,睚眦必报恩怨分。 先主领兵东去日,卧龙深憾无法正。
    君自尔出阅读 153评论 6 0