[JQUERY] 의 contentEditable 사업부에 캐럿에 HTML을 삽입

의 contentEditable 사업부에 캐럿에 HTML을 삽입

해결법

1. ---

   1.대부분의 브라우저에서, 당신은 당신이 선택에서 얻을 Range의 insertNode () 메서드를 사용할 수 있습니다. 당신이 언급 한 바와 같이 IE <9에서는, pasteHTML ()를 사용할 수 있습니다. 다음은 모든 주요 브라우저에서이 작업을 수행 할 수있는 기능입니다. 내용이 이미 선택되어있는 경우이 효율적으로 붙여 넣기 작업 그래서, 그것은 대체됩니다. 또한, 나는 삽입 된 내용의 종료 후 캐럿을 배치하는 코드를 추가했습니다.

   대부분의 브라우저에서, 당신은 당신이 선택에서 얻을 Range의 insertNode () 메서드를 사용할 수 있습니다. 당신이 언급 한 바와 같이 IE <9에서는, pasteHTML ()를 사용할 수 있습니다. 다음은 모든 주요 브라우저에서이 작업을 수행 할 수있는 기능입니다. 내용이 이미 선택되어있는 경우이 효율적으로 붙여 넣기 작업 그래서, 그것은 대체됩니다. 또한, 나는 삽입 된 내용의 종료 후 캐럿을 배치하는 코드를 추가했습니다.

   jsFiddle : http://jsfiddle.net/jwvha/1/

   암호:

   function pasteHtmlAtCaret(html) {
       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);
               }
               range.insertNode(frag);
   
               // Preserve the selection
               if (lastNode) {
                   range = range.cloneRange();
                   range.setStartAfter(lastNode);
                   range.collapse(true);
                   sel.removeAllRanges();
                   sel.addRange(range);
               }
           }
       } else if (document.selection && document.selection.type != "Control") {
           // IE < 9
           document.selection.createRange().pasteHTML(html);
       }
   }
   

   UPDATE 2013년 8월 21일

   코멘트에 요청으로, 여기에 지정 여부가 삽입 된 컨텐츠를 선택하는 것을 추가 매개 변수와 함께 업데이트 된 예이다.

   데모 : http://jsfiddle.net/timdown/jwvha/527/

   암호:

   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);
           sel.createRange().pasteHTML(html);
           if (selectPastedContent) {
               range = sel.createRange();
               range.setEndPoint("StartToStart", originalRange);
               range.select();
           }
       }
   }
   

2. ---

   2.

   var doc = document.getElementById("your_iframe").contentWindow.document;
   
   // IE <= 10
   if (document.selection){
       var range = doc.selection.createRange();
           range.pasteHTML("<b>Some bold text</b>");
   
   // IE 11 && Firefox, Opera .....
   }else if(document.getSelection){
       var range = doc.getSelection().getRangeAt(0);
       var nnode = doc.createElement("b");
       range.surroundContents(nnode);
       nnode.innerHTML = "Some bold text";
   };
   

3. ---

   3.빨리 읽고 희망에 의해 주제 오프가 아니라, 여기에 나 같은, 필요 사업부의 커서 수준에서 코드를 삽입 할 수있는, 사람들을위한 트랙이다 :

   빨리 읽고 희망에 의해 주제 오프가 아니라, 여기에 나 같은, 필요 사업부의 커서 수준에서 코드를 삽입 할 수있는, 사람들을위한 트랙이다 :

   document.getElementById('editeur').contentWindow.document.execCommand('insertHTML', false, '<br />');
   

   '편집기'iframe이 있습니다 :

   <iframe id="editeur" src="contenu_editeur_wysiwyg.php">
   </iframe>
   

   contenu_editeur_wysiwyg.php :

   <html>
   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   </head>
   <body>
   <div>
   </div>
   </body>
   </html>
   

   잊지 마세요 :

   document.getElementById('editeur').contentDocument.designMode = "on";
   

4. ---

   4.

   var r = getSelection().getRangeAt(0);
   r.insertNode(r.createContextualFragment('<b>Hello</b>'));
   
   //select this range
   getSelection().removeAllRanges();
   getSelection().addRange(r);
   //collapse to end/start 
   getSelection().collapseToEnd() 
   

from https://stackoverflow.com/questions/6690752/insert-html-at-caret-in-a-contenteditable-div by cc-by-sa and MIT license