Невозможно редактировать текст в редакторе Reaction-draft-wysiwyg, загруженном в componentDidMount - PullRequest
Новая
       30

Невозможно редактировать текст в редакторе Reaction-draft-wysiwyg, загруженном в componentDidMount

0 голосов
/ 05 июня 2019

Я использую реагирующий проект-wysiwyg.Editor в моем проекте React / Redux с SSR. Редактор использует DOM для создания выпадающих панелей инструментов, поэтому, чтобы избежать проблем с SSR, я создаю Редактор в componentDidMount. Компонент отображается правильно, контент может быть выбран, но невозможно редактировать любой контент.

Если я не буду ждать componentDidMount () и помещу непосредственно Editor в render (), содержимое будет редактируемым, но при прямой загрузке из SSR выпадающие списки панели инструментов не генерируются из-заact-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 голосов
/ 07 июня 2019

Редактор не может пройти через состояние.Поэтому я установил логическое условие в ожидании 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;
...