Open jQuery WYSIWYG in a jQuery dialog

Is there a way to load jquery wysiwyg plugin inside a jquery dialog box.

I tried but开发者_Go百科 the editor is somehow disabled when the dialog box opens.

You need to open it on the (button) click that opens the dialog. It won't work if you try to do it when you first initialise the dialog. (Though you'll need to do that (e.g. in your document.ready function; thus initialising it twice). So, in your dialog opening event you could have something like this:

$("#diaTemplate").dialog({
    width: 810,
    height: 700,
    modal: true,
    open: function(event, ui) {
        $("#divTemplate").html("<textarea cols='50' rows='12' tabindex='100' id='txtTemplate'></textarea>");
        $('#txtTemplate').wysiwyg({
            css: 'skin.css',
            rmFormat: true,
            controls: { html: { visible: true} }
        });
    },
    close: function(event, ui) {
        $("#divTemplate").html("");
    }
}).dialog("option", "title", "Add New Template").dialog("open");

Note that you have to create the text area dynamically too.

I've run into this problem with codemirror before. You can not instantiate the wysiwyg until after the dialog is opened, and if you close it you have to instantiate the wysiwyg again when the dialog opens back up.

It has something to do with hiding iframes and how the browser interprets them when they are brought back into view.

It sounds like might be mixing namespaces, classes or id's when you're bringing the two together. Makes sure that your jquery code is not overridding some other part of the other chunk of code.

Good luck!