在 html 模板中编写表单媒体后，我无法上传所有内容

编程问答 2022-04-23

问题描述

我想在我的模板中添加 ckeditor5，所以我将 {{form.media}} 添加到我的模板中。

编写 {{form.media}} 代码后，我无法上传所有内容。

似乎输入标签不起作用。

请帮我弄清楚发生了什么！！

THX~~

我的代码如下：

查看

def post(request):
Form = PostForm()
if request.method == 'POST':
    Form = PostForm(request.POST)
    Form.save()
    return render(request,"Upload_done.html")
else:
    return render(request,"upload.html",{'Form': Form})

html

<form action="" method="POST" enctype="multipart/form-data">{% csrf_token %}
{{ Form.media }}
{{ Form.as_p }}
<input type="submit" value="Upload">

表格

class PostForm(forms.ModelForm):
class Meta:
    model = Post
    fields = ['title','content']

型号

class Post(models.Model):
title = models.CharField(max_length=100)
content = ckeditor5Field(config_name='extends')
created_at = models.DateTimeField(auto_Now_add=True)

解决方法

发生的情况是 content 被呈现为 textarea 并且 CKEditor 通过向其元素添加一些内联 CSS 来隐藏它。大多数 WYSIWYG 编辑器不会根据用户输入直接更改表单字段的内容，而是在表单提交时更改内容。这在这里成为一个问题，因为浏览器尝试在提交之前验证表单，但该字段是空（用于填充它的 JavaScript 尚未运行）并且它还具有 required 属性.

因此，您的表单未提交，增加了浏览器应该显示的错误弹出窗口的问题，因为隐藏了元素的 CSS 也没有显示。所有这些的解决方案是通过使用表单标记上的 novalidate 属性向浏览器指示简单地不验证表单：

<form action="" method="POST" enctype="multipart/form-data" novalidate>
{{ Form.media }}
{{ Form.as_p }}
<input type="submit" value="Upload">
ckeditor5djangodjangoformsformsformshtml