具有多种形式的 Django-TinyMCE

Question

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

视图.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())

网址.py：

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

设置.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 和多个 MessageForm。

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

我的模板标题中只有{{ thread_form.media }} ，而 MessageForms 没有任何内容。 遍历：

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

也没有任何好处。

经过一些研究，似乎在加载 MessageForms 时 TinyMCE 被初始化了太多次，导致在表单提交过程中数据丢失（在最佳答案中编辑： TinyMCE with Django: "This field is required" ）

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

Answer 1

删除了 Django-TinyMCE 并开始使用 TinyMCE 4.0.21。 它现在工作得很好。

视图.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",
    ...
});

Answer 2

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

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

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

Answer 3

下面的解决方案对我有用。 显然 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();
})();

在上面的脚本中，更改"selector": "textarea.tinymce4-editor"以匹配您自己的 class/id/tag。 这是一个包含所有插件等的完整片段。

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

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

选择器指的是表单的 id/class/tag。

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

我对每个表单和选择器都有唯一的 id：textarea。 然而它并没有解决问题。