How to insert HTML in Draft.js?

Question

I'm using react-draft-wysiwyg editor, which is built on top of Draft.js. I'm trying to figure out, how to programmatically insert HTML, like:

<h1>Hey</h1>

So far, the closest thing i got is using the insertText() method of the Modifier module. Example:

insert = ()=>{
  const editorState = this.state.editorState;

  const selection = editorState.getSelection();

  const contentState = editorState.getCurrentContent();

  const ncs = Modifier.insertText(contentState, selection, "<h1>Hey</h1>",);

  const es = EditorState.push(editorState, ncs, 'insert-fragment');

  this.setState({editorState: es})
}

This results in a literal string being inserted, not an HTML H1 element.

How can it be done?

Draft-js doesn't work with html, but you always can convert data from html to ContentState — https://draftjs.org/docs/api-reference-data-conversion.html — Nik, May 12 '18 at 15:15
Hey. Any updates on this? I want to add a button to toolbar which adds custom HTML to the content. Any clue? — Tushar Shahi, Nov 05 '21 at 10:12

score 4 · Answer 1 · answered May 12 '18 at 15:20

4

In the react-draft-wysiwyg editor plugin docs here, at the end, it is mention, that, use HTML To DraftJS library for converting plain HTML to DraftJS Editor content.

Its a plugin made to work with react-draft-wysiwyg editor.

Link to Plugin here

import { EditorState, ContentState } from 'draft-js';
import htmlToDraft from 'html-to-draftjs';

const blocksFromHtml = htmlToDraft(this.props.content);
const { contentBlocks, entityMap } = blocksFromHtml;
const contentState = ContentState.createFromBlockArray(contentBlocks, entityMap);
const editorState = EditorState.createWithContent(contentState);

answered May 12 '18 at 15:20

Gautam Naik

8,990
3
27
42

10

From what i understand, this plugin provides a tool to convert HTML to draft js state, but i'm looking for a way to just insert a specific element into the location of the cursor, inside the editor. Basically, what every out-of-the-box wysiwyg editor provides. For example, Froala editor has a method called html.insert(). I mean, react-draft-wysiwyg editor can insert an image or a video, so it must be using some method like that. – i.brod May 12 '18 at 22:42

score 3 · Answer 2 · edited Oct 02 '20 at 13:34

I found a solution to the problem:

You can indeed use the "html-to-draftjs" library. Just use the "instert-fragment" and get the BlockMap of a temporary ContentState like the following:

import htmlToDraft from 'html-to-draftjs';
import { ContentState, EditorState, Modifier } from 'draft-js';

const data = "<h3>Dear member!</h3><p>This is a <b>TEST</b></p>"

let { contentBlocks, entityMap } = htmlToDraft(data);
let contentState = Modifier.replaceWithFragment(
   editorState.getCurrentContent(),
   editorState.getSelection(),
   ContentState.createFromBlockArray(contentBlocks, entityMap).getBlockMap()
 )

EditorState.push(editorState, contentState, 'insert-fragment')

Thanks for this. I couldn't get it to work pushing into the EditorState like this but if anyone else is having issues I got it to work by setting it directly...setEditorState(EditorState.createWithContent(contentState)) — 0NLY777, Nov 12 '21 at 14:15

How to insert HTML in Draft.js?

2 Answers2