(IE6) insert content into iframe at current cursor position_问答_开发者

(IE6) insert content into iframe at current cursor position

开发者 https://www.devze.com 2023-04-12 10:28 出处：网络

I\'m currently upgrading a WYSIWYG Rich Text Editor that was based on the DHTML Editor Control (DEC) to use the more modern editor controls in modern browsers. I\'m using an iFrame with design mode tu

I'm currently upgrading a WYSIWYG Rich Text Editor that was based on the DHTML Editor Control (DEC) to use the more modern editor controls in modern browsers. I'm using an iFrame with design mode turned on and a mixture of regular javascript and jquery.

One of my requirements is to insert html content (forms etc) into the iframe so that users can edit them. I have it working in FF + Chrome, but IE is proving a pain. My current code inserts the content at the start of the parent document and not the iframes, I'm using the selection.createRange() function that when used with DEC would insert the content either at the cursor if the control was selected or at the end of the document inside the editor if not.

Currently it only works when I select some text in IE. Heres my current code (apologies if it looks unformatted the firewall at work is blocking a lot of the css + js from stackoverflow), any ideas?

<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 Co开发者_C百科ntent 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>

Make your button unselectable to stop it nicking the focus from the iframe. You can do this in IE using uneselectable="on":

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

(IE6) insert content into iframe at current cursor position

精彩评论

关注公众号

热门标签

图文推荐

(IE6) insert content into iframe at current cursor position

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：