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!
Top comments (3)
This is the same solution I arrived at. Which makes me happy. :)
I hope you enjoy using Quill - I've found it great.
Hi Ian,
Thanks for the feedback! I definitely enjoy using Quill. In fact, I have a new project I'm working on with a React front-end and Rails back-end and I'm using Quill as my editor. I found out that the editor content from on change events return the raw HTML which makes PostgreSQL storage so easy and the code is simple. The only trick was to use html-react-parser to parse the HTML data.
Can you let us know how have you done in react with rails back-end while storing images and video-embed with quill, it will be really helpful as I am new to web development , it would be a great learning for me.
Thanks in advance