Question

我目前正在升级基于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>

Answer 1

使您的按钮无法选择，以阻止它从iframe中切出焦点。您可以使用uneselectable="on"：

在IE中执行此操作

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

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

1 个答案: