How to build a text editor(in react) that allows one to create blog posts and store/save them into the database(mongodb)?

George Marwanqana 0
Viewed 38

I'm trying to build some sort of rich text editor for my web app. It will be used to create blog posts that will be saved to the database, so that users can view.

My solution was using form and . The would be where I can store the title of the blog post, and in the textarea, the writer of the post would be able to write the article/contents of the blog post. But, as you know, a blog post sometimes contains images...and you cannot create/use images.

So I came across npm packages that allow you to create/import richtext editors(like ckeditor). But my problem was, how do you take the rich text data and save it to the database? And make the data display in the browser when the user wants to view a specific blog post?

I'm open any other suggestions on how I could implements the 'create blog posts' feature in my app.

reactjs express mongodb node.js javascript
1 Answers

Integrate Text Editor for react, I suggest you to use following libraries

1) https://draftjs.org/docs/getting-started
2) https://www.npmjs.com/package/react-draft-wysiwyg
3) https://www.npmjs.com/package/draftjs-to-html
4) https://blog.logrocket.com/building-rich-text-editors-in-react-using-draft-js-and-react-draft-wysiwyg/
5)Then you have to convert content to raw (using convertToRaw) then save that json data to db.And for display that html, you have convert raw content to html (using draftjs-to-html module) and set that html content by dangerouslySetInnerHTML in div or any tag in reactjs
userYaY210
Related