0

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

如果我不等待componentDidMount()直接把Editor放到render()中，内容是可编辑的，但是从SSR直接加载时，工具栏的下拉菜单不会生成，因为react-draft-wysiwyg.Editor使用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;

编辑器内容不可编辑。

我没有任何错误信息。我一无所知……

4

1 回答 1

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;
于 2019-06-07T14:09:20.643 回答