ckeditor不保存更改

Question

我有一个表单，在其中一个字段中，我使用了ckeditor。但是，当我提交表单时，没有保存ckeditor字段中的更改。在模型中，我将字段更改为RichTextField。我已经安装了"在我的应用程序设置里也有

我也都试图加载这些脚本在我的模板:

{% load static %}
<script type="text/javascript" src="{% static "ckeditor/ckeditor-init.js" %}"></script>
<script type="text/javascript" src="{% static "ckeditor/ckeditor/ckeditor.js" %}"></script> 

最重要的是，我还试图添加{{ form.media }}而不是脚本，但它仍然不起作用。

我正在使用html动态更新表单。

这是我现在的表单模板

<form action='' method="POST" class="form" hx-post='' hx-swap='outerHTML'>
{% csrf_token %}
{{ form.media }}
<div class="form-group">
{% for field in form %}
{{ field }}
</div>
{% endfor %}


<br>
<div class='htmx-indicator'>Loading...</div>
<div class="text-center">
<button class='htmx-inverted-indicator' type='submit' >Save</button>
</div>

{% if message %}
<p>{{ message }}</p>
{% endif %}

</form>

有人知道为什么表单没有被保存吗?

编辑这是我的视图

@login_required
def book_update_view(request, id=None):
book = get_object_or_404(Book, id=id)
form = BookForm(request.POST or None, instance=book)
context = {
"form": form,
"object": book,
}
if form.is_valid():
form.save()
context['message'] = 'Saved!'
if request.htmx:
return render(request, "book/snippets/forms.html", context)
return render(request, "book/update.html", context)  

Answer 1

看起来CKEditor和html之间存在冲突。下面的内容很大程度上依赖于这个答案。它做了以下更改:

• 将html标签切换到按钮而不是表单

• 应用事件CKEditor的监听器——它通过{{field.label_tag}}实现这一点现在包含

• 修复错误的标签

试着让你的表单像这样(不要忘记替换CKEditor字段的名称-你可能需要检查你的源代码，看看这是如何呈现的):

<form method="post">
{% csrf_token %}
{{ form.media }}
<script>
document.body.addEventListener('htmx:configRequest', (event) => {
var element = new CKEDITOR.dom.element( document.getElementById( '{{ form.NAMEOFCKEDITORFIELD.id_for_label }}' ) );
event.detail.parameters['{{ form.NAMEOFCKEDITORFIELD.html_name }}'] = element.getEditor().getData();        
})
</script>
<div class="form-group">
{% for field in form %}
{{ field.label_tag }}:<br />{{ field }}
{% endfor %}    
</div>
<br>
<div class='htmx-indicator'>Loading...</div>
<div class="text-center">
<button class='htmx-inverted-indicator' type='submit' hx-post="{% url 'book_update_view_name' book.id %}" hx-target="#{{form.id}}" hx-swap="outerHTML">Save</button>
</div>
{% if message %}
<p>{{ message }}</p>
{% endif %}

Answer 2

如果你不想要额外的get参数，这可能会给你一个问题，你可以把onclick在你的提交按钮有ckeditor传输数据到你的领域。像这样:

<script>
function saveCK(){
let ckdata = CKEDITOR.instances.your_field_id.getData();
$('#your_field_id').val(ckdata);
}
</script>

是的，抱歉jquery，我不确定香草javascript等效

，在提交按钮上添加

onclick="saveCK()"

Answer 3

还有一个选择是使用hx-vals。

例如:

<button type='submit' hx-vals="js:{ {{ form.NAMEOFCKEDITORFIELD.name }}: CKEDITOR.instances['{{ form.NAMEOFCKEDITORFIELD.id_for_label }}'].getData()}" hx-post=POSTURL>Save</button>