Редактор Quill - невозможно установить данные по щелчку

Я использую редактор перьев и внутри модального окна начальной загрузки, и он отлично работает при вставке данных в атрибут data- * в форме JSON.

Так в чем проблема :

Проблема в том, что когда я пытался установить данные в редакторе quill с помощью 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. Осмотрите динамический элемент. Вы увидите атрибут data-text с данными quill json.
  6. Теперь нажмите на динамический элемент, он открывает модальное окно, теперь возникает проблема, он не устанавливает значение содержимого, которое он извлекает из атрибута data- * формы.

javascript json twitter-bootstrap quill
person Owaiz Yusufi    schedule 13.04.2019    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Уловка заключалась в преобразовании строки 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>

person Matt Oestreich    schedule 13.04.2019
comment
Большое спасибо. Ты спасаешь меня - person Owaiz Yusufi; 13.04.2019
comment
Рад помочь вам - person Matt Oestreich; 13.04.2019