Django Ckeditor автоматическое сохранение данных на сервере / бэкенде

Как мне сделать так, чтобы автоматически сохранять данные из frontend ckeditor в backend без перезагрузки страницы. Я пытался использовать ajax, чтобы заставить это работать, но я не могу отправить обновленный контент в бэкенд.

Кроме того, метод javascript on change срабатывает дважды на один ввод. Например, если я набираю "A" для нового ввода в ckeditor, он сработает дважды по неизвестной причине.

Подход 1 - HTML / JS (Нажмите кнопку "отправить" при обнаружении изменений)

<form class="pt-2" action="#" method="POST" id="designer-form">
    {% csrf_token %}
    {{ form.media }}
    {% for field in form %}
        {{ field }}
    {% endfor %}
    <div class="mt-4 flex justify-end space-x-4">
        <button type="submit" id="submit">
            Save Changes
        </button>
    </div>
</form>

<script>
    CKEDITOR.on('instanceCreated', function(event) {
        let editor = event.editor;
        editor.on('change', function() {
            setTimeout(function () {
                document.getElementById("submit").click();
            }, 2500);
        });
    });
</script>

Подход 2 - HTML / JS (Сериализация данных)

<form class="pt-2" action="#" method="POST" id="designer-form">
    {% csrf_token %}
    {{ form.media }}
    {% for field in form %}
        {{ field }}
    {% endfor %}
    <div class="mt-4 flex justify-end space-x-4">
        <button type="submit" id="submit">
            Save Changes
        </button>
    </div>
</form>

<script>
    CKEDITOR.on('instanceCreated', function(event) {
        let editor = event.editor;
        editor.on('change', function() {
            let data = editor.getData();
            setTimeout(function (){

                $.ajax({
                    url: "",
                    type: "POST",
                    data: $("#designer-form").serialize(),
                    success: function (response) {
                    }
                })
            }, 2500);
        });
    });
</script>

views.py

def designer_edit(request, design_slug):
    context = {}
    
    science = Science.objects.get(design=design)        
    form = ScienceForm(request.POST or None, instance=science)

    if request.method == 'POST':
        print('\tMETHOD = POST')

        if form.is_valid:
            print('\tForm is valid')
            for key, value in request.POST.items():
                print(f'key = {key} | value = {value}')
                form.save()
                
    else:
        context['science'] = science
        context['form'] = form
        print('</design_science_edit>')
        return render(request, 'designer/design-science-edit.html', context)

Вернуться на верх