Javascript 使用带有html输入和html输出的草稿js
我认为这是一个非常常见的请求,但我找不到任何东西来帮助我解决它。我尝试过各种插件,比如Javascript 使用带有html输入和html输出的草稿js,javascript,reactjs,draftjs,Javascript,Reactjs,Draftjs,我认为这是一个非常常见的请求,但我找不到任何东西来帮助我解决它。我尝试过各种插件,比如draft js import html和各种变体,但它们似乎从未完全起作用,特别是在添加图像或嵌入视频时 下面是我想在编辑器中使用的HTML示例: var sampleMarkup = '<h1>Hello there</h1>' + '<b>Bold text</b>, <i>Italic text</i>, <u>
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>';
对于不同版本的
draft.js
,这里是draft.js 0.10.0
的选项。
对于正常输出,例如图像需要在每种情况下向编辑器描述。这是使用复合编辑器
完成的。
下面是githubdraft.js
我相信你可以用
你怎么解决的?我也有同样的问题。我只想处理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);
}
}
import { convertToRaw } from 'draft-js';
import draftToHtml from 'draftjs-to-html';
const rawContentState = convertToRaw(editorState.getCurrentContent());
const markup = draftToHtml(
contentState,
hashtagConfig,
directional,
customEntityTransform
);