（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

回答

相關問題