3

I want to import or paste a simple html-fragment with class-name attributes, so that the classes are parsed and active within the Draft.js editor. This parsing and setting of the class-name should be independent of the html-tag type, e.g. <div>, <span>, <b>, <strong> etc.

At first, I thought this would be a standard question in connection with draft.js, however I did not find any answer to this on the net, that is why I state my question here.

I'm stuck with this:

I see, that the correct html-code is pasted, when I use this simple handlePastedText function:

    handlePastedText(text, html){
      console.log(html);
      return false;
    }

    // one <span class="blau">simple</span> test

with this draft-js Editor:

    <Editor readOnly={this.state.readOnly} 
            editorState={this.state.editorState} 
            onChange={this.onChange}
            handlePastedText={this.handlePastedText.bind(this)}/>

However, the corresponding draft-js editor state does not know the class, and thus it is not formated accordingly in the Browser. The EditorState is:

    {"entityMap":{},
     "blocks":[{ "key":"9fqpj","text":"one simple test",
                 "type":"unstyled",
                 "depth":0,
                 "inlineStyleRanges":[],
                 "entityRanges":[],
                 "data":{}}]}

resuting to this html source:

     <span data-text="true">one simple test</span>

I'm curious to know it there is a elegant and simple solution to this problem. Simply to import classNames into the Draft.js editor? Maybe I see it from a wrong persepective, but I think this would be beneficial to a wider audience, as you could easily handle, paste and format segments with any (outer) style within any Draft.js conetentEditable Editor.

Thank you in advance!

Matze Bär
  • 31
  • 3

0 Answers0