Сделать Draft.js Html в тег div с правильной разметкой? - PullRequest
Новая
       13

Сделать Draft.js Html в тег div с правильной разметкой?

0 голосов
/ 04 марта 2019

Я смотрю на использование draft.js , и мне интересно, как я могу иметь редактор, и в то время как кто-то печатает результаты будут отображаться в виде HTML, но с фактической разметкой (т. е. если я выделю жирным шрифтом, вывод будет выделен жирным шрифтом).

У меня возникли проблемы при получении этой работы.Я попытался dangerouslySetInnerHTML, но это не сработало. 

  <div dangerouslySetInnerHTML={{ __html: this.state.editorContentHtml }}></div>


import React from "react";
import { Editor, EditorState } from "draft-js";
import { stateToHTML } from "draft-js-export-html";

class ExampleEditor1 extends React.Component {
  constructor(props) {
    super(props);
    this.state = { editorState: EditorState.createEmpty() };
    this.onChange = editorState => {
      this.setState({
        editorState,
        editorContentHtml: stateToHTML(editorState.getCurrentContent())
      });
    };
  }

  render() {
    return (
      <div>
        <div className="editor-container" style={{ border: "1px solid #000" }}>
          <Editor
            editorState={this.state.editorState}
            onChange={this.onChange}
          />
        </div>
        <h4>Editor content as HTML</h4>
        <div>{this.state.editorContentHtml}</div>

      </div>
    );
  }
}

export default ExampleEditor1;

1 Ответ

0 голосов
/ 08 марта 2019

Я еще не использовал draft-js-export-html пакет, и я ленивый.Поэтому я не указываю причину, по которой ваш код не работал.

Но следующий код должен выполнить задачу: 

import React, { Component } from 'react';
import { Editor, EditorState } from 'draft-js';

const styles = {
  editor: {
    border: "1px solid gray",
    display: "block",
    minHeight: "15em"
  }
};

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      editorState: EditorState.createEmpty(),
      preview: null
    };

    this.onChange = editorState => this.setState({
      editorState,
      preview: editorState.getCurrentContent().getPlainText()
    });

    this.setEditor = ref => {
      this.editor = ref;
    };
    this.focusEditor = () => {
      if (this.editor) {
        this.editor.focus();
      }
    };
  }

  render() {
    return (
      <React.Fragment>
        <div style={styles.editor} onClick={this.focusEditor}>
          <Editor
            ref={this.setEditor}
            editorState={this.state.editorState}
            onChange={this.onChange}
          />
        </div>
        <div
          style={{ minHeight: "200px" }}
          dangerouslySetInnerHTML={{ __html: this.state.preview }}
        />
      </React.Fragment>
    );
  }
}

export default App;
...