django StackedInline tinyMCE問題

Question

當我在內嵌塊中單擊Add another {{ verbose_name }}時，顯示tinymce-textatea，但所有控件和編輯都被禁用（控制檯中沒有錯誤）。在3首textarea的tinymce正常工作。 Imho它是init問題。
代碼：

#templates\admin\base.html 
<script type="text/javascript" src="{% admin_media_prefix %}tinymce/jscripts/tiny_mce/tiny_mce.js"></script> 
<script type="text/javascript"> 
    window.__admin_media_prefix__ = "{% filter escapejs %}{% admin_media_prefix %}{% endfilter %}"; 

    var tMCE = tinyMCE.init({ 
     //General otptions 
     mode : 'textareas', 
     theme: 'advanced', 
     readonly : false, 
     plugins : 'autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template', 

     // Theme options 
     theme_advanced_buttons1 : 'save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,formatselect,fontsizeselect,|,forecolor,backcolor', 
     theme_advanced_buttons2 : 'cut,copy,paste,pastetext,pasteword,|,search,replace,|,undo,redo,|,link,unlink,anchor,|,image,media,|,fullscreen,code', 
     theme_advanced_buttons3 : '', 
     theme_advanced_toolbar_location : 'top', 
     theme_advanced_toolbar_align : 'left', 
     theme_advanced_statusbar_location : 'bottom', 
     theme_advanced_resizing : true, 

     file_browser_callback : function(field_name, url, type, win) { 
      var w = window.open('/elfinder', null, 'width=1000,height=800'); 
      w.tinymceFileField = field_name; 
      w.tinymceFileWin = win; 
     } 

    }); 
</script> 

#admin.py 
class PostInline(admin.TabularInline): 
    model = Post 
    readonly_fields = ('created', 'updated') 

class ItemAdmin(admin.ModelAdmin): 
    inlines = [ 
     PostInline, 
    ] 
    readonly_fields = ('created', 'updated') 

UPDATE：

#base.html 

$(document).ready(function(){  
    tinyMCE.settings = tinyMCE_opt; 
    $('textarea:not(.inline-group textarea)').each(function() { 
     tinyMCE.execCommand('mceAddControl', false, this.id); 
    }); 
}); 
#stacked.html 
$(rows).formset({ 
      prefix: "{{ inline_admin_formset.formset.prefix }}", 
      addText: "{% blocktrans with inline_admin_formset.opts.verbose_name|title as verbose_name %}Add another {{ verbose_name }}{% endblocktrans %}", 
      formCssClass: "dynamic-{{ inline_admin_formset.formset.prefix }}", 
      deleteCssClass: "inline-deletelink", 
      deleteText: "{% trans "Remove" %}", 
      emptyCssClass: "empty-form", 
      removed: updateInlineLabel, 
      added: (function(row) { 
       initPrepopulatedFields(row); 
       reinitDateTimeShortCuts(); 
       updateSelectFilter(); 
       updateInlineLabel(row); 

       $(row).find('textarea').each(function() { 
        tinyMCE.execCommand('mceAddControl', false, this.id); 
       }); 

      }) 
     }); 

但是出現了另一個問題：
如果發生錯誤方法formset不會再和內聯文字區域合作是一個簡單的文字區域

Answer 1

解決方案（感謝Thomas）：

#base.html 
$(document).ready(function(){  
    tinyMCE.settings = tinyMCE_opt; 
    $('textarea:not(.inline-group textarea)').each(function() { 
     tinyMCE.execCommand('mceAddControl', false, this.id); 
    });   
}); 

#stacked.html 

$(rows).formset({ 
    prefix: "{{ inline_admin_formset.formset.prefix }}", 
    addText: "{% blocktrans with inline_admin_formset.opts.verbose_name|title as verbose_name %}Add another {{ verbose_name }}{% endblocktrans %}", 
    formCssClass: "dynamic-{{ inline_admin_formset.formset.prefix }}", 
    deleteCssClass: "inline-deletelink", 
    deleteText: "{% trans " 
    Remove " %}", 
    emptyCssClass: "empty-form", 
    removed: updateInlineLabel, 
    added: (function (row) { 
     initPrepopulatedFields(row); 
     reinitDateTimeShortCuts(); 
     updateSelectFilter(); 
     updateInlineLabel(row); 
     $(row).find('textarea').each(function() { 
      tinyMCE.execCommand('mceAddControl', false, this.id); 
     }); 


    }) 
}); 

$('.dynamic-{{ inline_admin_formset.formset.prefix }} textarea').each(function() { 
    tinyMCE.execCommand('mceAddControl', false, this.id); 
}); 

Answer 2

不幸的是，你需要捕獲「新內聯」按鈕，並使用它將mce附加到新的cr自己吃了田。或者你可以重新初始化整個頁面，但這只是浪費。

編輯：

你需要使用

django.jquery("#id-of-button").click(function() { 
    tinyMCE.execCommand('mceAddControl',false,'id-of-new-textarea'); 
} 

Answer 3

這裏有一個工作（至少在TinyMCE的3.X）黑客攻擊，而無需修改模板。

django.jQuery(function ($) { // django's copy of jQuery is crucial for old_add.click() 
    setTimeout(function() { 
     $('.add-row a').each(function() { 
      var inline_group = $(this).parents('.inline-group'); 
      var new_add = $(this).clone(); 
      var old_add = $(this); 
      old_add.hide().before(new_add); 
      new_add.click(function() { 
       old_add.click(); 
       if (inline_group.find('.mceEditor').length) { 
        var widget = inline_group.find('.form-row:not(.empty-form) .mceEditor'); 
        var textarea = widget.prev('textarea').show(); 
        widget.remove(); 
        tinyMCE.execCommand('mceAddControl', true, textarea.attr('id')); 
       } 
      }); 
     }); 
    }, 0); 
});