Django-TinyMCE 具有多种形式

Django-TinyMCE with Multiple Forms

本文关键字：多种形式 Django-TinyMCE      更新时间：2023-09-26

我正在尝试创建一个包含多个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 %}

模板中有一个线程窗体和多个消息窗体。

当我注释掉 HTML 中的 MessageForms 时，ThreadForm 似乎可以工作，但是当我取消注释它们时，ThreadForm 加载了一个不会更新的 TinyMCE 皮肤（添加文本不会使撤消按钮显示为启用，即使它是启用的），当我提交表单时，表单的正文条目丢失， 导致form.is_valid失败。

我的模板标题中只有{{ thread_form.media }}，而消息表单没有任何内容。 循环访问：

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

也没有任何好处。

经过一些研究，似乎TinyMCE在加载MessageForms时被初始化了太多次，导致数据在表单提交过程中丢失（编辑在顶部答案：TinyMCE与Django："此字段是必填的"）

我不知道如何让它工作。 任何帮助或指示将不胜感激。

移除了 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 %}

线程.js：

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

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

加载两个文本区域时 TinyMCE 不起作用

我将 MessageForm.body 更改为 MessageForm.body1，这使得 ThreadForm TinyMCE 像一个魅力一样工作。 现在，我需要循环访问并更改每个消息表单的 id。 但应该有更好的解决方案。 TinyMCE应该能够呈现所有文本区域。 也许完全删除 ID？

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

使用 django

和 tinycme-django 的当前设置，你只需要添加一个 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();
})();

在上面的脚本中，更改"选择器"："textarea.tinymce4-editor"以匹配您自己的类/id/标签。这是一个包含所有插件等的完整片段。

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

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

其中选择器引用表单的 id/类/标签。

@Nagra：为了在同一 html 页面上为不同的表单使用唯一 ID，您可以为表单使用前缀。 这样，表单的每个字段都会获得以下格式的唯一 ID：
id_{prefix}-{field name} .

我为每个表单和选择器都有唯一的ID：文本区域。然而，它并没有解决问题。

相关文章：