我认为这是一个非常非常常见的请求,但是,我找不到任何可以帮助我解决它的东西。我尝试了各种插件,如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);
}
}
对于不同版本的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
我相信你可以使用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
);