How can I initialise Quill on a textarea in a dynamically added div by Cocoon?

[siddhartharun]

I'm using Cocoon to create a nested form. Cocoon offers the following method when the div is added to the DOM:

cocoon:after-insert

How might I initialise Quill on a textarea in the dynamic nested form?

[abhinavmathur]

Make sure that the cocoon containers have the class "quill_container"
Since the divs are dynamically added, we would need to reinitialize the Quill instances. One way to do this by calling the following in the cocoon:after-insert block

Quilljs.loadDefaults();

One issue that might develop with this method is that it might create a Quill editor container on top of another initialized editor. You might need to destroy and reinitialize those containers every time you insert a new cocoon container.

Pseudo code:

• Select all the containers (most likely they have a ql-editor class) on after-insert
• destroy all the containers on after-insert
• Make sure each container has the class 'quill_container'
• Reinitialize all containers with Quilljs.loadDefaults();