jQuery UI，将文本拖放到文本编辑器内的光标位置

Question

我想让用户将变量从提供的列表拖到Quill文本编辑器中以自定义他们的电子邮件。使用textarea时此方法有效，但我似乎无法使其与Quill文本编辑器一起使用。

var quill = new Quill('#editor', {
  theme: 'bubble'
});

$(function() {
  $("#allfields li").draggable({
    appendTo: "body",
    helper: "clone",
    cursor: "select",
    revert: "invalid"
  });
  initDroppable($("#TextArea1"));

  function initDroppable($elements) {
    $elements.droppable({
      hoverClass: "textarea",
      accept: ":not(.ui-sortable-helper)",
      drop: function(event, ui) {
        var $this = $(this);

        var tempid = ui.draggable.text();
        var dropText;
        dropText = tempid;

      }
    });
  }
});

.editor_container {
  width: 100%;
  margin: 50px 0 0 0;
  display: inline-block;
}

#editor {
  background-color: #002b36;
  color: #93a1a1;
  width: 45%;
  height: 400px;
  float: left;
}

#preview {
  width: 45%;
  height: 400px;
  float: left;
  padding: 10px;
  border: solid 1px #ccc;
  margin: 0 0 0 5%;
}

#allfields li:hover {
  cursor: pointer;
}

<link rel="stylesheet" href="//cdn.quilljs.com/1.3.6/quill.bubble.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link href="https://cdn.quilljs.com/1.1.6/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.1.6/quill.js"></script>

<!--jquery UI--->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>

<div class="editor_container">
  <div id="editor">
    <h1>Dear {{name}},</h1>
    <p>
      This is to notify you that you have passed {{threshold_percent_Value}}% on your {{product}} Mobile Data Bundle
    </p>
    <p>
      Note that once your limit is reached, you might be capped and may not be able to connect. <br>
      <p>Regards,<br>{{ company_name }}</p>
  </div>
  <div id="preview">
    <div class="dragitems">
      <h3>
        <span>Available Fields</span></h3>
      <ul id="allfields" runat="server">
        <li id="node1">{{Name}}</li>
        <li id="node2">{{Address}}</li>
        <li id="node3">{{product}}</li>
        <li id="node11">{{Other4}}</li>
        <li id="node12">{{Other5}}</li>
      </ul>
    </div>
  </div>
</div>

这里是jsFiddle