4

我认为这是一个非常常见的请求，但是，我找不到任何东西可以帮助我解决它。我已经尝试过各种插件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);
    }
}
4

2 回答 2

0

对于不同的版本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

于 2017-01-14T17:29:22.277 回答
0

我相信您可以使用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
);
于 2017-08-28T20:36:28.190 回答