(IE6) 在当前光标位置将内容插入 iframe答案

【问题标题】：(IE6) insert content into iframe at current cursor position(IE6) 在当前光标位置将内容插入 iframe
【发布时间】：2011-10-11 21:48:08
【问题描述】：

我目前正在升级基于 DHTML 编辑器控件 (DEC) 的 WYSIWYG 富文本编辑器，以便在现代浏览器中使用更现代的编辑器控件。我正在使用打开设计模式的 iFrame，并混合使用常规 javascript 和 jquery。

我的要求之一是将 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>

【问题讨论】：

我的哀悼... ;) 指的是 IE6 支持
@RobertKoritnik - 为您的评论 +1。特别是尝试在 IE6 中做这样复杂的事情。当 IE6 是排名第一的浏览器时，这种控件从未存在过，这是有充分理由的。
@Spudley：在 IE 6 中支持这些东西与在 IE 8 中支持它完全一样。在编辑方面，IE 领先了大约 5 年。
@TimDown: 可能超前了... :)
@RobertKoritnik 我听说你支持 IE6，希望它会消失。我们很快就会迁移到 IE8（我知道是最先进的），这是升级编辑器的主要原因，但仍然必须保持向后兼容性，哦，高兴。

标签： javascript iframe internet-explorer-6

【解决方案1】：

使您的按钮无法选择以阻止它从 iframe 中删除焦点。你可以在 IE 中使用uneselectable="on"：

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

【讨论】：

感谢 Tim，我不知道 unselectable 属性，帮助我找到了一种使用可编辑 div 代替 iframe 的替代方法。