3

I want to develop a blog application with Django backend and React frontend. I shall be using Postgresql. I want to use a rich text editor like Quill to write the blog article. My questions:

  1. I heard that article written in a text editor needs to be converted to HTML before saving in the database. If so, how do I do this in Django Rest Framework?
  2. How do I present the article keeping the same style and formatting in the frontend from the database?
  3. Say, I include multiple photos in the article. How do I save all the photos in the database? i.e. what should be the schema then?

I want to have my doubts clear before I jump in.

2 Answers 2

7

I'm also doing the same thing at the moment. For your answers :

In DRF, the simplest way to post the data is by using Textfield in your model. Rich text field (with Tags) will be stored in the Postgres. In the Admin page or the DRF API you'll see something like this enter image description here

Then, to re-render it to the front end, you can use any HTML Parser library. for example I'm using "react-html-parser" that simply convert the rich text into the defined styling.

As for Image, this is a bit tricky, and I havent done this part myself but what i could think of right now is you would create another model & end points to store the images. when sending the post request to the django, you would convert the base file path/url from the front end to back end. example :

original > http://localhost:3000/image/efewf23r.jpg

new (django) > http://localhost:8000/media/img/img_model/efewf23r.jpg

then do a second post request to the image itself and make sure django would rename the the file as per what we set above.

Let me know if you found a better solution.

2
  • Thanks for reaching back. Since it's important to a beginner, I am posting as an answer.
    – forest
    Jan 22, 2021 at 16:49
  • Is it a proper approach? Oct 20, 2022 at 3:18
7

It's been long since I posted this question. After that, I have gained enough working knowledge to make Quill.js (the rich text editor I'm using) work with React.JS, or, in my case Next.JS. So, this is focused on Quill.js only. The Quill npm package more specific to ReactJS is react-quill. I am presenting it as beginner friendly as possible.

  1. A built-in function is provided with Quill: editor.getHTML(). editor is the current editor instance, where one types the content. This method generates the innerHtml of the content one prepares in the editor.

To save it to the databse, simply POST it to your back-end. But you must sanitize this innerHtml before passing it to the database. Can't say about server-side but I had to do this sanitization on the client-side. One good package is DOMPurify. You need to save this to the database if you want to present it in the same manner as it was typed in the browser.

  1. The first point also provides the solution to my 2nd question. But one important point: The content one writes in Quill editor is also available as a JSON like format called quill-delta. You can get the delta with the function editor.getContents(). You need to POST it to the database if you want to edit the content in a later time.

To edit, you need to get this delta from the database and then initialize Quill editor with this delta in the value attribute. For example, the text in orange is the delta representation of the text in the editor: editor example codepen source.

There is another function editor.getText() which extracts all the text from the editor.

  1. Photos. Generally in Quill, you simply put the photo in the editor and Quill generates a base64 encoded delta for the photo. It's this easy. You don't need to worry about separate image fields.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.