Использование проекта js с html in и html out

Question

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

Вот пример HTML То, что я хотел бы использовать в редакторе:

var sampleMarkup = '<h1>Hello there</h1>' + 
    '<b>Bold text</b>, <i>Italic text</i>, <u>Underline text</u><br/ ><br />' + 
    '<a href="http://www.facebook.com">Example link</a>' + 
    '<img src="http://vignette1.wikia.nocookie.net/elderscrolls/images/6/64/Imga.jpg/revision/latest?cb=20110501053300" />' + 
    '<p>Hello there</p>' + 
    '<div class="responsive"><iframe width="560" height="315" src="https://www.youtube.com/embed/POrFPyHGKyw" frameborder="0" allowfullscreen></iframe></div>'; 

Он имеет некоторые основные h1, bold, ... а также изображения и фрейм и фрейм с оберткой чтобы сделать видеочувствительным.

Что бы я хотел, так это иметь редактор draft-js, где я могу поместить HTML (как и выше) и поменять, возвращает мне HTML.

Так что, если я начну с этого, как я могу дать ему HTML и вернуть HTML?

import React, { PropTypes, Component } from 'react' 
import ReactDOM from 'react-dom' 
import {Editor, EditorState} from 'draft-js' 

var sampleMarkup = '<h1>Hello there</h1>' + 
    '<b>Bold text</b>, <i>Italic text</i>, <u>Underline text</u><br/ ><br />' + 
    '<a href="http://www.facebook.com">Example link</a>' + 
    '<img src="./someImg.png" />' + 
    '<p>Hello there</p>' + 
    '<div class="responsive"><iframe width="560" height="315" src="youtube/link/here" frameborder="0" allowfullscreen></iframe></div>'; 

class MyEditor extends Component { 
    static propTypes = { 
     html: PropTypes.string, 
     onChange: PropTypes.func 
    } 
    constructor(props){ 
     super(props); 
     // TODO: Convert HTML to state somehow using props.html 
     this.state = { 
      editorState: EditorState.createWithContent(html); 
     } 
    } 
    render(){ 
     return (
      <Editor 
       editorState={this.state.editor} 
       onChange={this._onChange.bind(this)} 
        /> 
     ); 
    }  
    _onChange(editorState){ 
     this.setState({editorState: editorState}); 
     // Convert state to html somehow here 
     this.props.onChange(html); 
    } 
} 

Answer 1

Для различных версий draft.js отличается, вот вариант для draft.js 0.10.0. Для нормального вывода, например, изображения должны описываться редактору в каждом случае. Это делается с использованием CompositeDecorator. Вот пример GitHub draft.js

https://github.com/facebook/draft-js/blob/master/examples/draft-0-10-0/convertFromHTML/convert.html

Answer 2

Я считаю, что вы можете использовать draftjs-to-html.

import { convertToRaw } from 'draft-js'; 
import draftToHtml from 'draftjs-to-html'; 

const rawContentState = convertToRaw(editorState.getCurrentContent()); 

const markup = draftToHtml(
    contentState, 
    hashtagConfig, 
    directional, 
    customEntityTransform 
);