TinyMCE aperto in jqueryUI modal dialog

Question

Quando si utilizza tinyMCE in una finestra di dialogo modale jqueryUI, non è possibile utilizzare il collegamento ipertestuale o le funzionalità di inserimento dell'immagine.

In sostanza, dopo un sacco di ricerche, ho trovato questo:

http://www.tinymce.com/develop/bugtracker_view.php?id=5917

La cosa strana è che a me cuciture meno di un problema di TinyMCE e più di un problema di jQueryUI dal momento che il problema è non presente quando la proprietà modale di jqueryUI è impostata su false.

Con una forma più ricca ho visto che quello che succede è che ogni volta che il piccolo MCE perde lo stato attivo, il primo elemento nella forma diventa attivo anche se non è quello focalizzato/cliccato.

Qualche guru di JavaScript ha idea di come sia possibile mantenere la finestra di dialogo modale e far funzionare tinyMCE?

Answer 1

Questo sembra risolvere il problema per me, o per lo meno il lavoro intorno ad esso (metterlo da qualche parte nel $ (document) .ready()):

$.widget('ui.dialog', $.ui.dialog, { 
    _allowInteraction: function(event) { 
     return ($('.mce-panel:visible').length > 0); 
    } 
}); 

Answer 2

Questo ha risolto il tutto per me quando l'override _allowInteraction sarebbe not:

$(document).on('focusin', function(e) { 
    if ($(event.target).closest(".mce-window").length) { 
     e.stopImmediatePropagation(); 
    } 
}); 

Non posso davvero prendermi il merito. L'ho preso da this thread on the TinyMCE forums. (Hanno spostato il loro bugtracker su github. tinymce/issues/703 è il problema github corrispondente.)

Answer 3

Sembra che non ci siano ancora soluzioni per questo problema. Questo è un po 'un trucco, ma ha funzionato davvero per me. Ogni volta che si apre la finestra di dialogo rimuovere l'area di testo e ri aggiungerlo come seguire,

var myDialog = $('#myDialog'); 
var myTextarea = myDialog.find('textarea'); 
var clonedTextArea = myTextarea.clone(); // create a copy before deleting from the DOM 
var myTextAreaParent = myTextarea.parent(); // get the parent to add the created copy later 

myTextarea.remove(); // remove the textarea 

myDialog.find('.mce-container').remove(); // remove existing mce control if exists 

myTextAreaParent.append(clonedTextArea); // re-add the copy 

myDialog.dialog({ 
    open: function(e1,e2){ 
     setTimeout(function() { 
      // Add your tinymce creation code here 
     },50); 
    } 
}); 

myDialog.dialog('open');