내부에 HTML을 삽입 할 때 SPAN을 분할 할 때

Question

서식이 지정된 HTML (머리말과 단락을 포함)이 많은 위치에 - contenteditable div 안에 모두 설정되어 있습니다. 버튼을 클릭하면 편집 가능한 div에 <newnote>을 삽입하는 기능을 설정했습니다. 이것은 스팬의 내부에 노트를 삽입 할 때 스팬을 두 개로 나누고 그 사이에 <newnote>을 배치해야한다는 점을 제외하고는 훌륭하게 작동합니다.

DIV에 텍스트를 삽입하기 위해 웹에서 많은 기능을 보았습니다. HTML을 삽입해야하는 요구 사항이기 때문에 document.createTextNode()이 유일한 선택입니다.

여기까지 제가 설정 한 내용입니다. 부모가 SPAN인지 확인한 다음 해당 if 문을 기반으로 다른 콘텐츠를 배치합니다.

function insertNodeAtRange() { 
    var newRange = rangy.getSelection().getRangeAt(0); 
    var parentElement = newRange.commonAncestorContainer; 
    if (parentElement.nodeType == 3) { 
     parentElement = parentElement.parentNode; 
    } 
    var el = document.createElement('newnote'); 
    el.className = "bold"; 
    if (parentElement.tagName == 'SPAN') { 
     el.appendChild(document.createTextNode(" </span>Test<span> ")); 
    } else { 
     el.appendChild(document.createTextNode(" Test ")); 
    } 
    newRange.insertNode(el); 
} 

Here is what I have sofar

어떤 도움에 미리 감사드립니다

...

Answer 1

코드의 주된 문제는 텍스트 노드를 작성하여 HTML을 수정/만들려고 노력하고 있다는 점이다. 텍스트 노드는 DOM으로 파싱되지 않습니다.

이 당신을 위해 작동합니다 :

JSFiddle 난 그냥 나서서 바로 newnote 요소를 삽입

function insertNodeAtRange() { 
    var newRange = rangy.getSelection().getRangeAt(0); 
    var parentElement = newRange.commonAncestorContainer; 
    if (parentElement.nodeType == 3) { 
     parentElement = parentElement.parentNode; 
    } 
    var el = document.createElement('newnote'); 
    el.className = "bold"; 
    el.appendChild(document.createTextNode(" Test ")); 
    newRange.insertNode(el); 
    if (parentElement.tagName == 'SPAN') { 
     var $newnote = $(el); 
     var $span1 = $("<span>"); 
     var $span2 = $("<span>"); 
     var left = true; 
     $parentElement = $(parentElement); 
     $parentElement.contents().each(function (i, node) { 
      if (node.isSameNode(el)) { 
       left = false; 
      } else if (left) { 
       $span1.append(node); 
      } else { 
       $span2.append(node); 
      } 
     }); 
     $parentElement.replaceWith($newnote); 
     $span1.insertBefore($newnote); 
     $span2.insertAfter($newnote); 
    } 
} 

가, 그 전에 물건을 가지고와 span1에 넣어, 후 물건을 가지고 그것을 span2에 넣고, 기존의 span을 newnote로 대체하고, newnote 주위에 새로운 span을 위치시킵니다.