Perché non riesco a digitare TinyMCE nella mia finestra di dialogo modale jQueryUI?

Question

Ho una finestra di dialogo modale di base, contenente un'istanza di TinyMCE. Questa modale viene creata dinamicamente ogni volta che viene aperta e la finestra di dialogo (e l'elemento) vengono distrutti e rimossi alla chiusura del dialogo.

La prima volta che apro il dialogo, tutto va bene. Il modulo carica (chiamata ajax), uniforme viene applicata al modulo e TinyMCE viene applicato alla textarea. Posso eseguire tutte le azioni bene. Tutte le volte successive che apro la forma il processo si ripete, con la differenza che, sebbene TinyMCE sia applicato alla textarea, non posso più digitare in esso.

Questo è un metodo che spara sul collegamento clic:

$('<div id="perspDlg">').dialog({ 
    title:'My Dialog', 
    width:900, 
    height:575, 
    modal:true, 
    create: function(){ 
     $('span.ui-icon-closethick').html(""); 
    }, 
    close:function(){ 
     $('form#myForm').unbind('submit'); 
     $('textarea[name="discussion"]').tinymce().destroy(); 
     $(this).html('').dialog('destroy'); 
     setTimeout("$('#perspDlg').remove();",100); 
    }, 
    open:function(){ 
     var dlg = $(this); 
     $.ajax({ 
      url:_cfcPath+'/lessons/myTemplate.cfm', 
      dataType:'script', 
      data:{id:id}, 
      success:function(d,r,o){ 
       dlg.html(d); 
       $('form#myForm').bind('submit',formHandler); 
      } 
     }); 
    }, 
    buttons:[ 
     {text:'Save Form', 
     click:function(){ 
      $('form#myForm').submit(); 
      //$(this).dialog('close'); 
     }}, 
     {text:'Cancel', 
     click:function(){ 
      $(this).dialog('close'); 
     }} 
    ] 
}); 

Quando i carichi di modello, le righe finali si applicano TinyMCE alla textarea in forma caricato:

$('textarea.tinyMCE').tinymce({ 
    script_url : '/assets/scripts/_lib/tiny_mce/tiny_mce.js', 
    mode : "textareas", 
    editor_deselector : "mceNoEditor", 
    theme : "advanced", 
    plugins : pluginVal, 
    //Paste options 
    extended_valid_elements : "a[name|href|target|rel|title|style|class],div[align|class|style|height|width],form[accept|accept-charset|action|class|dir<ltr?rtl|enctype|id|lang|method<get?post|name|onclick|ondblclick|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|onreset|onsubmit|style|title|target],hr[class],span[align|class|style],img[class|src|style|alt|title|name],input[accept|accesskey|align<bottom?left?middle?right?top|alt|checked<checked|class|dir<ltr?rtl|disabled<disabled|id|ismap<ismap|lang|maxlength|name|onblur|onclick|ondblclick|onfocus|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|onselect|readonly<readonly|size|src|style|tabindex|title|type<button?checkbox?file?hidden?image?password?radio?reset?submit?text|usemap|value],table[border|class|style|cellpadding|cellspacing|background|height|width],td[background|style|class|valign|align|height|width],p", 
    invalid_elements: "font,align,script,applet,iframe", 
    paste_auto_cleanup_on_paste : true, 
    paste_remove_styles: true, 
    paste_remove_styles_if_webkit: true, 
    paste_strip_class_attributes: true, 
    paste_retain_style_properties: "none", 
    paste_block_drop: true, 
    remove_linebreaks : false, 
    paste_create_paragraphs : false, 
    paste_create_linebreaks : false, 
    relative_urls : false, 
    remove_script_host : false, 
    document_base_url : baseURL, 
    theme_advanced_buttons1 : btn1Val, 
    theme_advanced_buttons2 : btn2Val, 
    theme_advanced_buttons3 : btn3Val, 
    theme_advanced_buttons4 : btn4Val, 
    theme_advanced_toolbar_location : "top", 
    theme_advanced_toolbar_align : "left", 
    theme_advanced_resizing : true 
}); 

