..only what you need is change id of your text area!
I hope it will help someone, cheers!

<script type="text/javascript">
  var tinyMCEmode = true; 
  function toggleEditorMode(editor, link) { 
    try { 
      if(tinyMCEmode) { 
        tinyMCE.execCommand( 'mceRemoveControl', false, editor );
        tinyMCEmode = false; 
        link.innerHTML = 'Edit with textarea';
      } else { 
        tinyMCE.execCommand( 'mceAddControl', true, editor );
        tinyMCEmode = true; 
        link.innerHTML = 'Edit with TinyMCE';
      } 
    } catch(e) { 
      //error handling 
    } 
  }
</script>

Then call with:

<button onclick="toggleEditorMode('Editor', this)">Edit with textarea</button>

or

<a href="#" onclick="toggleEditorMode('Editor', this)">Edit with textarea</a>

function unlockKlasik() {
     $('klasikeditor').style.visibility = 'visible';
}

So it makes this button visible after tinyMCE is loaded;

However, if user is fast to click on it (which toggles editor like in official examples), it gives such error...

tinymce.getBody() is null

or another error is
h is undefined (in tinymce.js)

How to fix those?

Here's the javascript:

function showMCE(id,linkObj) {
    if (tinyMCE.getInstanceById(id) == null) {
        linkObj.innerHTML = "Advanced";
        tinyMCE.mode = "specific_textareas";
        tinyMCE.execCommand('mceAddControl', false, id);
    }
    else {
        linkObj.innerHTML = "Show Editor";
        tinyMCE.execCommand('mceRemoveControl', false, id);
    }
}

tinyMCE.init({
    // General options
    mode: "none",
    editor_selector: "mceEditor",
    theme : "advanced",
    relative_url : true,
    document_base_url : "http://xxx.xxx.xxx.xxx/",
    plugins : "safari,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,imagemanager,filemanager",
    cleanup : false,
    verify_html : false,
    apply_source_formatting : false,
    forced_root_block : false,
    force_br_newlines : true,
    force_p_newlines : false,
   

    // Theme options
    theme_advanced_buttons1 : "newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
    theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
    theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
    theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom",
    theme_advanced_resizing : true,

    // Example content CSS (should be your site CSS)
    content_css : "css/example.css",

     external_image_list_url : "image_list.php"
   
});

And the href for enabling TinyMCE is:
<a href=# onClick=showMCE('HomepageLinkDisplay',this);>Show Editor</a>

The line

mode: "none",

in the init is what makes it disabled at first and then the line

tinyMCE.mode = "specific_textareas";

in the showMCE function is what turns it on.

Again, thanks for all the posts in this thread.

Rick

Bill

var hideTiny = function(id,textLink)
{
    if(tinyMCE.get(id).isHidden())
    {
        tinyMCE.get(id).show();
        textLink.innerHTML = '[Hide]';        
    } else {
        tinyMCE.get(id).hide();
        textLink.innerHTML = '[Show]';                
    }
}

<a href="javascript:;" onmousedown="hideTiny('elm1',this);">[Hide]</a>

However, when the page loads tinymce starts - I want to disable the editor by DEFAULT and only enable it if the "toggle editor" link is clicked.

Taking this code I tried it but it didn't work:
<code>
var tinyMCEmode = true;
    function toogleEditorMode(sEditorID) {
        try {
            if(tinyMCEmode) {
                tinyMCE.execCommand("mceRemoveControl", false, sEditorID);
                tinyMCEmode = false;
            } else {
                tinyMCE.execCommand("mceAddControl", false, sEditorID);
                tinyMCEmode = true;

                    tinyMCE.init({
                    //..........
                    //..........

            }
        } catch(e) {
            //error handling
        }
    }
</code>

Quick question (and I did do a search before hand but couldn't find anything). When I do a mceRemoveControl on my edited div I end up with an extra input tag - <input id=txtarea type=hidden name=txtarea>. The div I was editing has an id=txtarea as well. Is there a reason for this, I can't help but feel that having 2 elements with the same id is bad and my gut instinct tells me that I should locate and remove this after doing the mceRemoveControl.

Personally I wanted the functionality of being able to turn every textarea in the document into a TinyMCE instance or back by having a graphic as a "button" (usnign its onclick event) next to the textarea, and I wanted that automated so that I didn't have to do anything; additionally, I wanted this only if JavaScript was activated, because otherwise the editors wouldn't work anyway, so  the "buttons" should be created script-wise, too. Sure, adds to the page's setup overhead, but hey, only for people with JavaScript anyway...

Here is what to do. First you need to add something to the configuration:

tinyMCE.init({ 
  ...
  mode : 'none',
  ...
  oninit : 'createToggleButtons'
});

The "oninit" part denominates a function that is called after the initial page setup of TinyMCE (see in the http://wiki.moxiecode.com/index.php/Tin … ion/oninit).

The function that is called is this one:

function createToggleButtons()
{
  var textareas = document.getElementById('maincontent');
  if(!textareas) return false;
  textareas = textareas.getElementsByTagName('textarea');
  for(var i = 0; i < textareas.length; ++i){
    var img_element     = document.createElement('img');
    img_element.src     = 'path/to/img.png';
    img_element.alt     = 'Turn editor mode on/off';
    img_element.onclick = toggleTinyMCE;
    textareas.parentNode.insertBefore(img_element, textareas);
  }
}

It provides all textareas that are descendants of the element with the id "maincontent" with an image whose onclick event handler is set to a function toggleTinyMCE(). If you want it more general, make the first three lines into this:

textareas = document.getElementsByTagName('textarea');

Make sure to provide sensible contents for the src and alt attributes of the image :-)

Finally the event handler function, toggleTinyMCE():

function toggleTinyMCE(event)
{
  var editor_button = event.target;
  var editor_id = editor_button.nextSibling.id;

  if(typeof(editor_button['curTinyMCE_element']) == 'undefined')
    editor_button.curTinyMCE_element = false;

  if(editor_button.curTinyMCE_element) {
    tinyMCE.removeMCEControl(tinyMCE.getEditorId(editor_id));
    editor_button.curTinyMCE_element = false;
  } else {
    tinyMCE.addMCEControl(editor_button.nextSibling, editor_id);
    editor_button.curTinyMCE_element = true;
  }
}

That is pretty much it.

You can easily put all the code including the initialization code into one file.