无法在componentDidMount中加载的react-draft-wysiwyg编辑器中编辑文本

时间:2019-06-05 14:29:10

标签: reactjs ssr react-draft-wysiwyg

我在带有SSR的React / Redux项目中使用react-draft-wysiwyg.Editor。编辑器使用DOM生成工具栏的下拉菜单,因此为了防止SSR出现问题,我在componentDidMount中创建了编辑器。组件显示正确,可以选择内容,但是无法编辑任何内容。

如果我不等待componentDidMount()并将编辑器直接放在render()中,则内容是可编辑的,但是直接从SSR加载时,不会生成工具栏的下拉菜单,因为react-draft-wysiwyg。编辑器使用DOM。

import React from 'react';
import PropTypes from 'prop-types';
import { Form } from 'antd';
import { EditorState, ContentState } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import htmlToDraft from 'html-to-draftjs';
import { stateToHTML } from 'draft-js-export-html';

class Wysiwyg extends React.Component {
  constructor(props) {
    super(props);

    this.html = props.data;

    const contentBlock = typeof window !== 'undefined' ? htmlToDraft(this.html) : null;

    if(contentBlock) {
      const
        contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks),
        editorState = EditorState.createWithContent(contentState);

      this.state = {
        editorState: editorState,
        editor: null,
      };
    } else {
      this.state = {
        editorState: null,
        editor: null,
      };
    }

  }

  componentDidMount() {
    const
      {
        state,
        onEditorStateChange,
      } = this,
      {
        editorState,
      } = state,
      editor = (
        <Editor
          editorState={editorState}
          onEditorStateChange={onEditorStateChange}
        />
      );

    this.setState({
      ...state,
      editor: editor,
    });
  }

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

  render() {
    const
      {
        props,
        state,
      } = this,
      {
        form,
        fieldId,
      } = props,
      {
        editorState,
        editor,
      } = state,
      {
        getFieldDecorator,
      } = form;

    const fieldOptions = {
      initialValue: editorState,
    }

    return (
      <Form.Item
        hasFeedback
        label="DESCRIPTION"
      >
        {editor ? getFieldDecorator(fieldId, fieldOptions)(editor) : null}
      </Form.Item>
    );
  }
}

export default Wysiwyg;

编辑器内容不可编辑。

我没有任何错误消息。我一无所知......

1 个答案:

答案 0 :(得分:0)

编辑器无法通过状态。所以我设置了一个布尔条件,等待componentDidMount。

import React from 'react';
import PropTypes from 'prop-types';
import { Form } from 'antd';
import { EditorState, ContentState } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import htmlToDraft from 'html-to-draftjs';

class Wysiwyg extends React.Component {
  constructor(props) {
    super(props);

    this.html = props.data;

    const contentBlock = typeof window !== 'undefined' ? htmlToDraft(this.html) : null;

    if(contentBlock) {
      const
        contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks),
        editorState = EditorState.createWithContent(contentState);

      this.state = {
        editorState: editorState,
        editor: null,
      };
    } else {
      this.state = {
        editorState: null,
        editor: null,
      };
    }

  }

  componentDidMount() {
    this.setState({
      editor: true,
    });
  }

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

  render() {
    const
      {
        props,
        state,
        onEditorStateChange,
      } = this,
      {
        form,
        fieldId,
      } = props,
      {
        editorState,
        editor,
      } = state,
      {
        getFieldDecorator,
      } = form;

    const fieldOptions = {
      initialValue: editorState,
    }

    return (
      <Form.Item
        hasFeedback
        label="DESCRIPTION"
      >
        {editor ? getFieldDecorator(fieldId, fieldOptions)(
          <Editor
            editorState={editorState}
            onEditorStateChange={onEditorStateChange}
          />
        ) : null}
      </Form.Item>
    );
  }
}

export default Wysiwyg;