Tip: toogle button to enable/disable TinyMCE

**donadoni** · 2005-03-31 20:20:11

donadoni
TWG Member
Offline

From: Hamburg, Germany
Registered: 2005-03-31
Posts: 162

Topic: Tip: toogle button to enable/disable TinyMCE

:idea:
Didn't found a solution in this forum, so I "build" it myself (don't know if that was already posted here):

I was looking for a "Toogle TinyMCE" button/link, so here it is:

[code]
var tinyMCEmode = true;
function toogleEditorMode(sEditorID) {
try {
if(tinyMCEmode) {
tinyMCE.removeMCEControl(tinyMCE.getEditorId(sEditorID));
tinyMCEmode = false;
} else {
tinyMCE.addMCEControl(document.getElementById('pagecontent'), sEditorID);
tinyMCEmode = true;
}
} catch(e) {
//error handling
}
}[/code]

To call the js function just make a html link (outside of TinyMCE, otherwise you won't have a chance to toogle it back on) like in

[code]<a href="#" title="toogle TinyMCE" onclick="toogleEditorMode('pagecontent');">Toogle TinyMCE</a>[/code]

The variable tinyMCEmode could be set in the <script> block where tinyMCE.init is called.

Hopefully this might help someone...

To the TinyMCE crew: this project rocks! far better (support/look'n'feel/...) than HTMLarea! [/code]

spocke: is there a build-in function or property to check wether TinyMCE is active in any given textarea ?

Donadoni

**slugger** · 2005-04-01 14:47:39

slugger
Member
Offline

Registered: 2005-03-29
Posts: 5

Re: Tip: toogle button to enable/disable TinyMCE

Awesome, just what I needed!

**zZz** · 2005-07-19 14:10:27

zZz
Member
Offline

Registered: 2005-07-19
Posts: 1

Re: Tip: toogle button to enable/disable TinyMCE

Perfect, I had been looking for some solution to a problem that I had and your scripts solved it!!!

Thank you ^_^

**Halevyr** · 2005-08-03 23:10:48

Halevyr
Member
Offline

Registered: 2005-08-03
Posts: 1

Re: Tip: toogle button to enable/disable TinyMCE

This worked like a charm thank you for everything.

My only issue is if it is possible to load the page and only turn on tinymce if somebody clicks the toggle button. In other words load the page without tinymce and turn on tinyMCE if you click the toggle button. i have tried with my limited coding ability to implement this since not everybody is to happy about the change to tinyMCE.

Thanks again

**geezup_2000** · 2005-08-11 12:14:07

geezup_2000
Member
Offline

From: Spain
Registered: 2005-08-08
Posts: 28

Re: Tip: toogle button to enable/disable TinyMCE

Nice one ! Thanks !

**donadoni** · 2005-08-26 11:20:03

donadoni
TWG Member
Offline

From: Hamburg, Germany
Registered: 2005-03-31
Posts: 162

Re: Tip: toogle button to enable/disable TinyMCE

Halevyr wrote:

This worked like a charm thank you for everything.
My only issue is if it is possible to load the page and only turn on tinymce if somebody clicks the toggle button. In other words load the page without tinymce and turn on tinyMCE if you click the toggle button. i have tried with my limited coding ability to implement this since not everybody is to happy about the change to tinyMCE.
Thanks again

Have a look at this post http://tinymce.moxiecode.com/punbb/view … hp?id=1317 and combine it with the code snippet at the top.

Donadoni

**clubvibe** · 2005-09-28 20:56:46

clubvibe
Member
Offline

Registered: 2005-09-28
Posts: 1

Re: Tip: toogle button to enable/disable TinyMCE

first of all, thnx Tiny crew for this excellent application.
second: I'm just gettig to know tiny mce and the aboe trick is just what i need, but.....[noobmode on] Where do I have to place the above code? within the <head> of my page where i use tiny mce? or in a tinymce php file?
Could someone help me?

**donadoni** · 2005-09-30 10:40:05

donadoni
TWG Member
Offline

From: Hamburg, Germany
Registered: 2005-03-31
Posts: 162

Re: Tip: toogle button to enable/disable TinyMCE

Place the javascript in a separate <script> block in the head, that will make maintenance for future tinymce versions/modifications easier and will keep the init section nice and tidy.
The link (<a href...) has to go into the <body> block, of course.

Hope that helps,
Donadoni

To the TinyMCE crew: couldn't you put this simple script into one of your demos? Maybe near the other "outside tinymce" buttons? I'm willing to extend one of your example/demo pages and send it to you, if that is of any help.

Donadoni

**sawchuk** · 2005-10-03 00:32:29

sawchuk
Member
Offline

Registered: 2005-10-03
Posts: 1

Re: Tip: toogle button to enable/disable TinyMCE

Being a non-coder guy... hence why I use this fine tool... is there someone who could show me a nice working example of how this works!?

Kudos to donadoni!

**kills** · 2005-10-03 17:22:53

kills
Member
Offline

Registered: 2005-06-14
Posts: 110

Re: Tip: toogle button to enable/disable TinyMCE

sawchuk wrote:

Being a non-coder guy... hence why I use this fine tool... is there someone who could show me a nice working example of how this works!?
Kudos to donadoni!

Have a look at the "Post a reply"-Form of this forum.
There a Toggle TinyMCE Switcher at the bottom of the textarea.

Bye,
Markus

**Afraithe** · 2005-10-03 17:33:23

Afraithe
Administrator
Offline

From: Skellefteå, Sweden
Registered: 2005-01-03
Posts: 2,660

Re: Tip: toogle button to enable/disable TinyMCE

I just added it to quickpost to, seems ppl aren't using the "Post reply" button.

Afraithe
TinyMCE Developer
Moxiecode Systems

**eyedam** · 2005-11-30 03:12:11

eyedam
Member
Offline

Registered: 2005-11-30
Posts: 25

Re: Tip: toogle button to enable/disable TinyMCE

Thank you for this addition - that's exactly what I was looking for.

**bubbadan** · 2005-12-15 20:00:18

bubbadan
Member
Offline

Registered: 2005-12-15
Posts: 2

Re: Tip: toogle button to enable/disable TinyMCE

Looks good, but very vague on what to do and where. Sorry some of us are very noobie.
So put the code in a new <script> in the head.. OK.. then call.. call what? If I do it the way it says, it just tries to open a file.. the page loads with errors.. I am lost, and kinda feel like an idiot cause I SHOULD be able to figure this out.

**donadoni** · 2005-12-15 22:05:48

donadoni
TWG Member
Offline

From: Hamburg, Germany
Registered: 2005-03-31
Posts: 162

Re: Tip: toogle button to enable/disable TinyMCE

Have a look in the "TinyMCE wiki", there is a description including an example.

Donadoni

**bubbadan** · 2005-12-16 15:34:36

bubbadan
Member
Offline

Registered: 2005-12-15
Posts: 2

Re: Tip: toogle button to enable/disable TinyMCE

OK thanks, I can turn it off, but no matter where I put the information in the page it will not turn it back on.
I have 5 instances of TinyMCE in textareas in one form. So far I have only tried to get ONE to toogle on and off.
I have placed the script and link outside the form and inside the form. Doesn't seem to matter, it still won't turn back on.
Is there a way you can turn on and off ALL episodes in textarea's? With different ID's? (Right now I would be happy if I could just get one to go off and on)

After hours of working and doing this I have come to realize you can not have more than one episode of this in a form. It simply keeps adding new textarea's..... Unless someone can tell me how, this just doesn't work for that. Bummer.

Last edited by bubbadan (2005-12-16 19:05:47)

**rexlam** · 2005-12-23 23:23:59

rexlam
Member
Offline

Registered: 2005-12-01
Posts: 5

Re: Tip: toogle button to enable/disable TinyMCE

I got a checkbox to enable/disable TinyMCE on a page for editing an email body. That's working great, thx!

However I want to take it a step further. When going from TinyMCE/HTML mode to regular textarea plain text mode, I don't like the fact that you see HTML tags. Instead. It'd be more user friendly, if there's a way to extract out the display text and discard all the formatting markup tags. I have code that does this on the server side, but I wonder if there's a way to do that on the client side.

I guess what I am asking is there a client routine that extract only the dispaly text from an HTML fragment?

**elvis** · 2005-12-24 15:29:58

elvis
Member
Offline

Registered: 2005-12-19
Posts: 2

Re: Tip: toogle button to enable/disable TinyMCE

Just my two cents:

<a href="#" id="toggle" onclick="toogleEditorMode('idofyourtextarea');document.getElementById('toggle').innerHTML=(document.getElementById('toggle2').innerHTML == 'Hide TinyMCE') ? 'Show TinyMCE' : 'Hide TinyMCE';">Hide TinyMCE</a>

Shows a link "Hide TinyMCE" when the editor is visible, otherwise the link reads "Show TinyMCE"

Last edited by elvis (2005-12-24 15:30:28)

**jwchess** · 2006-01-03 13:33:22

jwchess
Member
Offline

Registered: 2005-12-31
Posts: 13

Re: Tip: toogle button to enable/disable TinyMCE

bubbadan wrote:

OK thanks, I can turn it off, but no matter where I put the information in the page it will not turn it back on.
I have 5 instances of TinyMCE in textareas in one form. So far I have only tried to get ONE to toogle on and off.
I have placed the script and link outside the form and inside the form. Doesn't seem to matter, it still won't turn back on.
Is there a way you can turn on and off ALL episodes in textarea's? With different ID's? (Right now I would be happy if I could just get one to go off and on)

I want to know this also.
Is it possible to toggle one textarea on or off?

**p-munky** · 2006-02-09 13:46:23

p-munky
Member
Offline

Registered: 2006-02-09
Posts: 2

Re: Tip: toogle button to enable/disable TinyMCE

I am using the following code to provide toggle functionality to a number of <div>s on my page. In theory this should extend the toggle code above to allow for 8 MCE instances to be turned on and off for <divs> with IDs: 'page1', 'page2'....'page8'. The divs will display as normal when the page loads, with the option to click a link to initialise the editor, and click again to go back to the regular div view.

Toggling the editor on is no problem - this works perfectly, but when I toggle off, the editor disappears and the <div> does not reappear, so I end up losing part of my page until a reload. Im using the latest TinyMCE.

        <script type="text/javascript">
                        //<![CDATA[
                                tinyMCE.init({  theme : "advanced",
                                                                mode : "none",
                                                                theme_advanced_toolbar_location : "top",
                                                                theme_advanced_toolbar_align : "left",
                                                                content_css : "styles/blah.css"});
                                var mceEnabled = new Array(false, false,false,false,false,false,false,false);
                       //]]>
                </script>
                <script type="text/javascript">
                //<![CDATA[
                        function toggleEditorMode(pageNo) {
                                pageID = 'page'+pageNo;
                        if(!mceEnabled[pageNo]) {
                            tinyMCE.addMCEControl(document.getElementById(pageID), pageID);
                            mceEnabled[pageNo] = true;
                         } else {
                            tinyMCE.removeMCEControl(tinyMCE.getEditorId(pageID));
                            mceEnabled[pageNo] = false;
                        }
                        }
                //]]>
                </script>

The calling HTML is as follows:

<span class="editbutton" onclick="javascript: toggleEditorMode(1)">Edit Page 1</span>

Thanks for any advice in advance. this is really puzzling me!

Last edited by p-munky (2006-02-09 13:48:00)

**damla** · 2006-03-27 13:55:05

damla
Member
Offline

Registered: 2006-03-27
Posts: 3

Re: Tip: toogle button to enable/disable TinyMCE

I am trying to use the toggling method as you wrote, mceRemoveControl feature works however mceAddControl feature ends up with a blank space in the page. Can you think of a reason for this?
I'll be very pleased for your help...

**kills** · 2006-03-27 18:46:41

kills
Member
Offline

Registered: 2005-06-14
Posts: 110

Re: Tip: toogle button to enable/disable TinyMCE

working example
http://www.rorlach.de/mediawiki/samples/sample009.php

**hey_suburbia** · 2006-03-27 22:56:35

hey_suburbia
Member
Offline

Registered: 2005-01-09
Posts: 15

Re: Tip: toogle button to enable/disable TinyMCE

GREAT WORK!

One Question:
I have two html files in the same directory, one that holds the
"tinyMCE.init" javascript
and the other that holds my <body>.

How can I reference the javascript in the other html file?

Do I need to change this somehow:
<a href="#" title="toogle TinyMCE"
onclick="toogleEditorMode('pagecontent');">(Toggle Editor)</a>

Thanks!

Mickey

**damla** · 2006-04-07 16:26:30

damla
Member
Offline

Registered: 2006-03-27
Posts: 3

Re: Tip: toogle button to enable/disable TinyMCE

I am trying to use the tinyMce html editor in ajax zone, however ajax zone does not refresh the html editor, it brings a simple textarea...
I solved this using mceAddControl, however this time I can not reach the content in the editor when I edit it, using tinyMce.getcontent or getelementbyId brings me the previous data that was put into the editor. Do you have any suggestions what the problem could be? thanks...

**damla** · 2006-04-07 16:53:26

damla
Member
Offline

Registered: 2006-03-27
Posts: 3

Re: Tip: toogle button to enable/disable TinyMCE

Hi again,
I handled the problem,
instead of using getcontent or any function of tinyMCE,
I am now able to get the value by using the name of the textarea and request.getParameter(textarea_name) in java server side. thanks anyway.

**Séb** · 2006-04-24 18:33:14

Séb
Member
Offline

Registered: 2006-04-23
Posts: 26

Re: Tip: toogle button to enable/disable TinyMCE

I just would like to make all clear after all this bugs, options, ...
and the solutions I found to them plus my features:

I put all of that in one single file tinymce_init.js, in the header of my page

tinyMCE.init({
    mode : "none",
    // PUT ALL YOU tinyMCE options there

        // Don't forget to define the height
    height : "400",
});

var tinyMCEmode = false;
function toogleEditorMode(sEditorID) {
    try {
        if(tinyMCEmode) {
            tinyMCE.removeMCEControl(tinyMCE.getEditorId(sEditorID));
            tinyMCEmode = false;
        } else {
            tinyMCE.addMCEControl(document.getElementById(sEditorID), sEditorID);
            tinyMCEmode = true;
        }
    } catch(e) {
        //error handling
    }
}

function switchTinyMCE(link_id, textarea_id) {
  toogleEditorMode(textarea_id);
  var link = document.getElementById(link_id);
  link.innerHTML = (link.innerHTML == 'Hide TinyMCE') ? 'Show TinyMCE' : 'Hide TinyMCE';
  link.title = link.innerHTML;
}

// Becareful that may cause problem with some other of your js code using window.load
window.onload = function() { toogleEditorMode('IDOFYOURTEXTAREA'); }

after in my form, I put the following link :

  <a href="#" id="switchtinymce" title="hide TinyMCE" onclick="switchTinyMCE(this.id, 'content_content'); return false;">Hide TinyMCE</a>

If you are using the prototype library (http://prototype.conio.net) like me you might prefer to get tinymce_init.js looking like this:

tinyMCE.init({
    mode : "none",
    // PUT ALL YOU tinyMCE options there

        // Don't forget to define the height
    height : "400",
});

var tinyMCEmode = false;
function toogleEditorMode(sEditorID) {
    try {
        if(tinyMCEmode) {
            tinyMCE.removeMCEControl(tinyMCE.getEditorId(sEditorID));
            tinyMCEmode = false;
        } else {
            tinyMCE.addMCEControl($(sEditorID), sEditorID);
            tinyMCEmode = true;
        }
    } catch(e) {
        //error handling
    }
}

function switchTinyMCE(link_id, textarea_id) {
  toogleEditorMode(textarea_id);
  var link = $(link_id);
  link.innerHTML = (link.innerHTML == 'Hide TinyMCE') ? 'Show TinyMCE' : 'Hide TinyMCE';
  link.title = link.innerHTML;
}

Event.observe(window, 'load', function() { toogleEditorMode('IDOFYOURTEXTAREA'); });

don't forget to replace "IDOFYOURTEXTAREA" by the right value ;-)
--
Séb

Last edited by Séb (2006-07-11 09:33:11)

Get your own copy

Tip: toogle button to enable/disable TinyMCE

Tip: toogle button to enable/disable TinyMCE (Page 1 of 2)

Posts [ 1 to 25 of 49 ]

1 Topic by donadoni 2005-03-31 20:20:11

Topic: Tip: toogle button to enable/disable TinyMCE

2 Reply by slugger 2005-04-01 14:47:39

Re: Tip: toogle button to enable/disable TinyMCE

3 Reply by zZz 2005-07-19 14:10:27

Re: Tip: toogle button to enable/disable TinyMCE

4 Reply by Halevyr 2005-08-03 23:10:48

Re: Tip: toogle button to enable/disable TinyMCE

5 Reply by geezup_2000 2005-08-11 12:14:07

Re: Tip: toogle button to enable/disable TinyMCE

6 Reply by donadoni 2005-08-26 11:20:03

Re: Tip: toogle button to enable/disable TinyMCE

7 Reply by clubvibe 2005-09-28 20:56:46

Re: Tip: toogle button to enable/disable TinyMCE

8 Reply by donadoni 2005-09-30 10:40:05

Re: Tip: toogle button to enable/disable TinyMCE

9 Reply by sawchuk 2005-10-03 00:32:29

Re: Tip: toogle button to enable/disable TinyMCE

10 Reply by kills 2005-10-03 17:22:53

Re: Tip: toogle button to enable/disable TinyMCE

11 Reply by Afraithe 2005-10-03 17:33:23

Re: Tip: toogle button to enable/disable TinyMCE

12 Reply by eyedam 2005-11-30 03:12:11

Re: Tip: toogle button to enable/disable TinyMCE

13 Reply by bubbadan 2005-12-15 20:00:18

Re: Tip: toogle button to enable/disable TinyMCE

14 Reply by donadoni 2005-12-15 22:05:48

Re: Tip: toogle button to enable/disable TinyMCE

15 Reply by bubbadan 2005-12-16 15:34:36

Re: Tip: toogle button to enable/disable TinyMCE

16 Reply by rexlam 2005-12-23 23:23:59

Re: Tip: toogle button to enable/disable TinyMCE

17 Reply by elvis 2005-12-24 15:29:58

Re: Tip: toogle button to enable/disable TinyMCE

18 Reply by jwchess 2006-01-03 13:33:22

Re: Tip: toogle button to enable/disable TinyMCE

19 Reply by p-munky 2006-02-09 13:46:23

Re: Tip: toogle button to enable/disable TinyMCE

20 Reply by damla 2006-03-27 13:55:05

Re: Tip: toogle button to enable/disable TinyMCE

21 Reply by kills 2006-03-27 18:46:41

Re: Tip: toogle button to enable/disable TinyMCE

22 Reply by hey_suburbia 2006-03-27 22:56:35

Re: Tip: toogle button to enable/disable TinyMCE

23 Reply by damla 2006-04-07 16:26:30

Re: Tip: toogle button to enable/disable TinyMCE

24 Reply by damla 2006-04-07 16:53:26

Re: Tip: toogle button to enable/disable TinyMCE

25 Reply by Séb 2006-04-24 18:33:14

Re: Tip: toogle button to enable/disable TinyMCE

Posts [ 1 to 25 of 49 ]