Creo que esta es una solicitud muy común, pero aún así, no puedo encontrar nada que me ayude a resolverla. Probé varios complementos como draft-js-import-html y variaciones, pero parece que nunca funcionan completamente, especialmente cuando agrega una imagen o incrusta un video.
Aquí hay una muestra de HTML que me gustaría usar en el editor:
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>'; Tiene algunos h1 básicos, bold , ... así como una imagen y un iframe y un iframe con un envoltorio para que el video responda.
Lo que me gustaría es tener un editor draft-js donde pueda poner HTML (como arriba) y al cambiar me devuelva HTML.
Entonces, si empiezo con esto, ¿cómo puedo darle HTML y recuperar 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); } }Para diferentes versiones de draft.js es diferente, aquí está la opción para draft.js 0.10.0 . Para una salida normal, por ejemplo, las imágenes deben describirse para el editor en cada caso. Esto se hace usando CompositeDecorator . Aquí hay un ejemplo de github draft.js
https://github.com/facebook/draft-js/blob/master/examples/draft-0-10-0/convertFromHTML/convert.html
Creo que puedes usar 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 );