Questo utilizza la Plugin JQuery per TinyMCE per caricare l'editor in tutti i textareas con una classe di tinyMCE, che funziona come previsto.

Ho letto diverse domande su StackOverflow su problemi simili, ma nessuno che abbia fornito una risposta a questo problema. Qualcuno ha qualche idea?

Un po 'di follow-up: Ho fatto qualche confronto tra la finestra di dialogo iniziale aperta e le aperture successive, e ho notato qualcosa. Nel caricamento iniziale e TinyMCE applicato all'area di testo, vedo che l'applicazione ha creato un iframe, caricato una tabella con una riga per il menu e una riga con un iframe aggiuntivo. I contenuti che di iframe (sul primo carico) si presenta così:

<tr class="mceLast"> 
    <td class="mceIframeContainer mceFirst mceLast"> 
     <iframe id="mce_0_ifr" frameborder="0" src="javascript:""" allowtransparency="true" title="Rich Text AreaPress ALT-F10 for toolbar. Press ALT-0 for help" style="width: 100%; height: 204px; display: block;"> 
      <html> 
       <head xmlns="http://www.w3.org/1999/xhtml"> 
        <base href="http://dev.nsite.loc"> 
        <meta content="IE=7" http-equiv="X-UA-Compatible"> 
        <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"> 
        <link href="http://dev.nsite.loc/assets/scripts/_lib/tiny_mce/themes/advanced/skins/default/content.css" rel="stylesheet" type="text/css"> 
        <link rel="stylesheet" data-mce-href="http://dev.nsite.loc/assets/scripts/_lib/tiny_mce/plugins/spellchecker/css/content.css?110120111025" href="http://dev.nsite.loc/assets/scripts/_lib/tiny_mce/plugins/spellchecker/css/content.css?110120111025"> 
        <link rel="stylesheet" data-mce-href="http://dev.nsite.loc/assets/scripts/_lib/tiny_mce/plugins/class_U/css/content.css?110120111025" href="http://dev.nsite.loc/assets/scripts/_lib/tiny_mce/plugins/class_U/css/content.css?110120111025"> 
        <link rel="stylesheet" data-mce-href="http://dev.nsite.loc/assets/scripts/_lib/tiny_mce/plugins/noneprovided/css/content.css?110120111025" href="http://dev.nsite.loc/assets/scripts/_lib/tiny_mce/plugins/noneprovided/css/content.css?110120111025"> 
        <link rel="stylesheet" data-mce-href="http://dev.nsite.loc/assets/scripts/_lib/tiny_mce/themes/advanced/skins/default/content.css?110120111025" href="http://dev.nsite.loc/assets/scripts/_lib/tiny_mce/themes/advanced/skins/default/content.css?110120111025"> 
       </head> 
       <body id="tinymce" class="mceContentBody " contenteditable="true" dir="ltr"> 
        <br data-mce-bogus="1"> 
       </body> 
      </html> 
     </iframe> 
    </td> 
</tr> 

Ma, sui carichi successivi ottengo il menu, ma che iframe interno assomiglia a questo:

<tr class="mceLast"> 
    <td class="mceIframeContainer mceFirst mceLast"> 
     <iframe id="mce_12_ifr" frameborder="0" src="javascript:""" allowtransparency="true" title="Rich Text AreaPress ALT-F10 for toolbar. Press ALT-0 for help" style="width: 100%; height: 204px; display: block;"> 
      <html> 
       <head> 
       </head> 
       <body> 
       </body> 
      </html> 
     </iframe> 
    </td> 
</tr> 

cosa potrebbe causare questo?

Update 2: Per i suggerimenti di Patricia, ho cambiato evento close di mia finestra al seguente:

close:function(){ 
    $('form#perspectiveForm').unbind('submit'); 
    var id = $('textarea:tinymce').attr('id'); 
    tinyMCE.execCommand('mceRemoveControl', false, id); 
    $('textarea#'+id).remove(); 
    $(this).empty().dialog('destroy'); 
    setTimeout("$('#perspDlg').remove();",100); 
}, 

