Сбивается курсор в div contenteditable

173

01 июня 2019, 22:00

Ниже скрипт который работает как надо, он помогает мне вставлять элементы в div туда, где установлен курсор. А если курсора нет, то содержимое помещается в конец div.

Не удобно только то, что если я делаю клик вне области этого блока, то курсор слетает. Я ставлю курсор в нужное место, далее кликаю по значку, чтобы открылась область со смайлами и курсор слетает, смайл вставляется в конец текста в блоке. Если блок со смайлами зафиксирован и всегда виден, то можно установить курсор, кликнуть на смайла и он встанет где курсор, но это не решение для меня.

$(function() { 
  var content = document.querySelector('[data-target="insert"]'); 
 
  $('.icon-area a').on('click', function() { 
    $('.emoji-bar').addClass('hide'); 
    insertHTML($(this).html(), content); 
  }); 
}); 
 
function insertHTML(html, el) { 
  var sel, range; 
  if (window.getSelection) { 
    sel = window.getSelection(); 
    if (elementContainsSelection(el)) { 
      if (sel.getRangeAt && sel.rangeCount) { 
        range = sel.getRangeAt(0); 
        range.deleteContents(); 
        var el = document.createElement("div"); 
        el.innerHTML = html; 
        var frag = document.createDocumentFragment(), 
          node, lastNode; 
        while ((node = el.firstChild)) { 
          lastNode = frag.appendChild(node); 
        } 
        range.insertNode(frag); 
 
        if (lastNode) { 
          range = range.cloneRange(); 
          range.setStartAfter(lastNode); 
          range.collapse(false); 
          sel.removeAllRanges(); 
          sel.addRange(range); 
        } 
      } else if (document.selection && document.selection.type != "Control") { 
        document.selection.createRange().pasteHTML(html); 
      } 
    } else { 
      setEndOfContenteditable(el); 
      insertHTML(html, el); 
    } 
  } 
} 
 
function setEndOfContenteditable(contentEditableElement) { 
  var range, selection; 
  if (document.createRange) { 
    range = document.createRange(); 
    range.selectNodeContents(contentEditableElement); 
    range.collapse(false); 
    selection = window.getSelection(); 
    selection.removeAllRanges(); 
    selection.addRange(range); 
  } else if (document.selection) { 
    range = document.body.createTextRange(); 
    range.moveToElementText(contentEditableElement); 
    range.collapse(false); 
    range.select(); 
  } 
} 
 
function elementContainsSelection(el) { 
  var sel; 
  if (window.getSelection) { 
    sel = window.getSelection(); 
    if (sel.rangeCount > 0) { 
      for (var i = 0; i < sel.rangeCount; ++i) { 
        if (!isOrContains(sel.getRangeAt(i).commonAncestorContainer, el)) { 
          return false; 
        } 
      } 
      return true; 
    } 
  } else if ((sel = document.selection) && sel.type != "Control") { 
    return isOrContains(sel.createRange().parentElement(), el); 
  } 
  return false; 
} 
 
function isOrContains(node, container) { 
  while (node) { 
    if (node === container) { 
      return true; 
    } 
    node = node.parentNode; 
  } 
  return false; 
}