게시판에 어떠한 기능을 추가해볼까 고민하던 중, 글을 쓸 때 글의 작성부분이 밋밋한 점이 마음에 들지 않았다. 직접 구현하기에는 너무 어려울것 같아 구글링을 해보니, Summernote라는 에디터를 사용하면 된다고 하더라. 사용법을 찾아보니 쉬운것 같아 공유해보고자 한다.
1. HTML 헤더
- Bootstrap으로 구현된 에디터이다 보니, HTML 헤더가 필요하다.
<!DOCTYPE html>
<html lang="en">
...
</html>2. 필요한 파일 추가
<!-- include libraries(jQuery, bootstrap) -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- include summernote css/js -->
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script> 3. 에디터 불러오기
- 에디터를 적용할 textarea 만들기
<textarea class="form-control" name="content" id="content" rows="10">{{ form.content.value|default_if_none:'' }}</textarea>- 해당 textarea에 summernote 적용
<script type="text/javascript">
$(document).ready(function() { $("#content").summernote(); })
</script>4. Django에서 불러오는 부분 처리
- Django에서 HTML 텍스트를 그대로 불러올 수 없음.
- 템플릿 필터중에 safe 필터를 사용
- 보안상에 문제가 있을수도 있으니 신중히 사용해야 함.
- 악성 스크립트 삽입 공격에 대한 고려가 필요함.
- 다행히도 Summernote 에디터에서는 입력한 데이터에 대해서는 이스케이프가 적용되서 HTML 태그를 생성하므로 safe 필터를 사용해도 문제가 없을 것이라고 생각된다.
- 이스케이프가 적용되지 않음, 기본적으로는 이스케이프 적용 => HTML 태그를 적용.
<div class="card-text" style="white-space: pre-line;">
{{ question.content|safe}}
</div>이스케이프 적용 / 미적용 차이점
- 이스케이프가 적용되지 않음
<b>- 이스케이프가 적용됨
<b>'프레임워크 > Django' 카테고리의 다른 글
| [ Django ] Choice (0) | 2021.09.15 |
|---|---|
| [ Django ] MySQL 연동 (0) | 2021.09.14 |
| [Django] Rest API 및 Ajax (0) | 2021.07.25 |
| [Django] Django 설치 (0) | 2021.07.16 |
| [Django] pyenv (0) | 2021.07.16 |