1

Topic: TinyMCE in a jQuery UI Dialog - Cannot type

Hi,

Have been trying to fix this for a while now.

Problem

I am trying to load a number of TinyMCE editors inside a jQuery UI Dialog (http://www.ui.jquery.com/  +  http://docs.jquery.com/UI/Dialog). The editors load without problems, but I cannot type anything into them, and if I click on any of the buttons (Bold, Italic etc) I get the following error: 't.win.document has no properties'. There is a similar problem in FCKeditor, in which the editor doesn't work properly if it starts life in a hidden DIV. The TinyMCE instances I am creating must start in a hidden DIV, so I'm hoping there is a workaround.

So, I had a search on these forums and discovered that I could add/remove TinyMCE instances dynamically, using the following:

called during a 'dialog open' callback function:
    tinyMCE.execCommand('mceAddControl',false,'txt_notesone');

and the following called during a 'dialog close' callback function:
    tinyMCE.execCommand('mceRemoveControl',false,'txt_notesone');

However, this will work the first time the dialog is opened, with the TinyMCE instances being created once the dialog is open. Ugly, but functional. However, I cannot get it to work on subsequent opening of the dialog.

I tried wrapping the TinyMCE-affected textareas in uniquely identified DIVs, and then removed them (after the execCommand('mceRemoveControl')) and placed a brand new textarea inside the DIV with the same ID as the previous one. This doesn't seem to work either. The new textareas never get converted into TinyMCE instances in this case.

As I said, the TinyMCE instances appear OK, but they do not work. I cannot type anything, nothing will load into them, and the buttons all give me errors.

I'm hoping that someone here with more knowledge of TinyMCE/jQuery/javascript can help me out here.

PS I'm using Firefox (currently 2.0.0.15), which is the target browser platform (cannot be changed due to client requirements).

Many thanks in advance for any advice on this,

- Nils Luxton

2

Re: TinyMCE in a jQuery UI Dialog - Cannot type

Hi,

Have you try to remove tinymce node ?
Have you got an example of code withe dialog open trigger and clode trigger ?

3

Re: TinyMCE in a jQuery UI Dialog - Cannot type

May be you tryes to create TinyMCE editor before loading in JQuery UI Dialog? Try to convert textareas or divs to Editor on "open" callback.

4

Re: TinyMCE in a jQuery UI Dialog - Cannot type

This is still an issue with 3.2.2. I've documented this here http://groups.google.com/group/jquery-u … 26d63a0bd. The link contains a link to a test case which is reproducable 100% of the time. jQuery's .appendTo() method uses appendChild on the backend, so the test is relevant to this issue.

Google Groups link contains specific information on why this is breaking.

5

Re: TinyMCE in a jQuery UI Dialog - Cannot type

shellscape wrote:

This is still an issue with 3.2.2. I've documented this here http://groups.google.com/group/jquery-u … 26d63a0bd.

Linking like that is no good smile

6

Re: TinyMCE in a jQuery UI Dialog - Cannot type

Is there any solution to this problem?
I can't get it to work yet.
Downloaded the latest from TinyMCE and JQueryUI

7

Re: TinyMCE in a jQuery UI Dialog - Cannot type

What is your problem, what errors are you getting?

8

Re: TinyMCE in a jQuery UI Dialog - Cannot type

I am having a somewhat similar problem with tiny, jquery ui dialog, and Firefox 3.6.  I can get tiny to work just fine until I introduce the advanced theme.  It doesn't "break" it, but it also won't allow the editing of the textarea with the advanced buttons.  The simple controls work, but there is a 1px row where you have to click to get it to work.  That doesn't exist for the advanced buttons though.  It also throws no errors when I try to use this, and that's why it's so confusing.  It works fine with IE8 and Safari...

I am using the latest tinyMCE and JQuery

Here is my code:

$("#news_event_modal").dialog({
            autoOpen:false,
            width:'800px',
            modal:true,
            overlay: {
                backgroundColor:"#000000",
                opacity:.75
            },
            open: function() {
                setTimeout('addMCE()',1000);
            },
            beforeclose:
                function(){
                    tinyMCE.execCommand('mceRemoveControl',false,'id_news_text');
                    $("#id_header_text").attr("value","");
                    $("#id_news_text").attr("value","");
                    $("#id_release_date").attr("value","");
                    $("#id_event_time").attr("value","");
                    $("#event_id").attr("value","");
                }
        });   

function addMCE()
    {
        tinyMCE.execCommand('mceAddControl',false,'id_news_text');
    }

9

Re: TinyMCE in a jQuery UI Dialog - Cannot type

What does your Tiny init look like?

10

Re: TinyMCE in a jQuery UI Dialog - Cannot type

really basic:

tinyMCE.init({
            mode:'textareas',
            theme:'advanced'
        });

I've tried putting in the addMCE function and also in the dialog:open call, still with no luck

Last edited by brett_aland (2010-03-23 18:15:16)

11

Re: TinyMCE in a jQuery UI Dialog - Cannot type

Try using mode: 'none'. I'm just guessing there will be an error as you initiate Tiny on all textareas from the start (in your hidden dialog I guess) ans then try to use the mceAddControl command on an already existing editor instance.

I have an example I made a while back at --> http://crowded.se/test/c.php that might be of some help (difference here is that I'm invoking the init each time I create an editor that isn't necessary at all).

12

Re: TinyMCE in a jQuery UI Dialog - Cannot type

Still no luck.  Have you heard of any issues with only Firefox 3.6?


Here is my updated code:

function addMCE()
    {
                tinyMCE.execCommand('mceRemoveControl',false,'id_news_text');
        tinyMCE.init({
            theme:'advanced',
            mode:'none'
        });
        tinyMCE.execCommand('mceAddControl',false,'id_news_text');
    }

$("#news_event_modal").dialog({
            autoOpen:false,
            width:'800px',
            modal:true,
            overlay: {
                backgroundColor:"#000000",
                opacity:.75
            },
            open: function() {
                setTimeout('addMCE()',2000);
            },
            beforeclose:
                function(){
                    tinyMCE.execCommand('mceRemoveControl',false,'id_news_text');
                }
        });

13

Re: TinyMCE in a jQuery UI Dialog - Cannot type

We got this working...we ended up having to put the toolbar above the content, which to me is completely random.  oh well.  Thanks for your help.  Couldn't have figured it out without you.

14

Re: TinyMCE in a jQuery UI Dialog - Cannot type

brett_aland wrote:

We got this working...we ended up having to put the toolbar above the content, which to me is completely random.  oh well.  Thanks for your help.  Couldn't have figured it out without you.

What did you do in your code to solve this problem. I encountered this too and its driving me nuts.

15

Re: TinyMCE in a jQuery UI Dialog - Cannot type

The only thing we did was move the position of the toolbar to the top:

        tinyMCE.init({
            theme:'advanced',
            mode:'none',
            theme_advanced_toolbar_location : "top"
        });

I don't know how/why it worked, but it did, and that's good enough for me.

Last edited by brett_aland (2010-03-24 20:16:26)

16

Re: TinyMCE in a jQuery UI Dialog - Cannot type

Just went and looked at this again, and it seems that the position just needs to be set is all.  I moved mine back to the bottom and it works fine.

17

Re: TinyMCE in a jQuery UI Dialog - Cannot type

Awesome, thanks for the tidbit of info!

18

Re: TinyMCE in a jQuery UI Dialog - Cannot type

i was having a similar problem to this and i already had theme_advanced_toolbar_location in there, so that wasn't it.

what happened for me is what happened here:
http://tinymce.moxiecode.com/punbb/view … p?id=18142

basically, when putting tinymce inside a jquery-ui dialog, i needed to create a beforeclose event that looked like this:

$('#dialogID').dialog({
    ...
    ...
    beforeclose: function(event, ui) {
        tinyMCE.execCommand('mceRemoveControl', false, 'boxID');
    }

});

and later, when i refilled the form, i needed to do this:
if (tinyMCE) {
    tinyMCE.execCommand('mceAddControl', true, 'boxID')
}

(and actually, to make that not give an error, i set tinyMCE=null; at the very top of my document.ready.)

i hope that helps anyone with the same problem.

matt

19

Re: TinyMCE in a jQuery UI Dialog - Cannot type

Thanks Matt!

Your post was right on.

I thought I'd share my code (below) too since I had multiple textareas and had to use an jQuery each() loop to gather the IDs and create and destroy the editors each and every time the dialog is opened and closed.  The exeCommend() function only works with exact IDs.  There's probably another way to do this but this works.

On a side note, the tinyMCE=null; statement wasn't necessary for me or only gave me errors.

- n8

Code snippet:


$(function() {
    $("#dialog").dialog({
        open: function() {
            tinyMCE.settings = {
                    theme : "advanced",
                    mode : "none", 
                    theme_advanced_buttons1 : "bold,italic,underline,separator,strikethrough,justifyleft,justifycenter,justifyright, justifyfull,bullist,numlist,undo,redo,link,unlink",
                    theme_advanced_buttons2 : "",
                    theme_advanced_buttons3 : "",
                    theme_advanced_toolbar_location : "top",
                    theme_advanced_toolbar_align : "left",
            };
           
            $('textarea.FormElement').each(function(index) {
                tinyMCE.execCommand('mceAddControl', false, $(this).attr('id'));
            });
        },
        beforeclose: function(event, ui) {
            $('textarea.FormElement').each(function(index) {
                tinyMCE.execCommand('mceRemoveControl', false, $(this).attr('id'));
            });
        }
    });
});

20

Re: TinyMCE in a jQuery UI Dialog - Cannot type

Chrazy wrote:

Try using mode: 'none'. I'm just guessing there will be an error as you initiate Tiny on all textareas from the start (in your hidden dialog I guess) ans then try to use the mceAddControl command on an already existing editor instance.

I have an example I made a while back at --> http://crowded.se/test/c.php that might be of some help (difference here is that I'm invoking the init each time I create an editor that isn't necessary at all).

Chrazy - This is pretty much exactly what I'm trying to make but I'm running into all sorts of dead ends.  Could I look at your source?

21

Re: TinyMCE in a jQuery UI Dialog - Cannot type

Be my guest, it's all there.

22

Re: TinyMCE in a jQuery UI Dialog - Cannot type

Oh my bad...It is all there.  For some reason I just assumed there were a bunch more files to it.  Thanks!

23

Re: TinyMCE in a jQuery UI Dialog - Cannot type

Hmm am I missing something? PHP code maybe?  I have it all set up exactly as you do (except with my own current TinyMCE and JQuery UI packages) but when I click to launch TinyMCE the UI pops up with only a small blank textarea without TinyMCE and it won't close when I click the buttons.
Checked and tried pretty much everything.

24

Re: TinyMCE in a jQuery UI Dialog - Cannot type

Nope, no hidden code and no PHP logic at all. Hard to help you when I don't know what you're doing, but in my example it's all there. It isn't using the latest versions of either component though, but I don't think that should be a problem.

25

Re: TinyMCE in a jQuery UI Dialog - Cannot type

Ah!  Tracked the error down to TinyMCE not initializing and then realized it was because the language is set to Swedish smile
Thanks again.