0

When I insert into the editor along with the html images, for example:

import React, { PropTypes, Component } from 'react'
import ReactDOM from 'react-dom'
import {Editor, EditorState} from 'draft-js'

var sampleMarkup = `<h1>Hello</h1><b>Bold text</b><i> Italic text</i>
    <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 {
    constructor(props){
      super(props);
      this.state = { editorState:EditorState.createWithContent(html);     }
    }
    render(){
      return (
         <Editor editorState={this.state.editor} onChange={this.onChange.bind(this)}/>
        );
    }    
    onChange(editorState){
        this.setState({editorState: editorState});
        this.props.onChange(html);
    }
}

The editor does not insert tag img, and carves iframe. Why the draft.js is doing and how to fix it? Full Code on codepen: http://codepen.io/alex183/pen/xgVzZE?editors=0010

alex10
  • 2,726
  • 3
  • 22
  • 35
  • 1
    `EditorState.createWithContent` transforms your HTML into React components. There's a second optional `decorator?: DraftDecoratorType` parameter where you need to define how Draft is supposed to transform your HTML into components (https://facebook.github.io/draft-js/docs/advanced-topics-decorators.html#content). By default it converts some common HTML tags but it completely ignores images, links, iframes and other tags. Here (https://github.com/draft-js-plugins/draft-js-plugins/issues/583) is a way to do it for links. You can adapt that code for images and iframes too. – Sergiu Paraschiv Jan 12 '17 at 13:45
  • I have not seen not one example anywhere in the editor you can copy the picture. I was able to copy the link, and also managed to insert a picture using input but it is impossible to insert a picture via html or copy to the editor using ctrl+c and ctrl+v. Link on full code: http://codepen.io/alex183/pen/xgVzZE?editors=0010 – alex10 Jan 12 '17 at 14:29
  • 1
    If you implement images like you did for links then copy-pasting them should work too. – Sergiu Paraschiv Jan 12 '17 at 14:31
  • I added in the decorator information about the pictures, and updated the code on `codepen` but unfortunately pictures are not displayed ( – alex10 Jan 12 '17 at 15:52
  • You are getting an `Uncaught Error: Unknown DraftEntity key.` exception. Read this: https://github.com/facebook/draft-js/issues/250 – Sergiu Paraschiv Jan 12 '17 at 15:59
  • I read, but I don't understand where can I get `DraftEntity key` for `Entity.get(???).getType().startsWith('media')` – alex10 Jan 12 '17 at 16:57
  • I did `console.log` once `convertFromHTML` and there was not enough pictures. therefore, no decorator will not help. – alex10 Jan 12 '17 at 18:59

0 Answers0