Using Quill editor with Javascript and Rails API backend

Recently, I have been putting together code for my Javascript/Rails portfolio project. During my coding, I realized I wanted to have a rich text editor for my user’s experience. Rails has ActionText built-in, but after some reading, I realized that there was no good way to implement this if I was to use Rails as an API backend.
This is where the Quill rich text editor comes in. I don’t know if I’m the only one that came across issues in implementing this, but I would like to share my journey if in case someone else ran into this issue as well. So after following the quick start documentation provided by Quill, I had to build a form, so my code looked like this:

After building the form, I had to store the contents into the database. There wasn’t as much documentation on the website that showed how this was to be done. I started off by finding some articles like this one that explains that you should store it by taking the quill instance and saving it to the database as shown below

Quill’s contents are stored in a format called Delta. This means that when storing then retrieving this from the database, you need to then convert the stringified Delta back into an object.
At least for me, the problem with this method was the part where I used JSON.stringify to store the contents into my PostgreSQL database. Once I retrieved it from the database, I needed to use JSON.parse to convert this back to an object like below:

quill.setContents(JSON.parse(“{“ops”:[{“insert”:”example text\n”}]}”))

The problem was that JSON.parse would not convert it back to an object. If you read the Delta documentation it tells you that you can stringify and then parse the data. That did not happen for me. This became very troublesome. For my project, I not only wanted to submit and retrieve the contents from the database, I also needed to edit the form. After some digging, I realized I could simply store this line of code stringified into the database:

Topic.quill.root.innerHTML

I would store this into my topic.content JSON object like so:

By doing this, I was finally able to store the raw HTML into the database and retrieve it! Also, I found out for the edit form, all I needed to do was pre-populate the editor form after retrieving it from the database

document.getElementsByClassName(‘ql-editor’)[0].innerHTML = topic.content

This solved a lot of headaches for me and I hope this was helpful. Happy coding!