현재 글쓰기 페이지
- 이전 토픽에서 CKEditor를 활용하여 이미지 파일 업로딩 기능까지 구현해 보았습니다.
- admin 페이지에서는 파일 업로딩 기능이 구현이 되었으나, 아직 글쓰기 페이지에서는 적용이 안되어 있습니다.
- 이제부터 본격적으로 글쓰기 페이지를 예쁘게 꾸며보도록 합시다.
forms.py 수정
- 화면에 보이는 폼을 수정하기 위해 [forms.py]를 다음과 같이 추가하여 작성합니다.
from ckeditor_uploader.widgets import CKEditorUploadingWidget
widgets = {
'title': forms.TextInput(
attrs={'class': 'form-control', 'style': 'width: 100%', 'placeholder': '제목을 입력하세요.'}
),
'author': forms.Select(
attrs={'class': 'custom-select'},
),
'body': forms.CharField(widget=CKEditorUploadingWidget()),
}
- 'widgets'을 지정하면, 장고에서 자체적으로 제공하는 폼의 형태를 빌려올 수 있습니다.
'title' TextInput가 형태가 맞는 형태이고, 'author'는 'Select'가 맞는 형태이므로 이를 적용하였습니다.
'body'는 CKEditor 자체만의 위젯이 제공을 하므로 [CKEditorUploadingWidget]을 import하여 적용시켜주었습니다.
- 그 안의 속성('attrs=')으로 폼에 적용되는 css의 class를 지정해 주었습니다.
이는 제가 나름대로 [getbootstrap documentation]에서 각각 html에 맞는 class를 찾아서 적용한 것이므로 다르게 적용시켜도 됩니다.
https://getbootstrap.com/
createBlog.html 수정
- 이제 [createBlog.html]을 수정하여 봅니다.
- css를 적용해서 본인이 원하는대로 꾸며봅시다.
- 여기에서 중요한 부분은 form 태그의 'enctype'과 {{ form.media }}입니다.
- enctype="multipart/form-data"를 설정해주어야 문자 이외의 이미지 파일 같은 것들도 같이 묶여서 전송이 됩니다.
- 또한 {{ form.media }}를 넣어 주어야 CKEditor의 폼이 적용이 됩니다.
{% extends 'base.html' %}
{% block content %}
<br>
<div class="container">
<h1>글쓰기</h1>
<hr>
<br><br>
<form method="POST" enctype="multipart/form-data">
{% csrf_token %}
{{ form.media }}
{{ form.as_p }}
<input type="submit" class="btn btn-dark" value="저장"/>
</form>
</div>
{% endblock %}
적용 확인
- 서버를 구동시키고, 적용이 되었는지 확인해봅시다.
- 저장 후, admin에서 확인해봅시다.
- 또한, 서버에도 정상적으로 파일이 업로드가 되었는지도 확인해봅시다.
