For that you should read a post I wrote on How to store Draft.js content. HTML works well for displaying purposes but if you want to store your editor content for a later use, HTML is not the ideal way to do it. I added also another example with an editor that has some rich text editing features to the codesandbox. I created a codesandbox for the example above so you can test it out by yourself. This was a clean and easy way to convert the contents of the editor to HTML. We used stateToHTML function from draft-js-export-html library to generate HTML out of a ContentState object. Since the generating of the HTML is done in the onChange handler, we can see the updated HTML as we make changes to the editor.
We display the generated HTML in the render method on line 27. Then in the line 12 in the onChange handler we generate the HTML version of the ContentState and save it to the component’s state. So first we import stateToHTML from draft-js-export-html. The conversion from ContentState to HTML is done in the onChange handler in line 12 (if you are not familiar with getCurrentContent() function, it returns ContentState object from an EditorState object).Įnter fullscreen mode Exit fullscreen mode In the example below, we have plain Draft editor and we display its contents as HTML below the editor. I like to use draft-js-export-html.ĭraft-js-export-html provides stateToHTML method that generates HTML representation for given ContentState object. There is a bunch of options to choose from. Instead we need to use a different library for that. What this means is that Draft.js does not provide utilities for converting the editor content to HTML. We instead provide JavaScript objects that can be converted to other formats as needed.”. Best part is that you can get it for free! Read more.ĭraft.js docs state the following: “Note that the Draft library does not currently provide utilities to convert to and from markdown or markup, since different clients may have different requirements for these formats. I just published a class where I teach more about Draft.js. In this post we will learn how to do just that, by converting our editor state to HTML that can be displayed without Draft.js editor. It can be little unclear though what you should do when you want to display your editor content as plain HTML. Draft.js is a great way to implement rich text editors with React.
0 kommentar(er)
