Quill Editor - unable to set data on click

Question

I am using quill editor and inside the bootstrap modal and its work fine while inserting the data in data-* attribute in the form of JSON

So what's the problem :

The problem is when I tried to set the data in the quill editor using setContent api it does not work

/*
        ====================
            Quill Editor
        ====================
    */

    var quill = new Quill('#editor-container', {
      modules: {
        toolbar: [
          [{ header: [1, 2, false] }],
          ['bold', 'italic', 'underline'],
          ['image', 'code-block']
        ]
      },
      placeholder: 'Compose an epic...',
      theme: 'snow'  // or 'bubble'
    });

Here is my jsfiddle ( before using this read the instruction below )

How to use my fiddle:

1. Click on the add element button.
2. Type anything inside the quill editor
3. Hit the save change button.
4. Now you will see an element prepend dynamically using js
5. Inspect the Dynamic Element. You will see the data-text attribute with quill json data.
6. Now, Click on the Dynamic Element it opens the modal now the problem occurs it does not set the content value that it is fetching form data-* attribute.

Answer 1

The trick was converting the JSON string back into a JSON object:

---

From this : var dataText = $(this).attr('data-text');

To this : var dataText = JSON.parse($(this).attr('data-text'));

---

Updated Fiddle

---

 var quill = new Quill('#editor-container', { modules: { toolbar: [ [{ header: [1, 2, false] }], ['bold', 'italic', 'underline'], ['image', 'code-block'] ] }, placeholder: 'Compose an epic...', theme: 'snow' }); function modalclick() { $(".dynamic-element").on('click', function(event) { var dataText = JSON.parse($(this).attr('data-text')); $('#exampleModalLong').modal('show'); quill.setContents(dataText); console.log(dataText); }) } $("#addElement").on('click', function(event) { var delta = quill.getContents(); var $_textDelta = JSON.stringify(delta); console.log($_textDelta); $html = "<div class='dynamic-element' data-text='" + $_textDelta + "'>" + "<div>dynamic-element</div>" + "</div>"; $(".element").prepend($html); modalclick(); $('#exampleModalLong').modal('hide'); }) //modalclick(); $("#openmodal").on('click', function(event) { $('#exampleModalLong').modal('show'); }) $('#exampleModalLong').on('hidden.bs.modal', function(e) { quill.deleteText(0, 2000); }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet"/> <!-- Button trigger modal --> <input type="button" id="openmodal" class="btn btn-info btn-rounded mb-4" value="Add element"> <div class="element"> </div> <!-- Modal --> <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <div id="editor-container"> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" id="addElement" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>