Как визуализировать предоставленный HTML в черновом редакторе js? - PullRequest
Новая
       41

Как визуализировать предоставленный HTML в черновом редакторе js?

0 голосов
/ 07 ноября 2019

Я использую редактор draft.js для создания и обновления сообщений. Подскажите, пожалуйста, как визуализировать текст из HTML в редакторе draft.js. Я пытаюсь использовать renderHTML и получаю сообщение об ошибке

"editorState" не определен no-undef "

Без функции renderHTML я получаю HTML с тегами в редакторе,Подскажите пожалуйста, как настроить компонент для рендеринга "правильного HTML"?

Вот листинг: 

import React, { Component } from 'react';
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import { EditorState, getCurrentContent, getPlainText, ContentState } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import '../../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import { stateToHTML } from 'draft-js-export-html';
import gql from 'graphql-tag';
import { Mutation } from 'react-apollo';
import renderHTML from 'react-render-html';

const updateMutation = gql`
  mutation UpdateHeroMutation($id: ID!, $title: String!, $description: String!, $date: String!) {
  updateHero(heroUpdate: {_id: $id, title: $title, description: $description, date: $date}) {
    _id
    title
    description
    date
  }
}
`;

class Hero extends Component {
  constructor(props) {
    super(props);
    this.state = {
      title: '',
      setDate: new Date(),
      editorState: EditorState.createWithContent(ContentState.createFromText(renderHTML(props.data.description)))
    };
  }
  onChange(e) {
    this.setState({ title: e.target.value })
  }
  onChangeSelect(published) {
    this.setState({ setDate: published })
  }
  onEditorStateChange = (editorState) => {
    this.setState({
      editorState
    });
  }
  render() {
    return (
      <>
        <div className="label-section">Название:</div>
        <h5>
          <input name="title" id="title" type="text" defaultValue={this.props.data.title} onChange={e => this.onChange(e)} />
        </h5>
        <br />
        <div className="label-section">Дата публикации:</div>
        <DatePicker
          id="published"
          name="published"
          defaultValue=""
          selected={this.state.setDate}
          onChange={published => this.onChangeSelect(published)}
        />
        <div className="label-section">Редактировать текст:</div>
        <Editor
          editorState={this.state.editorState}
          wrapperClassName="demo-wrapper"
          editorClassName="demo-editor"
          onEditorStateChange={this.onEditorStateChange}
        />
        <input type="text" className="hidden" defaultValue={this.props.data._id} />
        <Mutation mutation={updateMutation} variables={{ id: this.props.data._id, title: this.state.title, description: stateToHTML(this.state.editorState.getCurrentContent()), date: this.state.setDate }}>
          {updateHero => (
            <button onClick={updateHero} type="submit">OK</button>
          )}
        </Mutation>
      </>
    );
  }
}

export default Hero;

Буду очень признателен за любую помощь!

1 Ответ

1 голос
/ 07 ноября 2019

Попробуйте использовать draft-js-import-html вместо response-render-html 

import React, { Component } from 'react'
import { EditorState } from 'draft-js'
import { stateFromHTML } from 'draft-js-import-html'

class Hero extends Component {
    ...
    constructor(props) {
        this.state = {
            editorState: EditorState.createWithContent(stateFromHTML(props.data.description))
        }
    }
    ...
}
...