TinyMCE和JQuery对话框:TinyMCE仅在对话框中的modal:true时读取 [英] TinyMCE and JQuery dialog: TinyMCE read only when modal:true in the Dialog

问题描述

我正在Dialog插件中使用TinyMCD插件.

I am using the TinyMCD plugin in the Dialog plugin.

一切正常，直到我将对话框的模式参数设置为true. 当我这样做时，TinyMCE文本区域仅在第一次打开对话框然后变为只读时才能正常工作.

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.

这是我的代码示例:

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');
        }

我不知道如何解决此问题.我从这里尝试了一些建议: http: //www.codestumps.com/2011/05/adding-tinymce-into-a-jquery-ui-dialog/，但我没有找到解决方法.

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.

推荐答案

问题已解决，下面是完整的工作代码:

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');   
            }
        }
    });
}

对话框的html是:

<div style="display: none"; id="dialog-modal" title="Basic modal dialog" style="display: none" ></div> 

这篇关于TinyMCE和JQuery对话框:TinyMCE仅在对话框中的modal:true时读取的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！