Home/ Questions/Q 6663139
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T02:27:58+00:00

I’m currently upgrading a WYSIWYG Rich Text Editor that was based on the DHTML

  • 0

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 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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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();">
    • 0