मैं अपने jQueryUI मोडल संवाद में TinyMCE में क्यों टाइप नहीं कर सकता?

Question

मेरे पास एक मूल मोडल संवाद है, जिसमें TinyMCE का एक उदाहरण है। यह मोडल प्रत्येक बार खोले जाने पर गतिशील रूप से बनाया जाता है, और संवाद (और तत्व) नष्ट हो जाता है और संवाद बंद हो जाता है।

पहली बार जब मैं संवाद खोलता हूं, तो सब कुछ ठीक है। फॉर्म लोड (AJAX कॉल), वर्दी को फॉर्म पर लागू किया जाता है, और TinyMCE Textarea पर लागू होता है। मैं सभी कार्यों को ठीक कर सकता हूं। बाद के सभी बार मैं फॉर्म खोलता हूं, प्रक्रिया स्वयं को दोहराती है, अंतर यह है कि, हालांकि TinyMCE को Textarea पर लागू किया गया है, मैं अब इसमें टाइप नहीं कर सकता।

यह एक विधि है कि लिंक क्लिक करने पर ही आग में है:

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

जब टेम्पलेट लोड, अंतिम लाइनों TinyMCE पाठ क्षेत्र के लिए लोड के रूप में लागू होते हैं:

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

इस का उपयोग करता है TinyMCE के लिए JQuery प्लगइन tinyMCE की एक वर्ग के साथ सभी textareas में संपादक लोड करने के लिए, जो इरादे के रूप में काम करता है।

मैंने इसी तरह के मुद्दों पर स्टैक ओवरव्लो पर कई अलग-अलग प्रश्न पढ़े हैं, लेकिन कोई भी जिसने इस मुद्दे का उत्तर नहीं दिया है। किसी के पास कोई विचार है?

कुछ अनुवर्ती: मैंने शुरुआती संवाद खुला, और बाद के उद्घाटन के बीच कुछ आउटपुट तुलना की, और कुछ देखा। शुरुआती लोड में, और टेक्स्ट क्षेत्र पर TinyMCE लागू किया जा रहा है, मैं देखता हूं कि एप्लिकेशन ने आईफ्रेम बनाया है, मेनू के लिए एक पंक्ति के साथ एक तालिका लोड की है और एक अतिरिक्त आईफ्रेम के साथ एक पंक्ति है। (पहले लोड पर) कि iframe की सामग्री इस तरह दिखता है:

<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> 

लेकिन, अनुवर्ती लोड पर मैं मेनू मिलता है, लेकिन है कि आंतरिक आइफ्रेम इस तरह दिखता है:

<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> 

कि क्या कारण हो सकता है?

अद्यतन 2: पेट्रीसिया के सुझाव के अनुसार, मैं निम्नलिखित करने के लिए अपने संवाद के करीबी ईवेंट परिवर्तित:

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

कुछ कदम डिबगिंग के साथ

, और Firebug, मैं पुष्टि की है कि संपादक नष्ट हो जाता है, और उसके बाद संवाद को नष्ट करने और div को हटाने से पहले textarea पूरी तरह से हटा दिया। उस ने कहा, संवाद को दोबारा शुरू करना मैं अभी भी अपने अंतिम अपडेट की तरह दिखने वाले अंतर्निहित कोड के साथ, नए TinyMCE उदाहरण में टाइप करने में असमर्थ हूं। यह पिछले तत्व के अनुचित विनाश से संबंधित प्रतीत नहीं होता है।

अद्यतन: पेट्रीसिया के अंतिम सुझाव ajax कॉल, कि संवाद में प्रपत्र लोड करता है, एक .load() विधि में जाने के लिए, और फिर संवाद बनाने था। मैंने यह कोशिश की, और चीजें जल्दी दक्षिण में चली गईं। रिमोट कंटेंट में स्क्रिप्ट होती है जिसे निष्पादित करना होगा, इसलिए .jax() विधि पर स्क्रिप्ट डेटा टाइप करें। .load() विधि में यह विकल्प नहीं है, और इसे वास्तव में पसंद नहीं आया। तो अब मुझे यकीन नहीं है कि आगे क्या प्रयास करें।

Answer 1

जब मैं किसी अनुभाग को रीफ्रेश करने के लिए बटन का उपयोग करता हूं तो मैंने एक ही समस्या में भाग लिया है।

आपको फिर से चालू करने से पहले आपको छोटे एमसीई नियंत्रणों को पूरी तरह से नष्ट करना होगा।

मैं अपने ताज़ा करें बटन हैंडलर में इस तर्क का उपयोग करें:

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



     } 

या तो इनमें से किसी एक ठीक करना चाहिए:

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

}); 

संवाद के लिए

, मैं "बंद" हैंडलर इस तरह की स्थापना की है आपके लिए समसया!

संपादित करें:

मैं अगर यह propblem है या नहीं, लेकिन पता नहीं है:

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

.html ('') अच्छी तरह से साफ बातें नहीं कर रही है। आपको इसके बजाय .empty() का उपयोग करना चाहिए। शायद कुछ भटकने वाले हैंडलर हैं या कुछ पूरी तरह से साफ नहीं किया जा रहा है।

आप $ (यह) .remove() जोड़ना भी कोशिश कर सकते हैं; अपने करीबी हैंडलर को।

Answer 2

यह मेरे लिए काम किया।

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

आपको केवल डायलॉग खोलने के बाद ही यह कोड चलाने की आवश्यकता है। मैं jq_tinymce का उपयोग कर रहा हूं ताकि यह पता चल सके कि कौन से टेक्स्टरेज़ इनिट में हैं। एचटीएमएल टैग पर डेटा-tinymce_theme विशेषता का उपयोग करने से आप एक tinymce विषय निर्दिष्ट करने में सक्षम होंगे।

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

मुझे यकीन है कि मेरी TinyMCE init संवाद config के बाद मार डाला गया था बनाने के लिए था। यह मेरे लिए समस्या तय है।

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