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!