Django-tinyMCE Submit button not working

Question

I've implemented TinyMCE with the django-tinymce package. However, my submit button which worked fine without TinyMCE now has become rather useless since I can't submit the form, once everything is filled out.

I can use Ctrl + S inside of TinyMCE (I discovered that by accident) and everything will get submitted correctly. Also, I can use the save-button of the TinyMCE "save" plugin to submit.. Do I have to configure the submit button to make it work with TinyMCE?

Template:

{% extends 'medisearch/header.html' %}
{% load crispy_forms_tags %}
{% block header %}
{{ form.media }}
{% endblock %}
{% block content %}
▷⋅⋅⋅⋅⋅⋅⋅<form action="{{ url }}" method="post">
▷⋅⋅⋅⋅⋅⋅⋅   <div class="form-group">
▷⋅⋅⋅⋅⋅⋅⋅    {% csrf_token %}
▷⋅⋅⋅⋅⋅⋅⋅    {{ form|crispy }}
▷⋅⋅⋅⋅⋅⋅⋅  </div>
▷⋅⋅⋅⋅⋅⋅⋅  <input type="submit" class="btn btn-primary" value="Speichern" />
▷⋅⋅⋅⋅⋅⋅⋅</form>
{% endblock %}

views.py

class EntryDetail(DetailView):
    model = Mediwiki
    slug_field = 'non_proprietary_name'
    template_name = 'mediwiki/entry.html'

class MediwikiForm(FormView):
    template_name = 'mediwiki/create.html'
    form_class = MediwikiForm⋅
    success_url = "/" #TODO user get's redirected to page he's created⋅

    def form_valid(self, form):
        form.save()
        return super(MediwikiForm, self).form_valid(form)

class EntryDisplay(View):
    def get(self, request, *args, **kwargs):
        try:
            view = EntryDetail.as_view()
            return view(request, *args, **kwargs)
        except Http404: # If there's no entry in db:
            if check_user_editor(request.user) == True:
                view = MediwikiForm.as_view()
                return view(request, *args, **kwargs)
            else:
                pass
    def post(self, request, *args, **kwargs):
        view = MediwikiForm.as_view()
        return view(request, *args, **kwargs)⋅

forms.py

class MediwikiForm(ModelForm):
    wiki_page = forms.CharField(widget=TinyMCE(attrs={'cols': 80, 'rows': 30}))
    class Meta:
        model = Mediwiki⋅
        fields = '__all__'

TinyMCE is in urls.py and under INSTALLED_APPS ..

Answer 1

I know it's probably too late for you, but it seems that i had the same issue, just now and my solution might help someone in the future.

You are using crispy, which includes the javascript files for the form on it's own.

Therefore the django_tinymce/init_tinymce.js will be referenced twice. This will break the submittion of your content, since the form is initialized twice.

In order to fix this you may just remove the call of {{ form.media }}.

Answer 2

I had a similar issue and learned that it has to do with the way that TinyMCE deals with text areas. The following init script worked for me:

<script>
tinymce.init({
    selector:'.editor',
    setup: function (editor) {
        editor.on('submit', function (e) {
            editor.save();
        });
    }
 });
</script>

Answer 3

@artifex_knowledge answers makes sense and it works. To build up on it, besides calling editor.save() on submit (or on change ), keep in mind that if users don't fill the text area, they won't be able to submit the form, but the this field is required error message won't be displayed.

This is because the text area field (in this case wiki_page ) is required by default, so in the html it will be rendered with required . But TinyMCE hides the text area (and replaces it with an iframe :( ) , so if you try to submit the form with an empty required, it won't, but the error message will keep hidden.

(A possible solution is to use JS to remove the required attribute and check it in django later).

Answer 4

只需从用作编辑器的textarea元素中删除required字段。

Answer 5

Deleting the 'required' field in the textarea element solved my problem (like Krysits mentioned)

Answer 6

I also had the same issue as yours, and I just removed for instance: "wiki_page" charfield from the subclass of Modelform, and put Tinymce widget in the Meta class.

class MediwikiForm(ModelForm):
class Meta:
    model = Mediwiki⋅
    fields = '__all__'
    widgets = {
              'wiki_page': TinyMCE(attrs={'cols': 80, 'rows': 30})
             }