Quill Rich Text Editor

Purpose:

Sometimes, clients may require us to provide a panel which can allow them to input some information in admin side. After that, we will display that input data in user side with the proper format.

But, they might frequently contact us for the changes of content or styling.

If the input UI we provided for them is powerful enough, things will get easier. They can input the content with styling by themselves. Then, in our part, we just display that formatted content to the user side. That is the win-win situation. We save our time, and clients get more control for the content input.


Quill is free and open source. And it has well-down documentations. It is easy to use it.


Let’s take a look for a simple implementation to know how to get the content of quill editor and set it back.


1. First, initialize quill




2. Then the quill rich text area will be generated with the theme “snow”.



3. If we input something and format it through toolbars, then we can see the special format of quill to understand how quill handle it.






4. Actually, we can convert it to string format and store it to our database




5. Then, if we want to display it to quill editor, we just convert it back to object and use quill API to set it to the editor’s content. Then, magic is happened.




6. In the end, you can see that the stored formatted context can be displayed properly on quill editor.