Javascript （IE6）在当前光标位置将内容插入iframe_Javascript_Iframe_Internet Explorer 6

Javascript （IE6）在当前光标位置将内容插入iframe

javascript iframe

Javascript （IE6）在当前光标位置将内容插入iframe,javascript,iframe,internet-explorer-6,Javascript,Iframe,Internet Explorer 6,我目前正在升级一个基于DHTML编辑器控件DEC的所见即所得富文本编辑器，以便在现代浏览器中使用更现代的编辑器控件。我使用的是打开设计模式的iFrame，它混合了常规javascript和jquery 我的要求之一是将html内容表单等插入iframe，以便用户可以编辑它们。我有它在FF+铬，但IE证明是一个痛苦的工作。我当前的代码在父文档的开头插入内容，而不是iframes，我使用的是selection.createRange函数，当与DEC一起使用时，如果控件被选中，将在光标处插入内容，如果

我目前正在升级一个基于DHTML编辑器控件DEC的所见即所得富文本编辑器，以便在现代浏览器中使用更现代的编辑器控件。我使用的是打开设计模式的iFrame，它混合了常规javascript和jquery

我的要求之一是将html内容表单等插入iframe，以便用户可以编辑它们。我有它在FF+铬，但IE证明是一个痛苦的工作。我当前的代码在父文档的开头插入内容，而不是iframes，我使用的是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>

使您的按钮不可选择，以阻止它从iframe划伤焦点。您可以在IE中使用unelective=on执行此操作：

我的哀悼；参考IE6support@RobertKoritnik-+1，请发表评论。特别是在IE6中尝试做一些像这样复杂的事情。当IE6是1浏览器时，这种控件从未存在过，这是有充分理由的。@Spudley:在IE6中支持这种东西与在IE8中支持它完全一样。IE在编辑方面领先一切已有5年之久。@TimDown:也许领先于自己…：@RobertKoritnik我听到你对IE6的支持，希望它能消失。我们正在转向IE8尖端，我很快就知道这是升级编辑器的主要原因，但仍然必须保持向后兼容性，哦，joy。感谢Tim，我不知道不可选择属性，它帮助我找到了一种使用可编辑div代替iframe的替代方法。

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