Con un po 'di debug passo, e Firebug, mi hanno confermato che l'editor è distrutto, e poi il textarea completamente rimossa, prima di distruggere la finestra di dialogo e rimuovere il div. Detto questo, reinizializzando la finestra di dialogo non riesco ancora a digitare la nuova istanza TinyMCE, con il codice sottostante che mostra come il mio ultimo aggiornamento. Non sembra essere correlato alla distruzione impropria dell'elemento precedente.

Aggiornamento: ultimo suggerimento di Patricia è stato quello di spostare la chiamata ajax, che carica il modulo nella finestra di dialogo, in un metodo .load(), e quindi creare la finestra di dialogo. Ho provato questo, e le cose sono andate rapidamente a sud. Il contenuto remoto contiene script che deve essere eseguito, quindi lo script dataType sul metodo .ajax(). Il metodo .load() non ha questa opzione, e in realtà non gli piaceva. Quindi ora non sono sicuro di cosa provare dopo.

Answer 1

ho incontrato un problema simile quando uso un pulsante per aggiornare una sezione.

devi distruggere completamente i piccoli controlli MCE prima di riattivarli.

Io uso questa logica nel mio gestore pulsante di aggiornamento:

$('#sectionToRefresh').find('textarea:tinymce').each(function(){ 
    var id = $(this).attr('id'); 
    tinyMCE.execCommand('mceRemoveControl', false, id); 
    $(this).remove(); 

}); 

per le finestre di dialogo, ho la "chiusura" del gestore impostato in questo modo:

close: function (ev, ui) { 
      if (typeof tinyMCE != 'undefined') { 
       $(this).find(':tinymce').remove(); 
      } 
      $(this).dialog("destroy"); 
      $(this).remove(); 



     } 

uno di questi dovrebbe risolvere il problema per te!

EDIT:

Non ho idea se questo è il propblem o no, ma:

$(this).html('').dialog('destroy'); 

fare .html ('') non fa le cose pulite su piacevolmente. dovresti usare .empty() invece. forse ci sono alcuni vagabondi o qualcosa che non è stato completamente ripulito.

potresti anche voler provare ad aggiungere $ (this) .remove(); al tuo handler vicino.

Answer 2

questo ha funzionato per me.

$('.jq_tinymce').each(function(idx, el) 
    { 
     toggle_editor('textarea[name="'+ $(this).attr('name') +'"]', $(this).data('tinymce_theme')); 
    }); 

Tutto ciò che devi fare è eseguire questo codice solo dopo aver aperto la finestra di dialogo. Sto usando jq_tinymce per fargli sapere quali textare iniziare. L'utilizzo di un attributo data-tinymce_theme sul tag html ti consentirà di specificare un tema di tinima.

toggle_editor è

function toggle_editor(selector, theme) 
{ 
if (theme == undefined) 
{ 
    theme = 'simple'; 
} 

if($(selector+':first').css('display') == 'none') 
{ 
    $(selector).each(function(){ 
     $(this).tinymce().hide(); 
    }) 
} 
else 
{ 
    $(selector).tinymce({ 
     script_url : Vega.base_url+'ext/tinymce_3.5_jquery/tiny_mce.js', 
     // General options 
     theme : theme, 
     width: '100%', 
     language: Vega.tinyMceLocale, 
     plugins : "autolink,lists,pagebreak,style,layer,table,save,advimage,advlink,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,advlist", 
     file_browser_callback : "tinymce_uploader", 

     // Theme options 
     theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect,styleprops", 
     theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor", 
     theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,|,print,|,fullscreen,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak", 
     theme_advanced_toolbar_location : "top", 
     theme_advanced_toolbar_align : "left", 
     theme_advanced_statusbar_location : "bottom", 
     theme_advanced_resizing : true 
    }); 
} 

}

Answer 3

ho dovuto fare in modo che il mio tinymce init è stato eseguito dopo la finestra di configurazione. Questo ha risolto il problema per me.

$("#editDialog").dialog({ 
       ...   
      }); 
      tinymce.init({ 
       selector: '#txtCourseDesc' 
      }); 
      $('#editDialog').show();