자바 스크립트 : WYSIWYG 편집기에서 캐럿에 텍스트 붙여 넣기

Question

자바 스크립트에서 로프를 배우는 중 가장 문제가되는 문제 중 하나는 캐럿 위치를 이해하는 것입니다. 현재 wiki (http://t3chbox.wikia.com/wiki/MediaWiki:Wikia.js/referenceForm.js)에 대한 참조 양식을 작성 중이며 Wiki의 소스 코드 편집기에서 작동하지만 WYSIWYG 편집기 (Visual Editor)에서는 작동하지 않습니다. 여기에 누군가가 어떻게 캐럿 위치를 얻고 편집 내용이있는 iframe에 텍스트를 붙여 넣는 지 알고 있다면 궁금합니다.

WYSIWYG 편집기는 여기에서 볼 수 있습니다 : http://t3chbox.wikia.com/wiki/Test?action=edit (Wikia 계정이있는 사용자는 로그인하지 않고 Visual은 off로 설정). 나는이 콘텐츠를하고 캐럿에 붙여하려고 사용했던 방법은 이것이다 :

$(document.getElementById('cke_contents_wpTextbox1').getElementsByTagName('iframe')[0].contentDocument.body).insertAtCaret('hello'); 

감사합니다 :) 만 사용하는 insertAtCaret 기능은 텍스트 영역 및 입력 필드에서 사용할 수

Answer 1

JQuery와 . contentEditable 요소에서는 작동하지 않습니다. contentEditable 엘리먼트에 대해 캐럿에 삽입하기 위해이 jsfiddle를 살펴볼 수 있습니다. 이

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

       // Range.createContextualFragment() would be useful here but is 
       // non-standard and not supported in all browsers (IE9, for one) 
       var el = windo.document.createElement("div"); 
       el.innerHTML = html; 
       var frag = windo.document.createDocumentFragment(), node, lastNode; 
       while ((node = el.firstChild)) { 
        lastNode = frag.appendChild(node); 
       } 
       range.insertNode(frag); 

       // Preserve the selection 
       if (lastNode) { 
        range = range.cloneRange(); 
        range.setStartAfter(lastNode); 
        range.collapse(true); 
        sel.removeAllRanges(); 
        sel.addRange(range); 
       } 
      } 
     } else if (windo.document.selection && windo.document.selection.type != "Control") { 
      // IE < 9 
      windo.document.selection.createRange().pasteHTML(html); 
     } 
    } 

//usage 
    var iframeWindow = document.getElementById('cke_contents_wpTextbox1').getElementsByTagName('iframe')[0].contentWindow; 
    pasteHtmlAtCaret("Hello World!",iframeWindow); 

http://jsfiddle.net/jwvha/534/