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)