Textarea embedded in Iframe Becomes Uneditable with designMode = On
===

As you can see, below I have two functions that are intended to make text bold: **doRichEditCommand()**, and **SetToBold()**. 

My goal is, first, to get **doRichEditCommand()** to work in the *textarea* embedded in the *iframe* because it works on all major browsers flawlessly, and then to get **execCommand** functions like **SetToBold()** to work, because I'm unsure of them being cross-browser when in an *iframe*. 

For the first function to work, I've enabled **designMode**. However, with it enabled the *textarea* becomes uneditable.  

How can I modify the below code so my functions will work within a *textarea* embedded in an *iframe*?

Thanks in advance for your help.


    
    <html>
    <head>
    <script type="text/javascript">

    function getIFrameDocument(aID){
    // if contentDocument exists, W3C compliant (Mozilla)
    if (document.getElementById(aID).contentDocument){
    return document.getElementById(aID).contentDocument;
    } else {
    // IE
    return document.frames[aID].document;
     }
    }

    function load(){
    getIFrameDocument("editorWindow").designMode = "On";
    }

    function doRichEditCommand(aName, aArg){
    getIFrameDocument('editorWindow').execCommand(aName,false, aArg);
    document.getElementById('editorWindow').contentWindow.focus()
    } 

    function SetToBold () {
            document.execCommand ('bold', false, null);
        }
    </script>
    </head>
    <body onload="load()">
      <iframe id="editorWindow" src="you.php"></iframe>
      <button onclick="doRichEditCommand('bold')" style="font-weight:bold;">B</button>
      <button onclick="SetToBold();">Bold</button>
    </body>
    </html>

P.S. I haven't included "you.php" because it's just the necessary tags and a textarea. 