Добавить содержимое в позиции каретки внутри редактируемого содержимого div по нажатию кнопки - PullRequest
Новая
       18

Добавить содержимое в позиции каретки внутри редактируемого содержимого div по нажатию кнопки

0 голосов
/ 28 июня 2018

Я пытаюсь добавить содержимое в поле содержимого в точке курсора, используя функцию нажатия кнопки и java-сценария, оно добавляется в поле, но если я щелкаю где-то снаружи и снова нажимаю кнопку, оно добавляет содержимое внутри кнопки. Как я могу ограничить функцию добавления контента только в контент div. Ниже приведен HTML & CSS: 

var heading = '<span style="color:#0091DA; margin-bottom:30px; font-family:Arial, Helvetica, sans-serif; font-weight: bold; font-size:14px; line-height:120%;">Subheadings in Arial Bold 10.5pt (14px) light blue</span>';

function pasteHtmlAtCaret(html, selectPastedContent) {
  var sel, range;
  if (window.getSelection) {
    // IE9 and non-IE
    sel = window.getSelection();
    if (sel.getRangeAt && sel.rangeCount) {
      range = sel.getRangeAt(0);
      range.deleteContents();

      // Range.createContextualFragment() would be useful here but is
      // only relatively recently standardized and is not supported in
      // some browsers (IE9, for one)
      var el = document.createElement("div");
      el.innerHTML = html;
      var frag = document.createDocumentFragment(),
        node, lastNode;
      while ((node = el.firstChild)) {
        lastNode = frag.appendChild(node);
      }
      
      var firstNode = frag.firstChild;
      range.insertNode(frag);

      // Preserve the selection
      if (lastNode) {
        range = range.cloneRange();
        range.setStartAfter(lastNode);
        if (selectPastedContent) {
          range.setStartBefore(firstNode);
        } else {
          range.collapse(true);
        }
        
        sel.removeAllRanges();
        sel.addRange(range);
      }
    }
  } else if ((sel = document.selection) && sel.type != "Control") {
    // IE < 9
    var originalRange = sel.createRange();
    originalRange.collapse(true);
    if (document.getElementById('edit-content')[0].getAttribute("contenteditable", "true")) {
      sel.createRange().pasteHTML(html);
    }
  }
}
.main {
  border: 1px solid #000;
  width: 500px;
  height: 500px;
}

.content {
  border: 1px solid #f00;
  width: 300px;
  height: 100px;
  margin: 180px auto;
  position: relative;
}
<div class="main">
  <div class="content" id="edit-content" contenteditable="true">
    Type your text here
  </div>
</div>

<button class="temp-title" id="add_heading1" onclick="pasteHtmlAtCaret(heading);">Heading</button>
...