Search code examples
javascriptdjangodjango-crispy-formsdjango-ckeditor

Django-ckeditor not saving edits with crispy-forms


I have a cripsy form and I want to change one field from Textarea to CKEDitorUploadingWdidget

So my form looks like this (I have left in what was previoulsy working:

class RenameStudyForm(BetterModelForm):
    name = forms.CharField(label='Study Name', max_length=51, required=False) # Update study name
    #waiver = forms.CharField(widget=forms.Textarea, label='Waiver of Documentation', required=False) 
    waiver = forms.CharField(widget=CKEditorUploadingWidget(), label='Waiver of Documentation', required=False)

I have amended my model as follows:

class study(models.Model):
    researcher = models.ForeignKey("auth.user") # Researcher's name
    name = models.CharField(max_length = 51) # Study name
    instrument = models.ForeignKey("instrument") # Instrument associated with study
    #waiver = models.TextField(blank = True) 
    waiver = RichTextUploadingField(blank = True)

My template looks has:

    {% load crispy_forms_tags %}
    {{ form.media }}
    {% crispy form %}    

When I enter the screen to edit the waiver I get a rich text field to edit, as I would expect. However, nothing I enter into the field is passed back to the form. Within the form I added a print statement, as below

def clean(self):
    cleaned_data = super(RenameStudyForm, self).clean()
    print(cleaned_data['waiver'])

The print always gives the original text. Can anyone help me please

EDIT

I've been reviewing console when I'm using the CKEditorUploadingWidget against the forms.Textarea widget and it appears to be generating the following jQuery warning

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience.

I believe I am getting this because I am loading the form into a modal using this button

<button type="button" class="btn btn-secondary btn-block"   onclick = "modal_form('/interface/study/{{ current_study|urlencode }}/rename_study/')" >Update Study</button>

And this view

def rename_study(request, study_name):
    #do stuff
    return render(request, 'researcher_UI/add_study_modal.html', form_package)

So my JavaScript for ckeditor is being loaded now rather than when the document is originally loaded so I think this causes the issues. Any thoughts really appreciated


Solution

  • Found the answer. The form is being submitted via ajax. As such I need to copy the CKEditor data into the form field, which I do with

    for (var instance in CKEDITOR.instances){
        CKEDITOR.instances[instance].updateElement();
    }