javascript - html in と html out でドラフト js を使用する

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, ... だけでなく、画像、iframe、およびビデオをレスポンシブにするラッパー付きの iframe があります。

私が望むのは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);
    }
}