在插入位置插入文本到可编辑的IFRAME（IE）

我正在努力解决一个实际上直截了当的问题：在Internet Explorer中，我想在当前插入位置插入纯文本。这对于简单的TEXTAREA元素来说确实很好，但它并不完全适用于我可以编辑的IFRAME。在插入位置插入文本到可编辑的IFRAME（IE）

在我使用的脚本中，我从IFRAME的文档中创建一个TextRange对象，我使用它将HTML文本粘贴到光标位置。

<iframe id="editable"> 
    <html> 
    <body> 
     Some really boring text. 
    </body> 
    </html> 
</iframe> 
<script type="text/javascript"> 

    window.onload = function() { 
     var iframe = document.getElementById('editable'); 
     var doc = iframe.contentDocument || iframe.contentWindow.document; 

     doc.body.innerHTML = iframe.textContent || iframe.innerHTML; 

     // Make IFRAME editable 
     if (doc.body.contentEditable) { 
      doc.body.contentEditable = true; 
     } 
    } 

    function insert(text) { 
     var iframe = document.getElementById('editable'); 
     var doc = iframe.contentDocument || iframe.contentWindow.document; 
     iframe.focus(); 
     if(typeof doc.selection != 'undefined') { 
      var range = doc.selection.createRange(); 
      range.pasteHTML(text); 
     } 
} 
</script> 
<input type="button" value="Insert" onClick="insert('foo');"/>

当我在IFRAME中选择一些文本时，选择将被替换为“foo” - 这是预期的行为。但是当我在文本中的某处插入插入符号时，插入将无法使用。

这是一种常见的行为，因为我只是将光标放在某处，或者它是IE中可编辑IFRAME的错误，因为它对于简单的TEXTAREA元素来说工作得很好，所以“没有真正的选择”？

是否有解决方法？

来源

2011-03-17 Andreas Pasch

我有[非常相同的问题]（http://stackoverflow.com/questions/5104102/paste-into-iframe-at-caret-position）。它必须是可能的，因为wordpress这样做。 – Alex 2011-03-17 11:59:33

如果您在按钮中使用onmousedown而不是onclick，则可能发现它可行。

UPDATE

之所以这样使一个不同之处在于在iframe后click事件触发已失去焦点（其破坏了IE折叠选择）而在此之前mousedown火灾。

进一步更新

您也可以尝试通过保存/恢复所选的TextRange作为IFRAME失去在IE修复这个/接收焦点。这样的事情应该工作：

function fixIframeCaret(iframe) { 
    if (iframe.attachEvent) { 
     var selectedRange = null; 
     iframe.attachEvent("onbeforedeactivate", function() { 
      var sel = iframe.contentWindow.document.selection; 
      if (sel.type != "None") { 
       selectedRange = sel.createRange(); 
      } 
     }); 
     iframe.contentWindow.attachEvent("onfocus", function() { 
      if (selectedRange) { 
       selectedRange.select(); 
      } 
     }); 
    } 
} 

window.onload = function() { 
    var iframe = document.getElementById('editable'); 
    fixIframeCaret(iframe); 
};

来源

2011-03-17 12:17:38

这似乎并没有工作[http://jsfiddle.net/FjZY6/](http://jsfiddle.net/FjZY6/）。我对此有着既得利益，所以也非常希望看到解决方案。 – Alex 2011-03-17 12:23:37

适用于我。但说实话，我不明白为什么这会起作用，它不会帮助我，因为在我的应用程序中插入实际上不是从按钮触发的，而是来自Sencha GXT网格组件。为什么这个工作？ “onmousedown”和“onclick”之间有什么区别？ – 2011-03-17 12:40:24

它是否适合您使用我在jsfiddle中发布的代码？ – Alex 2011-03-17 12:50:29

在插入位置插入文本到可编辑的IFRAME（IE）

回答

相关问题