2

我正在尝试使用多个 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 %}

也没有做任何好事。

在做了一些研究之后，似乎 TinyMCE 在加载 MessageForms 时被初始化了太多次，导致数据在表单提交期间丢失（在顶级答案中编辑：TinyMCE with Django: "This field is required"）

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

4

3 回答 3

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",
    ...
});
于 2014-04-02T21:34:40.637 回答
0

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？

于 2014-04-01T09:03:35.223 回答
0

下面的解决方案对我有用。显然 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/class/tag。

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

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

于 2021-01-08T10:11:00.000 回答