Django Grappelli Tabular Inline添加新行TinyMCE textfield不可编辑 [英] Django Grappelli Tabular Inline add new row TinyMCE textfield not editable

问题描述

我有一个带有表格内联函数的ModelAdmin。

当加载页面时，我使用extra = 0来防止自动插入空白行。

现在，当我点击+号来插入新行时，该行被加载，但是tinymce文本字段不可编辑。

任何人都知道是什么原因和如何解决这个问题？

阅读文档后：

http://django-grappelli.readthedocs.org/en/latest/customization.html#using-tinymce

我注意到：

使用TinyMCE和Inline是由于隐藏的空格，比较棘手。您需要编写一个自定义模板，并使用inline-callbacks来

onInit：从空格中删除TinyMCE实例。

onAfterAdded：从表单初始化TinyMCE实例。

onBeforeRemoved：从表单中删除TinyMCE实例。

默认情况下不支持带有Inline的TinyMCE。

此示例为何？我注意到这是一个TinyMCE函数，我需要更改。

解决方案

它看起来像一些CSS类并且Grappelli使用的HTML结构自Almflm的解决方案编写以来都有变化。但是，我可以修改hir解决方案来与Grappelli v2.4.7一起使用，并简化了该过程中的实现。

设置

1. 覆盖相关模板将 /PATH/TO/grappelli/templates/admin/edit_inline/stacked.html 复制到 / PATH / TO / YOURMOD / templates / admin / edit_inline /


2. 在您网站的 settings.py 中，确保YOURMOD grappelli在 INSTALLED_APPS 中。否则，Django将继续使用Grappelli版本的模板。

代码

现在，您只需要对 stacked.html 的副本进行两次更改。找到开始的块块：

  $（＃{{inline_admin_formset.formset.prefix}}  -  group）。 grp_inline（{
  

...并在该块内进行以下更改：

1. 添加一个 onBeforeAdded 这样的函数（或修改现有的函数，如果存在，但我没有一个）：

     onBeforeAdded：function（form）{
    // New inlines start as a hidden带有类grp-empty-form的模板
    //这包含一个textarea，TinyMCE正确转换，但
    //关于从模板转换到可见的
    //表单打破TinyMCE，所以我们需要从模板中删除它，
    //然后在转换后重新添加
    // cf http://stackoverflow.com/questions/5738173/ 
    if（ tinyMCE！= undefined）{
    django.jQuery（'。grp-empty-form'）。find（'textare a'）。each（function（）{
    var tid = django.jQuery（this）.attr（id）; 
    tinyMCE.execCommand（mceRemoveControl，false，tid）; 
   }）; 
   } 
   }，
     




2. 将以下内容添加到 onAfterAdded 函数（你应该已经有一个，所以一定要修改一个，而不是定义一个新的！）：

     if（tinyMCE！= undefined）{
    //重新初始化tinyMCE实例
    deselector = tinyMCE.settings.editor_deselector; 
    django.jQuery（form）.find（'textarea：not（。'+ deselector +'）'）。each（function（k，v）{
    var tid = django.jQuery（this） attr（'id'）; 
    tinyMCE.execCommand（'mceAddControl'，false，tid）; 
   }）; 
   } 
    //这行是可选的。它只是确保新的内联出现
    //未折叠，即使inline被默认折叠
    django.jQuery（form）.removeClass（grp-closed）。addClass（grp-打开）; 
     

就是这样！

编辑
将取消选择器添加到OnAfterLoad上的 - 确保您仍然可以在一个tinymce配置文件和内联符合这一点。

I am using django Grappelli skin for my project.

I have a ModelAdmin with tabular inline function.

I use extra = 0 to prevent auto insert blank row, when the page is loaded. It works fine.

Now, when I click on the + sign to insert new row, the row is loaded, but the tinymce textfield is not editable.

Anyone know what is the reasons and how to solve this problem?

After reading the document:

http://django-grappelli.readthedocs.org/en/latest/customization.html#using-tinymce

I notice:

Using TinyMCE with Inlines is a bit more tricky because of the hidden empty-form. You need to write a custom template and use the inline-callbacks to

onInit: remove TinyMCE instances from the the empty-form.

onAfterAdded: initialize TinyMCE instance(s) from the form.

onBeforeRemoved: remove TinyMCE instance(s) from the form.

TinyMCE with Inlines is not supported by default.

Any sample for this? I notice it is a TinyMCE functions that I need to change.

解决方案

It looks like some of the CSS classes and HTML structures used by Grappelli have changes since Almflm's solution was written. However, I was able to modify hir solution to work with Grappelli v2.4.7, and simplified the implementation in the process.

Setup

1. Override the relevant template by copying /PATH/TO/grappelli/templates/admin/edit_inline/stacked.html to /PATH/TO/YOURMOD/templates/admin/edit_inline/
2. In your site's settings.py, ensure that YOURMOD is above grappelli in INSTALLED_APPS. Otherwise, Django will continue using the Grappelli version of the template.

Code

Now you just need to make two changes to your copy of stacked.html. Find the block of javascript that begins:

$("#{{ inline_admin_formset.formset.prefix }}-group").grp_inline({

...and make the following changes inside that block:

1. Add an onBeforeAdded function like this (or modify the existing function if one exists, but I didn't have one):

       onBeforeAdded:function(form) {
           // New inlines start as a hidden template with class grp-empty-form.
           // This contains a textarea, which TinyMCE converts correctly, but
           // something about the transformation from template to visible 
           // form breaks TinyMCE, so we need to remove it from the template and 
           // then re-add it after the transformation. 
           // c.f. http://stackoverflow.com/questions/5738173/
           if (tinyMCE != undefined) {
               django.jQuery('.grp-empty-form').find('textarea').each(function() { 
                   var tid = django.jQuery(this).attr("id");
                   tinyMCE.execCommand("mceRemoveControl",false,tid); 
               });
           }
       },
   

2. Add the following to the onAfterAdded function (you should already have one, so be sure to modify the existing one rather than defining a new one!):

           if (tinyMCE != undefined) {
             // re-initialise tinyMCE instances
             deselector = tinyMCE.settings.editor_deselector;
             django.jQuery(form).find('textarea:not(.'+deselector+')').each(function(k,v) {
               var tid = django.jQuery(this).attr('id');
               tinyMCE.execCommand('mceAddControl', false, tid);
             });
           }
           // This line is optional. It just ensures that the new inline appears
           // un-collapsed, even if inlines are collapsed by default
           django.jQuery(form).removeClass("grp-closed").addClass("grp-open");
   

That's it!

EDIT Added the deselector to the onAfterLoad - ensures you can still define a deselector class in a tinymce config file, and inlines will conform to this.

这篇关于Django Grappelli Tabular Inline添加新行TinyMCE textfield不可编辑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！