羽毛筆編輯器-無法設置點擊數據

Question

我正在使用羽毛筆編輯器並在引導程序模式內使用它，並且在以JSON形式將數據插入data- *屬性中時工作正常

所以有什么問題 ：

問題是，當我嘗試使用setContent api在主軸編輯器中設置數據時，它不起作用

/*
        ====================
            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'
    });

這是我的jsfiddle （在使用前請閱讀以下說明）

如何使用我的小提琴：

1. 單擊添加元素按鈕。
2. 在主軸編輯器中輸入任何內容
3. 點擊保存更改按鈕。
4. 現在您將看到一個使用js動態添加的元素
5. 檢查動態元素。 您將看到帶有羽毛筆json數據的data-text屬性。
6. 現在，單擊“動態元素”，它會打開模態，現在出現問題，它沒有設置正在獲取表單data- *屬性的內容值。

Answer 1

訣竅是將JSON字符串轉換回JSON對象：

---

從這里開始 ： var dataText = $(this).attr('data-text');

為此 ： var dataText = JSON.parse($(this).attr('data-text'));

---

更新小提琴

---

 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>