Как установить позицию каретки в контентной форме с дочерними узлами?

Question

У меня есть этот код (он не является правильным, но это дает представление):

function setCaret(contentEditable, pos) { 
    if (contentEditable.hasChildNodes()) { 
     var 
      nodes = contentEditable.childNodes, 
      pos2 = 0, 
      cpt = 0, 
      nb = nodes.length, 
      node; 

     for (cpt; cpt < nb && pos2 < pos; cpt++) { 
      node = nodes[cpt]; 
      if (node.nodeType === 3) { 
       pos2 += node.length; 
      } else { 
       pos2 += node.textContent.length; 
      } 
     } 

     var textNode; 
     if (pos2 <= pos) { 
      textNode = contentEditable.childNodes[cpt]; 
      pos = pos - pos2; 
     } else { 
      textNode = contentEditable.childNodes[cpt-1]; 
     } 

     var range = document.createRange(); 
     range.setStart(textNode, pos); 
     range.setEnd(textNode, pos); 
     var sel = window.getSelection(); 
     sel.removeAllRanges(); 
     sel.addRange(range); 
    } 
} 

Идея заключается в том, чтобы найти позицию хорошего узла, основанного на данной позиции.

Пример (труба каретка):

Некоторые ** полужирный ** | текст.

• множество позиций = 14
• 5 узлов [#text, Ь, #text, б, #text]
• узел с кареткой (индекс узлов) =
• старт положение для узла 4: 13
• 14 - 13 =

range.setStart (узлы [4], 1);

Как работать с моим кодом во всех случаях (только для javascript (без библиотеки), IE необязательно)? Возможно, существует более простое решение?

(JSFiddle тест: https://jsfiddle.net/mg4mm528/)

Answer 1

С помощью ExecCommand вы можете достичь своей цели.

document.execCommand ('bold', false, null); 

https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand