Django-TinyMCE具有多种形式

Question

我正在尝试创建一个具有多个TinyMCE编辑器实例的HTML页面。编辑器的数量因请求而异；因此我无法枚举它们并单独初始化它们。这是我的代码：

views.py：

from tinymce.widgets import TinyMCE
class ThreadForm(forms.Form):
    subject = forms.CharField(max_length=300, widget=forms.TextInput(attrs={'size':'100'}))
    body = forms.CharField(widget=TinyMCE())
class MessageForm(forms.Form):
    thread_pk = forms.IntegerField()
    body = forms.CharField(widget=TinyMCE())

urls.py：

urlpatterns = patterns('',
    ...
    url(r'^tinymce/', include('tinymce.urls')),
)

settings.py：

INSTALLED_APPS = (
    ...
    'tinymce',
)
...
TINYMCE_DEFAULT_CONFIG = {
    'selector': 'textarea',
    'theme': 'advanced',
    'width': 600,
    'height': 300,
    'theme_advanced_toolbar_location': 'top',
    'theme_advanced_buttons1': 'bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,bullist,numlist,|,outdent,indent,hr,|,undo,redo',
    'theme_advanced_buttons2': 'cut,copy,paste,pastetext,pasteword,|,search,replace,|,link,unlink,charmap,|,visualaid,table,|,blockquote,sub,sup,|,preview,code,emotions,image',
    'theme_advanced_buttons3': '',
    'plugins': 'paste,table,spellchecker,searchreplace,emotions',
    'theme_advanced_resizing': True,
}

member_forums.html：

...
{% block headers %}
{{ thread_form.media }}
{% endblock %}
...
<table id="new_thread_table">
    {{ thread_form.as_table }}
</table>
...
{% for message_form in message_forms %}
    <table class="new_message_table">
        {{ message_form.as_table }}
    </table>
    ...
{% endfor %}

模板中有一个ThreadForm和多个MessageForms。

当我在HTML中注释掉MessageForms时，ThreadForm似乎正常工作，但当我取消注释时，ThreadForm会加载一个不更新的TinyMCE皮肤(添加文本不会使撤消按钮显示为已启用的状态)，而当我提交表单时，表单的主体条目丢失，导致form.is_valid失败。

我的模板头中只有{{ thread_form.media }}，而MessageForms则没有。反复通过：

{% for message_form in message_forms %}
    {{ message_form.media }}
{% endfor %}

也没做什么好事。

在进行了一些研究之后，当加载TinyMCE时，MessageForms似乎被初始化了太多次，导致在表单提交过程中数据丢失(编辑在顶部回答：TinyMCE with Django：“此字段是必需的”)。

我不知道该怎么让这件事起作用。任何帮助或指示都将不胜感激。

Answer 1

TinyMCE使用id来分配哪些文本区域应该是TinyMCE，并且id在HTML中应该是唯一的。由于我的身体都被称为body，Django的form.as_table用相同的id呈现它们。当TinyMCE试图将编辑器分配给id时，当它使用相同的id到达第二个字段时，它失败了。类似问题：

加载两个文本区域时，TinyMCE无法工作

我把MessageForm.body改成了MessageForm.body1，这让ThreadForm TinyMCE变得很有魅力。现在，我需要迭代并更改每个MessageForm的id。但应该有更好的解决办法。TinyMCE应该能够呈现所有文本区域。或许可以把身份证全部移除？

Answer 2

删除Django-TinyMCE并开始使用TinyMCE 4.0.21。它现在运行得很好。

views.py：

...
class ThreadForm(forms.Form):
    subject = forms.CharField(max_length=300, widget=forms.TextInput(attrs={'size':'100'}))
    body = forms.CharField(widget=forms.Textarea(attrs={'class':'thread'}))
...

member_forums.html：

...
{% block headers %}
<script type="text/javascript" src="{% static 'tinymce/tinymce.min.js' %}"></script>
<script type="text/javascript" src="{% static 'tinymce/threads.js' %}"></script>
{% endblock %}

{% block content %}
    ...
    <form id="new_thread_form" method="post" action="">
        {% csrf_token %}
        <table id="new_thread_table">
            {{ thread_form.as_table }}
        </table>
    </form>
    ...
    <form class="new_message_form" method="post" action="">
    {% csrf_token %}
    {% for message_form in message_forms %}
        {{ message_form.thread_pk }}
        <textarea class="message" name="body"></textarea>
    {% endfor %}
    ...
{% endblock %}

threads.js：

tinyMCE.init({
    selector: "textarea.thread",
    theme: "modern",
    ...
});

tinyMCE.init({
    selector: "textarea.message",
    theme: "modern",
    ...
});

Answer 3

下面的解决方案对我有效。显然，TinyCME的默认javascript代码有问题。

使用django和tinycme的当前设置，只需添加一个js函数就可以覆盖默认的tinycme脚本。

转到正在加载到HTML页面上的.js文件，并添加以下函数：

(function ($) {
    function tinymce4_init(selector) {
        var tinymce4_config = { setup: function (editor) { editor.on('change', function () { editor.save(); }); }, "language": "en", "directionality": "ltr", "cleanup_on_startup": true, "custom_undo_redo_levels": 20, "selector": "textarea.tinymce4-editor", "theme": "modern", "plugins": "\n            textcolor save link image media preview codesample contextmenu\n            table code lists fullscreen  insertdatetime  nonbreaking\n            contextmenu directionality searchreplace wordcount visualblocks\n            visualchars code fullscreen autolink lists  charmap print  hr\n            anchor pagebreak\n            ", "toolbar1": "\n            fullscreen preview bold italic underline | fontselect,\n            fontsizeselect  | forecolor backcolor | alignleft alignright |\n            aligncenter alignjustify | indent outdent | bullist numlist table |\n            | link image media | codesample |\n            ", "toolbar2": "\n            visualblocks visualchars |\n            charmap hr pagebreak nonbreaking anchor |  code |\n            ", "contextmenu": "formats | link image", "menubar": true, "statusbar": true }; if (typeof selector != 'undefined') { tinymce4_config['selector'] = selector; }
        tinymce.init(tinymce4_config);
    }
    tinymce4_init();
})();

在上面的脚本中，更改"selector"：“textarea.tinymce4-”以匹配您自己的类/id/tag。这是一个完整的片段与所有插件等。

对于简化的版本，您可以使用：

 tinyMCE.init({
     selector: "#id_blog-content",
     theme: "modern"
 });

其中选择器引用表单的id/class/标记。

@Nagra:为了在同一个html页面上为不同的表单使用唯一的In，您可以使用窗体的前缀。通过这种方式，表单的每个字段都以这种格式获得了唯一的id：

id_{prefix}-{field name}。

对于每个表单和选择器: textarea，我都有唯一的ids。然而，它并没有解决这个问题。