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 — draftjs.org/docs/api-reference-data-conversion.html — Nik
– Nik, Commented May 12, 2018 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
– Tushar Shahi, Commented Nov 5, 2021 at 10:12

Gautam Naik · Accepted Answer · 2018-05-12 15:20:17Z

5

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, 2018 at 15:20

Gautam Naik

9,4643 gold badges31 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

i.brod Over a year ago

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.

toolic · Accepted Answer · 2020-10-02 13:34:53Z

3

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')

edited Oct 2, 2020 at 13:34

toolic

62.9k21 gold badges81 silver badges130 bronze badges

answered Oct 2, 2020 at 12:35

N. Ahlers

4045 silver badges10 bronze badges

1 Comment

0NLY777 Over a year ago

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))

john k · Accepted Answer · 2025-10-16 20:24:42Z

Here's how I did it. Hope this helps.

import {
  ContentState,
  EditorState,
  convertFromHTML,
  Modifier
} from 'draft-js'  

const [editorState, setEditorState] = useState(EditorState.createEmpty())  

function insertWysiwygHtml(html) {
    //append html to existing state

    const currentContent = editorState.getCurrentContent();
    const currentSelection = editorState.getSelection();


    // //convert html to draft.js blocks
    const blocksFromHTML = convertFromHTML(html);
    const newBlock = ContentState.createFromBlockArray(blocksFromHTML.contentBlocks);

    const newContent = Modifier.replaceWithFragment(
      currentContent,
      currentSelection,
      newBlock.getBlockMap()
    );
    const newEditorState = EditorState.push(editorState, newContent, 'insert-fragment');
    setEditorState(EditorState.forceSelection(newEditorState, newContent.getSelectionAfter()));
}

Collectives™ on Stack Overflow

How to insert HTML in Draft.js?

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related