Working with tinyMCE extension

[arenaninja]

Hey all. I installed tinyMCE recently and it works on my website, but I'm trying to add a piece of code to toggle read/edit. Here's the relevant documentation for the toggle script:

function TinyMCEReadOnlySetup(EdInst, HideBars)
/*
* EdInst                                The instance of the editor that is to
*                                       be extended with the capability to
*                                       toggle readonly mode.
*
* HideBars                              A boolean that, if true, indicates that
*                                       the tool bars and/or status bar should
*                                       also be hidden when readonly mode is
*                                       set.  The default, if omitted is true.
*
* This function will add a method named switchReadOnly to the tinymce.Editor
* class for the instance of the editor passed in EdInst.  Calling
* switchReadOnly will cause readonly mode to be switched on/off.  If HideBars
* is true, when this function is called, the call to switchReadOnly will also
* cause the tool bars/status bar to be hidden/unhidden when readonly mode is
* switched on/off.
*
* Typically, this function would be used at startup time to extend TinyMCE so
* that readonly mode could be switched for all editor instances.  For example:
*
*      tinyMCE.init(
*        {
*             .
*             .
*             .
*        setup : function(ed) { TinyMCEReadOnlySetup(ed, true); },
*             .
*             .
*             .
*        });
*
* Note that the initial, readonly state of the editors being set up in this
* manner is irrelevant.  The editor must be initialized as editable for
* toggling to work but this routine takes care of that detail so the readonly
* flag may still be used in tinyMCE.init.
*
* If you wish to set up an individual editor, after the fact, the readonly
* flag must not be set to true during tinyMCE.init.  If it is omitted or set to
* false, you may call this routine as follows:
*
*      TinyMCEReadOnlySetup(tinyMCE.get('TextArea1'), true);
*
* Once an instance of the editor has been initialized with this extension, a
* new method named switchReadOnly is added to the editor instance.  You may
* call it something like this:
*
*      EdInst = tinyMCE.get('TextArea1');
*      EdInst.switchReadOnly(true);
*
* If you already have the editor instance variable, there's no need to look it
* up.  And, the single parameter passed to switchReadOnly is a boolean which
* indicates, if true, that the editor instance should be made readonly.  If it
* is false, the editor instance is made editable.  The toolbars and/or status
* bar will be hidden/unhidden depending on the value that was passed to
* TinyMCEReadOnlySetup on the setup call.
*
* If you'd like to start with all instances of TinyMCE set to readonly and
* enable them depending on which one the user clicks on, you can do something
* like this:
*
*      tinyMCE.init(
*        {
*             .
*             .
*             .
*        handle_event_callback : "ReadonlyFocus",
*             .
*             .
*             .
*        });
*           .
*           .
*           .
*      function ReadonlyFocus(ev, ed)
*      {
*      if (ed.settings.readonly) { ed.switchReadOnly(false); }
*      return (true);
*      }

The last part of the documentation is exactly the functionality I'm looking for: initialize all instances to readonly and enable them to be editable only when I click a button (or the instance, or w/e) so my script for tinyMCE initialization and extension looks like:

        <script type="text/javascript">
        function ReadonlyFocus(ev, ed)
        {
            if (ed.settings.readonly) { ed.switchReadOnly(false); }
            return (true);
        }

        tinyMCE.init({
            // General options
            mode : "textareas",
            theme : "advanced",
            plugins : "autolink,lists,spellchecker,pagebreak,layer,table,save,advhr,advlink,iespell,inlinepopups,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",

            // Theme options
            theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,forecolor,backcolor,|,justifyleft,justifycenter,justifyright,justifyfull,|fontselect,fontsizeselect",
            theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink",
            theme_advanced_buttons3 : "hr,removeformat,|,sub,sup,|,charmap,iespell,spellchecker,media|,print,preview",
            theme_advanced_toolbar_location : "bottom",
            theme_advanced_toolbar_align : "center",
            theme_advanced_statusbar_location : "top",
            theme_advanced_resizing : true,
            setup : function(ed) { TinyMCEReadOnlySetup(ed, true);},
            handle_event_callback : "ReadonlyFocus"});
        tinyMCE.init({
            mode : "textareas", theme : "advanced", readonly : true});
        </script>

Now my issue is that I'm so new to javascript that I have no idea how to call this functionality from within my page. Currently, I've tried the following:

        <form action=<?php echo $_SERVER['PHP_SELF']; ?> method="post">
            <textarea rows="10" cols="125" name="permnews">
                <?php echo $content; ?>
            </textarea>

            <p id="editWrap"><input type="button" value="Edit" onclick="toggleElements('editWrap','editableWrap')"></p>
            <p id="editableWrap">
                <a href="#" onclick="tinyMCE.execCommand('switchReadOnly','permnews',true);">Read</a>
                <a href="javascript:tinyMCE.execCommand('switchReadOnly','permnews',false);">Edit</a>
            </p>
        </form>

but, of course, it doesn't work. Could someone kindly describe what I'm doing wrong? I'm confused by all the new scripting around me, and I'm reading a book but I must be braindead by now because nothing makes sense anymore