4

I am using the TinyMCD plugin in the Dialog plugin.

Everything works fine, until I set the dialog's modal parameter to true. When I am doing that, the TinyMCE textarea works fine only the first time the dialog is opened and then becomes read only.

Here is the example of my code:

tinyMCE.init({ mode: 'none' });
        var dlgComments = $('#dlgInternalComments');
        if (dlgComments.length == 0)
        {
            dlgComments = $('<div/>').attr('id', 'dlgInternalComments'),
                txtAreaComments = $('<textarea/>').attr('id', 'txtInternalComments').appendTo(dlgComments);

            dlgComments.dialog({
                height: 300,
                width: 800,
                modal:true,
                open: function ()
                {
                    if ($('#txtInternalComments_parent', $(this)).length == 0)
                    {
                        var ddd = {mode:'none'}; //$.extend({}, Globals.RichTextBox, { mode: 'none' });
                        txtAreaComments.tinymce(ddd);
                    }
                },
                buttons: {
                    'Parse': function ()
                    {
                        processAuthorsParagraph();
                        $(this).dialog('close');
                    }
                }
            });
        }
        else
        {
            dlgComments.dialog('open');
        }

I don't know how to fix this issue. I have tryed some suggestions from here: http://www.codestumps.com/2011/05/adding-tinymce-into-a-jquery-ui-dialog/ but I haven't found the solution.

If you can help me, thank you very much.

Milos Cuculovic
  • 19,631
  • 51
  • 159
  • 265
  • Also see answers in this thread: http://stackoverflow.com/questions/10095696/remove-tinymce-control-and-re-add – Vitaly Apr 28 '14 at 17:21

1 Answers1

2

Problem resolved, here is the full working code:

function removeTinyMCE () {
    tinyMCE.execCommand('mceFocus', false, 'dialog-modal');
    tinyMCE.execCommand('mceRemoveControl', false, 'dialog-modal');
}

function addTinyMCE() {
    jQuery('#dialog-modal').tinymce({
        script_url: '/js/tiny_mce_3.2.7_jquery/jscripts/tiny_mce/tiny_mce.js',
        width: "800px",
        mode: "textarea",
        theme : "simple",
    });
}

function addAuto()
{
    $('#dialog-modal').dialog({
        autoOpen: true,
        modal: true,
        title: "Email Dialog",
        open: addTinyMCE,
        close: function() {
            removeTinyMCE();
            $(this).dialog('destroy');
        },
        buttons:  {
            'Cancel': function() {
                processAuthorsParagraph();
                removeTinyMCE();
                $(this).dialog('destroy');   
            }
        }
    });
}

And the html for the dialog is:

<div style="display: none"; id="dialog-modal" title="Basic modal dialog" style="display: none" ></div>
Milos Cuculovic
  • 19,631
  • 51
  • 159
  • 265
  • Sorry but I don't get it. With that code above there is only a blank page and the invisible #dialog-modal Div. How to run it? How to open the dialog? addAuto(); or addTinyMCE() just caused an error: jQuery(...).tinymce is not a function. It's also complaining about the theme. I figured out that version 4.x has no themes but the modern theme. But then I tried it with version 3.5 and it's still complaining. Could you please add the rest of the code if something was missing or tell me which versions of jQuery, jQuerUI and tinyMCE you used? – user2718671 Apr 22 '14 at 12:21