（IE6）将内容插入当前光标位置处的iframe

我目前正在升级基于DHTML编辑器控件（DEC）的WYSIWYG富文本编辑器，以使用现代浏览器中更现代的编辑器控件。我正在使用打开设计模式的iFrame，以及常规javascript和jquery的混合。（IE6）将内容插入当前光标位置处的iframe

我的一个要求是将html内容（表单等）插入到iframe中，以便用户可以编辑它们。我已经在FF + Chrome上工作了，但IE正在证明一个痛苦。我当前的代码将内容插入到父文档的起始位置，而不是iframe，我使用的selection.createRange（）函数与DEC一起使用时，如果选择了控件或在如果不是，则在编辑器内的文档末尾。

目前它只适用于我在IE中选择一些文本。下面是我当前的代码（道歉，如果它看起来没有格式化防火墙工作阻止了很多来自stackoverflow的css + js），有什么想法？

<html> 
<head> 
    <title>Text Editor Test</title> 
    <style type="text/css"> 
     .toolbar {background-color:#BFC193;width:500px;padding:5px;}  
     #insertForm {position: absolute;height:60px;width:200px;top:50px;left:50px;border:1pt solid black;background-color:#fff;padding:10px;}   
    </style> 
</head> 

<body> 
    <h1>MSHTML Text Editor</h1> 
    <form id="frmEdit"> 
    <div class="toolbar" id="toolbar"> 
     <input type="button" name="insertHTML" value="insert html" onClick="showForm();"/> 
    </div>  

    <div id="insertForm" style="display:none;"> 
     Insert Content Form 
     <input type="button" value="OK" style="width: 80px" onClick="insertContent();"> 
    </div> 

    <script type="text/javascript" src="jquery-1.6.4.js"></script> 

    <script type="text/javascript"> 
     // functions to execute once the DOM has loaded.  
     $(document).ready(function() { 
      pageInit();       
     }); 

     function pageInit() { 
      // create iframe   
      $('.toolbar').after("<iframe id='frameEdit' style='width:500px; height:400px' ></iframe>"); 

      //insert delay for firefox + webkit browsers before turning on designMode open + close seems to do the job 
      document.getElementById('frameEdit').contentWindow.document.open(); 
      document.getElementById('frameEdit').contentWindow.document.close(); 

      document.getElementById('frameEdit').contentWindow.document.designMode='On';  
     } 

     function showForm() { 
      $('#insertForm').toggle(); 
     }  

     function insertContent() { 
      // turn off form 
      showForm(); 
      // set test content 
      var htmlContent = "<p>Insert Test</p>"; 

      var doc = document.getElementById('frameEdit').contentWindow.document; 
      if (doc.selection && doc.selection.createRange) { // IE 
       var range = doc.selection.createRange();  
       range.pasteHTML(htmlContent); 
      } else { // FF 
       doc.execCommand('insertHTML', false, htmlContent); 
      } 
     }  
    </script> 
    </form> 
</body> 
</html>

来源

2011-10-11 Mike

我的哀悼...;）*指的是IE6的支持* –

@RobertKoritnik - +1的评论。特别是试图在IE6中做这样复杂的事情。当IE6是＃1浏览器时，这种控制从来不存在的原因有很好的理由。 – Spudley

@Spudley：在IE 6中支持这个东西与在IE 8中支持它完全一样。在编辑时，IE在5年前都领先于其他任何东西。 –

让你的按钮无法选择，以阻止它从iframe切出焦点。您可以使用uneselectable="on"在IE中做到这一点：

<input type="button" value="OK" unselectable="on" 
    style="width: 80px" onclick="insertContent();">

来源

2011-10-11 13:48:08

谢谢蒂姆，我没有意识到不可选择的属性，帮助我找到了一种替代方法，使用可编辑div代替iframe。 – Mike

（IE6）将内容插入当前光标位置处的iframe

回答

相关问题