django StackedInline tinyMCE 问题

Question

当我单击在内联块中添加另一个{{ verbose_name }}时，显示tinymce-textatea，但所有控件和编辑都被禁用（控制台中没有错误）。在3中，第一个textarea的tinymce工作正常。 恕我直言，这是初始化问题。
代码：

#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')

更新：

#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

解决方案（感谢托马斯）：

#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 附加到新创建的字段。或者您可以重新初始化整个页面，但这只是浪费。

编辑：

你需要使用

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

Answer 3

这是一个无需修改模板即可工作的 hack（至少在 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);
});