i got same problems ..
just have 2 textarie which have their own Id  but the funtion work not well  ( the one copy from http://www.rorlach.de/mediawiki/index.p … le_TinyMCE  )
if i toogle the fist textarie to hide or show editer  then affter i toogle the second one then it make one more textarie .. ( i got 3 now).  tthis funtion only work good if I return the fist textare back to same conditon of the second one ( same show or hide editer ) then i can make the second textarier change status ..
sorry my english..
please advice mee
thank
:::::::::::::::

the editer used on this web  www.xaluan.com news services ..

thank it realy work great; but i still prefer the way text link chage when i click on this .. tryed to put it in your new code but not success.. any one can corect me please :

            <script language=\"javascript\" type=\"text/javascript\">
           
                function toggleEditor(id, eleToggleLink) {
                    var elm = document.getElementById(id);
                    var elmlink = document.getElementById(eleToggleLink);
                   
                    if (tinyMCE.getInstanceById(id) == null)
                        tinyMCE.execCommand('mceAddControl', false, id);
                                elmlink.innerHTML    =    \" [ Hide Editor ] \";
                    else
                        tinyMCE.execCommand('mceRemoveControl', false, id);
                            elmlink.innerHTML    =    \" [ Show Editor ] \";

                }

            </script>

---------------
this is small code in my php script:
        echo "<br><b>"._STORYTEXT."</b><a id=\"toggleLinkhometext\" href=\"javascript:toggleEditor('hometext', 'toggleLinkhometext'); \" title=\"toggle TinyMCE\"> [ Hide Editor ]</a><br>"
        ."<textarea wrap=\"virtual\" cols=\"100\" rows=\"15\" id=\"hometext\" name=\"hometext\"></textarea><br><br>"
        ."<b>"._EXTENDEDTEXT."</b><a id=\"toggleLinkbodytext\" href=\"javascript:toggleEditor('bodytext', 'toggleLinkbodytext');\" title=\"toggle TinyMCE\"> [ Hide Editor ]</a><br>";   //this use for enable editer
        echo "<textarea wrap=\"virtual\" cols=\"100\" rows=\"15\" id=\"bodytext\" name=\"bodytext\"></textarea><br>";

notice that not work if i add the eleToggleLink
i do not know maybe i'm wrong some where .??
-- tested it on www.xaluan.com -- submit viet nam news
any help
regards

Last edited by binhaus (2006-08-23 05:40:12)

I don't want to exhaust this topic to death, but here's a simple and pretty elegant solution:

function showMCE(id,linkObj) {
    if (tinyMCE.getInstanceById(id) == null) {
        linkObj.innerHTML = "hide editor";
        tinyMCE.execCommand('mceAddControl', false, id);
    }
    else {
        linkObj.innerHTML = "show editor";
        tinyMCE.execCommand('mceRemoveControl', false, id);
    }
}

It has to be called this way:

<a href=# onClick=showMCE('myFineEditor',this);>edit</a>

... where "myFineEditor" is the ID of the div or such that you wish to make editable.

The beauty here is calling the showMCE -function with a "this" -reference back to the link. This way there is no need to give the "show/hide editor" -link any ID, nor to pass it to the function.

On the negative side, you can't use a normal <a href=javascript:> -solution, since the "this" keyword doesn't work in that context.

On another note, this line has been tossed around in almost all previous examples:

var elm = document.getElementById(id);

And this "elm" is never used for anything, so I assume this is a remainder from some previous method and could be discarded?

Thanks for the awesome idea of changing the "show editor" -text. It's a small thing, but it really make a lot of positive difference.

url not correct?

Okay, I hope I am not duplicating too much info...

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.

test. TEST. Test...

Yes Even I have a requirement that all the html added by tinyMCE should be removed when I disable the tineMCE.
Could any body help me please

I was wondering if you could apply this code to toggle it on and off in the b2evolution plugin. It is different and I can't seem to find any of the files needed. Is there an easy way to modify the b2evolution plugin so you can toggle it. It would save me having to go into the plugins page and manually disabling it. I can add a link on the write a post page but I'm unsure what code to edit.

Mr Administrator: A question and excusme because I'm new in tinymce and for my inglish: Can I add buttons dinamically in tinymce???, for example with an array? and why not?
Thank you!!!

This thread has been extremely helpful to me, so I'll post my solution that incorporates a couple of the posts and addresses the question of how to get the text area to NOT be TinyMCE enable when loaded.

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

Just my simple experience. To remove the editor on a page that has only one tinyMce instance : tinyMCE.activeEditor.hide();